@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Account/Pages/ConfigurarAutenticadorDosFactores.razor.rz.scp.css */
.tarjeta-2fa[b-8jaxp9w2l6] {
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.cabecera-pagina-descripcion[b-8jaxp9w2l6],
.texto-2fa-secundario[b-8jaxp9w2l6],
.tarjeta-qr p[b-8jaxp9w2l6],
.ayuda-codigo[b-8jaxp9w2l6] {
    color: var(--color-text-muted);
}

.dos-factores-cargando[b-8jaxp9w2l6] {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    /* Mismo criterio que EstadoCargando: una carga rápida no enseña el esqueleto. */
    animation: dos-factores-aparece-b-8jaxp9w2l6 0s linear 200ms both;
}

@keyframes dos-factores-aparece-b-8jaxp9w2l6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dos-factores-esqueleto[b-8jaxp9w2l6] {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-surface-subtle), var(--color-surface-hover), var(--color-surface-subtle));
    background-size: 200% 100%;
    animation: brillo-2fa-b-8jaxp9w2l6 1.4s linear infinite;
}

.dos-factores-esqueleto-qr[b-8jaxp9w2l6] { width: 220px; height: 220px; }
.dos-factores-esqueleto-linea[b-8jaxp9w2l6] { width: 60%; height: 16px; }
.dos-factores-esqueleto-linea-corta[b-8jaxp9w2l6] { width: 35%; height: 16px; }

@keyframes brillo-2fa-b-8jaxp9w2l6 {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .dos-factores-esqueleto[b-8jaxp9w2l6] { animation: none; }
}

.dos-factores-alta[b-8jaxp9w2l6] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
}

.dos-factores-pasos[b-8jaxp9w2l6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tarjeta-2fa h2[b-8jaxp9w2l6] {
    margin: 0;
    font: var(--font-h4);
}

.tarjeta-qr[b-8jaxp9w2l6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.tarjeta-qr p[b-8jaxp9w2l6] {
    margin: 0;
    text-align: center;
    font: var(--font-caption);
}

.tarjeta-2fa label[b-8jaxp9w2l6] {
    display: block;
    font: var(--font-label-md);
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
}

.clave-manual[b-8jaxp9w2l6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin: var(--space-2) 0;
}

.clave-manual code[b-8jaxp9w2l6] {
    flex: 1;
    min-width: 0;
    font: 600 16px/24px var(--font-family);
    letter-spacing: .12em;
    word-break: break-all;
}

.uri-otpauth[b-8jaxp9w2l6] {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
    font: var(--font-body-sm);
    word-break: break-all;
}

.qr-2fa[b-8jaxp9w2l6] {
    display: block;
    width: 220px;
    height: 220px;
    margin: var(--space-4) auto;
    padding: var(--space-2);
    background-color: var(--color-neutral-0);
    border: var(--border-default);
    border-radius: var(--radius-sm);
}

.texto-2fa-exito[b-8jaxp9w2l6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-success-700);
    font-weight: 600;
}

.tarjeta-2fa-activa[b-8jaxp9w2l6] {
    max-width: 640px;
}

.tarjeta-2fa-activa .texto-2fa-exito[b-8jaxp9w2l6] { margin: 0; font: var(--font-h4); }
.tarjeta-2fa-activa .texto-2fa-secundario[b-8jaxp9w2l6] { margin: var(--space-3) 0 0; }

/*
  ::deep obligatorio: <InputText> renderiza su <input> nativo sin el
  atributo de scope de CSS isolation de este archivo — mismo motivo
  documentado en Login.razor.css.
*/
.tarjeta-2fa[b-8jaxp9w2l6]  input {
    max-width: 220px;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .42em;
    text-align: center;
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.tarjeta-2fa[b-8jaxp9w2l6]  input:focus {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.tarjeta-2fa[b-8jaxp9w2l6]  .validation-message {
    display: block;
    color: var(--color-danger-700);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
}

.dos-factores-obligatorio[b-8jaxp9w2l6] {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-info-500);
    border-radius: var(--radius-sm);
    background-color: var(--color-info-50);
    color: var(--color-text);
    font: var(--font-body-sm);
    margin-bottom: var(--space-4);
}

.alerta-login[b-8jaxp9w2l6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background-color: var(--color-danger-50);
    border: 1px solid var(--color-danger-500);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

/* El aspecto lo da <Boton Variante=Primario>; esta clase solo coloca el botón en la tarjeta (D-30: antes era una copia a pelo del primario). */
.boton-2fa[b-8jaxp9w2l6] {
    margin-top: var(--space-6);
}

/* Boton no parte la etiqueta (nowrap) y recorta el desborde: «Activar autenticación en dos pasos» a 320 px de ancho se cortaría. Con
   la especificidad de .boton + esta clase, la etiqueta pasa a línea y el botón crece en alto (su altura es un mínimo). */
.boton.boton-2fa[b-8jaxp9w2l6] {
    white-space: normal;
    text-align: center;
    padding-block: var(--space-2);
}

@media (max-width: 1024px) {
    .dos-factores-alta[b-8jaxp9w2l6] { grid-template-columns: 1fr; }
    .tarjeta-qr[b-8jaxp9w2l6] { max-width: 280px; }
}

@media (max-width: 640px) {
    .clave-manual[b-8jaxp9w2l6] { align-items: flex-start; flex-direction: column; }
    .tarjeta-2fa[b-8jaxp9w2l6]  input { max-width: 100%; }
    .boton-2fa[b-8jaxp9w2l6] { width: 100%; }
}

/*
  Códigos de recuperación (P0-8): paso 3 del mockup «Configurar 2FA TALVEG».
*/
.tarjeta-codigos-recuperacion[b-8jaxp9w2l6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 520px;
}

.tarjeta-codigos-recuperacion h2[b-8jaxp9w2l6],
.tarjeta-regenerar h2[b-8jaxp9w2l6] {
    margin: 0;
    font: var(--font-h4);
}

.aviso-codigos[b-8jaxp9w2l6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px 12px;
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    color: var(--color-warning-700);
    font: var(--font-body-md);
}

.lista-codigos[b-8jaxp9w2l6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-codigos code[b-8jaxp9w2l6] {
    display: block;
    padding: 6px 10px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: 600 14px/20px var(--font-family);
    letter-spacing: .08em;
    text-align: center;
}

.acciones-codigos[b-8jaxp9w2l6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.acciones-codigos .texto-2fa-secundario[b-8jaxp9w2l6] { font: var(--font-caption); }

.boton-secundario[b-8jaxp9w2l6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label);
    text-decoration: none;
}

.boton-secundario:hover[b-8jaxp9w2l6] {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.boton-continuar[b-8jaxp9w2l6] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 0 var(--space-6);
    text-decoration: none;
}

.tarjeta-regenerar[b-8jaxp9w2l6] { margin-top: var(--space-4); }
.codigos-restantes[b-8jaxp9w2l6] { margin: var(--space-3) 0 0; font-weight: 600; }

@media (max-width: 640px) {
    .lista-codigos[b-8jaxp9w2l6] { grid-template-columns: 1fr; }
    .boton-continuar[b-8jaxp9w2l6] { align-self: stretch; }
}

/* Salida de la página: con AuthLayout no hay menú ni barra superior. */
.salida-2fa[b-8jaxp9w2l6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.salida-2fa form[b-8jaxp9w2l6] {
    margin: 0;
}

.salida-2fa button.boton-secundario[b-8jaxp9w2l6] {
    cursor: pointer;
}
/* /Components/Account/Pages/PendienteDeRol.razor.rz.scp.css */
.pendiente-rol[b-st2gj23ckl] {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.pendiente-rol-tarjeta[b-st2gj23ckl] {
    width: 100%;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-overlay);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

.pendiente-rol-icono[b-st2gj23ckl] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background-color: var(--color-info-50);
    color: var(--color-info-500);
    font: 700 1rem/1 var(--font-family);
}

.pendiente-rol-cabecera[b-st2gj23ckl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pendiente-rol-eyebrow[b-st2gj23ckl] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pendiente-rol h1[b-st2gj23ckl],
.pendiente-rol h2[b-st2gj23ckl],
.pendiente-rol p[b-st2gj23ckl] {
    margin: 0;
}

.pendiente-rol h1[b-st2gj23ckl] {
    font: var(--font-heading-lg);
    color: var(--color-text);
}

.pendiente-rol-mensaje[b-st2gj23ckl] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    line-height: 1.5;
}

.pendiente-rol-ayuda[b-st2gj23ckl] {
    width: 100%;
    padding: var(--space-4);
    border-left: 3px solid var(--color-info-500);
    border-radius: var(--radius-sm);
    background-color: var(--color-info-50);
}

.pendiente-rol-ayuda summary[b-st2gj23ckl] {
    font: var(--font-label);
    color: var(--color-text);
    cursor: pointer;
}

.pendiente-rol-ayuda[open] summary[b-st2gj23ckl] {
    margin-bottom: var(--space-2);
}

.pendiente-rol-cuenta[b-st2gj23ckl] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pendiente-rol-cuenta-etiqueta[b-st2gj23ckl] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.pendiente-rol-cuenta-valor[b-st2gj23ckl] {
    font: var(--font-body-md);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.pendiente-rol-ayuda p[b-st2gj23ckl],
.pendiente-rol-pie[b-st2gj23ckl] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    line-height: 1.5;
}

.pendiente-rol form[b-st2gj23ckl] {
    width: 100%;
    margin: 0;
}

.pendiente-rol-cerrar-sesion[b-st2gj23ckl] {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    font: var(--font-label-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.pendiente-rol-cerrar-sesion:hover[b-st2gj23ckl] {
    background-color: var(--color-primario-fondo-hover);
    transform: translateY(-1px);
}
/* /Components/DesignSystem/AnfitrionToasts.razor.rz.scp.css */
.anfitrion-toasts[b-0tqqkrpqur] {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    /* Por encima de Modal (1050) y Drawer (1040): un toast (p. ej. "Cliente
       creado correctamente" tras guardar en un Drawer) debe seguir siendo
       visible aunque haya un overlay abierto encima. */
    z-index: 1100;
    display: flex;
    /* column-reverse: el DOM sigue en orden de llegada (el lector de pantalla los anuncia así) y
       a la vista el más reciente queda arriba (revisión de Design, 2026-10-17, §N). */
    flex-direction: column-reverse;
    gap: var(--space-2);
    max-width: 360px;
}

/* Fondo inverso y único para todos los tonos (--color-toast-fondo / --color-toast-texto, un par por
   tema): el tono lo llevan el icono y la barra de tiempo, vía --toast-tono (ver las variantes).
   Radio --radius-md, como el resto de superposiciones pequeñas. */
.toast[b-0tqqkrpqur] {
    --toast-tono: var(--color-toast-info);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-toast-fondo);
    box-shadow: var(--shadow-overlay);
    font: var(--font-body-md);
    color: var(--color-toast-texto);
    overflow: hidden;
    animation: entrar-toast-b-0tqqkrpqur var(--motion-slow) var(--ease-standard);
}

/* Móvil: la pila baja a la parte inferior, a todo el ancho menos 16 px (8 por lado) y por encima de las
   barras fijas (la de acciones mide 80 px, más 4 de aire). Entra desde abajo, no desde el lado. Va antes
   del bloque de movimiento reducido para que éste, al ser posterior, siga ganando. */
@media (max-width: 767px) {
    .anfitrion-toasts[b-0tqqkrpqur] {
        top: auto;
        right: var(--space-2);
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        left: var(--space-2);
        max-width: none;
    }

    .toast[b-0tqqkrpqur] {
        animation-name: entrar-toast-movil-b-0tqqkrpqur;
    }

    /* 44 px de alto táctil para «Deshacer» y para cerrar. */
    .toast .toast-accion[b-0tqqkrpqur],
    .toast .toast-cerrar[b-0tqqkrpqur] {
        min-height: 44px;
    }

    .toast .toast-cerrar[b-0tqqkrpqur] {
        min-width: 44px;
    }
}

@keyframes entrar-toast-movil-b-0tqqkrpqur {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrar-toast-b-0tqqkrpqur {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Con el puntero o el foco de teclado encima, la barra de tiempo se detiene;
   ToastService detiene a la vez el temporizador real (PunteroSobre/FocoEn),
   así que el aviso —sobre todo el de «Deshacer»— no se cierra bajo el puntero. */
.toast:hover .toast-progreso[b-0tqqkrpqur],
.toast:focus-within .toast-progreso[b-0tqqkrpqur] {
    animation-play-state: paused;
}

.toast button[b-0tqqkrpqur] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}

/* El tono ya no pinta el fondo, solo el color de su icono y de su barra de tiempo. Cada color de tono
   tiene valor propio por tema (tokens.css) para leerse sobre el fondo inverso. */
.toast-info[b-0tqqkrpqur] {
    --toast-tono: var(--color-toast-info);
}

.toast-exito[b-0tqqkrpqur] {
    --toast-tono: var(--color-toast-exito);
}

.toast-advertencia[b-0tqqkrpqur] {
    --toast-tono: var(--color-toast-aviso);
}

.toast-error[b-0tqqkrpqur] {
    --toast-tono: var(--color-toast-error);
}

/* Icono del tono (y marca trazada del éxito, que hereda currentColor). El texto se queda en
   --color-toast-texto: WCAG 1.4.1, el tono no va solo en el color porque cada tono tiene su icono. */
.toast .toast-icono[b-0tqqkrpqur] {
    flex: none;
    display: inline-flex;
    color: var(--toast-tono);
}

/* El mensaje ocupa el sitio libre y puede encogerse (§N: flex:1, min-width:0); acción, cuenta y cierre quedan a su derecha. */
.toast .toast-mensaje[b-0tqqkrpqur] {
    flex: 1;
    min-width: 0;
}

/* El botón de cerrar lleva icono, no glifo: inline-flex centra el svg dentro
   del botón. Va en su propia clase y no en ".toast button" porque ese
   selector también alcanza a .toast-accion, que es texto y no debe centrarse
   como una caja de icono. */
.toast-cerrar[b-0tqqkrpqur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* La acción ("Deshacer") tiene que distinguirse del botón de cerrar — es la interacción esperable, no un descarte.
   Lleva su propio color (--color-toast-accion, legible sobre el fondo inverso de cada tema), en negrita y sin
   subrayado. Doble clase para ganar a ".toast button", que fija color: inherit. */
.toast .toast-accion[b-0tqqkrpqur] {
    color: var(--color-toast-accion);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1rem;
    white-space: nowrap;
}

/* El botón de cerrar es un botón de 28 px, no un glifo suelto. */
.toast .toast-cerrar[b-0tqqkrpqur] {
    flex: none;
    width: 28px;
    height: 28px;
    opacity: 0.8;
}

.toast .toast-cerrar:hover[b-0tqqkrpqur],
.toast .toast-cerrar:focus-visible[b-0tqqkrpqur] {
    opacity: 1;
}

/* Segundos que quedan para «Deshacer»: cifras de ancho fijo para que el aviso no baile al cambiar. */
.toast-cuenta[b-0tqqkrpqur] {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.75;
}

/*
  Barra de progreso que se vacía a la misma velocidad que el autodescarte
  (duración fijada desde ToastService.DuracionAutoDescarte vía
  animation-duration inline) — comunica cuánto tiempo queda antes de que
  el toast desaparezca solo, sin necesidad de leerlo en ningún sitio.
*/
.toast-progreso[b-0tqqkrpqur] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    /* El color del tono, atenuado: sobre el fondo inverso el blanco fijo de antes ya no se ve en oscuro. */
    background-color: var(--toast-tono);
    opacity: 0.8;
    transform-origin: left;
    animation-name: vaciar-progreso-b-0tqqkrpqur;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes vaciar-progreso-b-0tqqkrpqur {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/*
  Trazado de confirmación (Tier C, 07 § 6 — portador decidido en DDL-071):
  la marca se dibuja una vez al entrar el toast de Éxito, vaciando el
  stroke-dashoffset a lo largo del trazo (longitud del path ≈ 14.9, se
  redondea a 15). Solo existe en .toast-exito — los demás tonos no llevan
  marca, y el nodo no se recrea al repintar gracias al @key del anfitrión.
*/
.toast-trazado[b-0tqqkrpqur] {
    flex: none;
    width: 16px;
    height: 16px;
}

.toast-trazado path[b-0tqqkrpqur] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 15;
    stroke-dashoffset: 15;
    animation: trazar-confirmacion-b-0tqqkrpqur var(--motion-slow) var(--ease-standard) forwards;
}

@keyframes trazar-confirmacion-b-0tqqkrpqur {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-progreso[b-0tqqkrpqur] {
        animation: none;
        opacity: 0;
    }

    /* Tier C se desactiva siempre con reduced-motion (DDL-020): la marca
       aparece ya trazada, sin animación. */
    .toast-trazado path[b-0tqqkrpqur] {
        animation: none;
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-0tqqkrpqur] {
        animation: none;
    }
}
/* /Components/DesignSystem/AnilloCumplimiento.razor.rz.scp.css */
/*
  Envoltorio de posicionamiento (lámina L3, ".ring"): el SVG dibuja el aro,
  el texto va encima como <span> HTML absoluto — ver comentario del .razor.
*/
.anillo-cumplimiento-envoltorio[b-eb9ltep7fw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.anillo-cumplimiento-pequeno[b-eb9ltep7fw] {
    width: 24px;
    height: 24px;
}

.anillo-cumplimiento-medio[b-eb9ltep7fw] {
    width: 32px;
    height: 32px;
}

.anillo-cumplimiento-grande[b-eb9ltep7fw] {
    width: 180px;
    height: 180px;
}

.anillo-cumplimiento-cabecera[b-eb9ltep7fw] {
    width: 88px;
    height: 88px;
}

.anillo-cumplimiento[b-eb9ltep7fw] {
    width: 100%;
    height: 100%;
    display: block;
}

.anillo-cumplimiento-pista[b-eb9ltep7fw] {
    fill: none;
    stroke: var(--color-anillo-pista);
    stroke-width: 3.5;
}

.anillo-cumplimiento-progreso[b-eb9ltep7fw] {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 18px 18px;
    transition: stroke-dasharray 0.2s ease;
}

.anillo-cumplimiento-texto[b-eb9ltep7fw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--font-label-md);
    font-size: 8.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: currentColor;
}

.anillo-cumplimiento-medio .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    font-size: 10px;
}

.anillo-cumplimiento-grande .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    flex-direction: column;
    gap: 2px;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.anillo-cumplimiento-cabecera .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    flex-direction: column;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* La fracción bajo la cifra («2 de 4»): pequeña y sin el color del tono. */
.anillo-cumplimiento-detalle[b-eb9ltep7fw] {
    margin-top: 3px;
    font: var(--font-label-md);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* Sin universo pero con detalle («0 de 0»): la pista sola, sin color. */
.anillo-cumplimiento-solo-pista .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    color: var(--color-text-muted);
}

.anillo-cumplimiento-leyenda[b-eb9ltep7fw] {
    font: var(--font-label-md);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* *-700, no *-500 — mismo motivo que Badge.razor.css: contraste AA sobre fondo claro. */
.anillo-cumplimiento-exito .anillo-cumplimiento-progreso[b-eb9ltep7fw],
.anillo-cumplimiento-exito .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    stroke: var(--color-success-700);
    color: var(--color-success-700);
}

.anillo-cumplimiento-advertencia .anillo-cumplimiento-progreso[b-eb9ltep7fw],
.anillo-cumplimiento-advertencia .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    stroke: var(--color-warning-700);
    color: var(--color-warning-700);
}

.anillo-cumplimiento-peligro .anillo-cumplimiento-progreso[b-eb9ltep7fw],
.anillo-cumplimiento-peligro .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    stroke: var(--color-danger-700);
    color: var(--color-danger-700);
}

.anillo-cumplimiento-marca .anillo-cumplimiento-progreso[b-eb9ltep7fw],
.anillo-cumplimiento-marca .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    stroke: var(--color-primary-500);
    color: var(--color-text);
}

/* Sin universo (Porcentaje null): "—" en muted, sin aro — nunca 0%/100%. */
.anillo-cumplimiento-sin-universo .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    position: static;
    font-weight: 400;
    color: var(--color-text-muted);
}
/* /Components/DesignSystem/AvatarTenant.razor.rz.scp.css */
.avatar-tenant[b-ftrkij2yg7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: var(--radius-md);
    /* Par de tokens propio con variante por tema (tokens.css). No usar
       --color-primary-100 + --color-primary-700 aquí: en oscuro el 700 se
       remapea a claro y el 100 no, y las iniciales se pierden (1,00:1). */
    background: var(--color-avatar-fondo);
    color: var(--color-avatar-texto);
    font: var(--font-label-md);
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
}

.avatar-tenant-pequeno[b-ftrkij2yg7] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font: var(--font-caption);
    font-weight: 700;
}

.avatar-tenant-logo[b-ftrkij2yg7] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Blanco de marca en los dos temas (mockup #fff): un logo de tinta oscura
       sobre transparencia se perdería sobre --color-surface en oscuro. */
    background: var(--color-logo-fondo);
}
/* /Components/DesignSystem/AvatarUsuario.razor.rz.scp.css */
/*
  El lado del círculo es una propiedad propia para que el emoji escale con él y para
  que quien lo envuelve (el botón del menú de cuenta) pueda fijar otro tamaño sin
  duplicar las reglas.
*/
.avatar-usuario[b-j6inxn8rzx] {
    --avatar-usuario-lado: 32px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--avatar-usuario-lado);
    height: var(--avatar-usuario-lado);
    overflow: hidden;
    border-radius: var(--radius-full);
    /* Par con variante por tema (tokens.css): ver AvatarTenant.razor.css. */
    background-color: var(--color-avatar-fondo);
    color: var(--color-avatar-texto);
    font: var(--font-label-md);
    letter-spacing: 0;
    vertical-align: middle;
    user-select: none;
}

.avatar-usuario-pequeno[b-j6inxn8rzx] {
    --avatar-usuario-lado: 24px;
    font: var(--font-caption);
    font-weight: 600;
    /* 10 px: dos iniciales de 12 px no caben con holgura en 24 px (matriz de tamaños de Design, §A). */
    font-size: 0.625rem;
}

.avatar-usuario-grande[b-j6inxn8rzx] {
    --avatar-usuario-lado: 56px;
    font-size: 1.125rem;
}

/* Anillo interior de 1 px en los cuatro tonos del catálogo (solo con emoji; las iniciales no
   lo llevan). Inset y no borde: no cambia el tamaño del círculo. */
.avatar-usuario-emoji[b-j6inxn8rzx] {
    box-shadow: inset 0 0 0 1px var(--color-avatar-anillo);
}

/* Tonos del catálogo: solo cambian el fondo, y solo acompañan a un emoji (que trae
   sus propios colores); las iniciales van siempre sobre el par azul de arriba. */
.avatar-usuario-tono-verde[b-j6inxn8rzx] {
    background-color: var(--color-success-50);
}

.avatar-usuario-tono-ambar[b-j6inxn8rzx] {
    background-color: var(--color-warning-50);
}

.avatar-usuario-tono-neutro[b-j6inxn8rzx] {
    background-color: var(--color-avatar-fondo-neutro);
}

/* «Sistema»: acciones automáticas de TALVEG (02 § 3.3, Hydra Cyan: el sistema actuando). Rombo en
   el cian de sistema sobre su tinte, con el anillo del indicador. */
.avatar-usuario-sistema[b-j6inxn8rzx] {
    background-color: var(--color-system-tint);
    color: var(--color-system-text);
    box-shadow: inset 0 0 0 1px var(--color-system-indicator);
}

/* «Usuario eliminado»: la cuenta ya no existe. Sin relleno y con borde discontinuo para que no se
   lea como una persona viva; «?» en vez de las iniciales de un nombre que ya no es de nadie.
   border-box: el borde no agranda el círculo respecto a los demás avatares. */
.avatar-usuario-eliminado[b-j6inxn8rzx] {
    box-sizing: border-box;
    background-color: transparent;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-control);
}

.avatar-usuario-marca[b-j6inxn8rzx] {
    font-weight: 700;
    line-height: 1;
}

.avatar-usuario-sistema .avatar-usuario-marca[b-j6inxn8rzx] {
    font-size: calc(var(--avatar-usuario-lado) * 0.4);
}

.avatar-usuario-glifo[b-j6inxn8rzx] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    font-size: calc(var(--avatar-usuario-lado) * 0.58);
    font-weight: 400;
    line-height: 1;
    transition: transform var(--motion-base) var(--ease-fluid);
}

@media (prefers-reduced-motion: reduce) {
    .avatar-usuario-glifo[b-j6inxn8rzx] {
        transition: none;
    }
}
/* /Components/DesignSystem/Badge.razor.rz.scp.css */
.badge[b-8n8w8i80b3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* El borde de 1px va DENTRO de la caja de siempre: el padding cede ese
       píxel por cada lado, así que la pastilla sigue midiendo 24px de alto
       (20 de línea + 1 + 1 de padding + 1 + 1 de borde) y las filas que la
       contienen no cambian de altura. */
    padding: 1px calc(var(--space-2) - 1px);
    /* Cada tono fija su border-color más abajo: su color de texto al 35 %.
       Sin él la pastilla desaparece sobre una fila teñida con su mismo fondo
       *-50 (medido 2026-10-08: Peligro sobre fila tintada de peligro, 1,00:1
       entre el fondo de la pastilla y el de la fila). */
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    /* 13px, peso 600 (decisión del 2026-10-08: «pastillas a 13 px» en
       listados y fichas 360). El tamaño y el peso salen de --font-label-md;
       solo se pisa su línea de 16px por la de 20px de la pastilla. */
    font: var(--font-label-md);
    line-height: 1.25rem;
    white-space: nowrap;
}

/* Densidad de fila (Centro 360 § 0.9) — solo métrica, el color no cambia.
   No sube a 13px (decisión del 2026-10-08: «la variante pequeña se queda
   como está»): 11px y 18px de alto. Lleva el mismo borde que la normal
   —es la que más cae sobre filas teñidas con su mismo fondo—, y para no
   crecer la línea baja de 18px a 16px: 16 + 1 + 1 de borde = 18. */
.badge-pequeno[b-8n8w8i80b3] {
    padding: 0 calc(var(--space-2) - 1px);
    font-size: 0.6875rem;
    line-height: 1rem;
}

/* El badge mide 13px de texto sobre 20px de línea: el icono de 16 del
   catálogo lo desequilibra, así que se pinta a 14 (12 en el badge pequeño,
   que es el de densidad de fila). ::deep porque el svg lo renderiza <Icono>,
   un componente hijo sin el scope de esta hoja. */
.badge[b-8n8w8i80b3]  .icono {
    width: 14px;
    height: 14px;
}

.badge-pequeno[b-8n8w8i80b3]  .icono {
    width: 12px;
    height: 12px;
}

.badge-neutro[b-8n8w8i80b3] {
    background-color: var(--color-surface-subtle);
    color: var(--color-neutral-700);
    border-color: color-mix(in srgb, var(--color-neutral-700) 35%, transparent);
}

/* *-700, no *-500: el semáforo de vigencia documental es el patrón visual
   insignia del producto (Project-Hydra-Negocio/tecnico/docs/archive/design/DESIGN_SYSTEM.md) y *-500 sobre *-50 incumplía el
   "WCAG AA no negociable" (≈2,2:1 el verde, ≈1,9:1 el ámbar) — hallazgo P0-8
   de Project-Hydra-Negocio/MATURITY_REVIEW.md. Los tokens *-700 ya se remapean por
   tema (ver tokens.css), así que este cambio no necesita lógica aparte para
   modo oscuro. */
.badge-exito[b-8n8w8i80b3] {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border-color: color-mix(in srgb, var(--color-success-700) 35%, transparent);
}

.badge-advertencia[b-8n8w8i80b3] {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: color-mix(in srgb, var(--color-warning-700) 35%, transparent);
}

.badge-peligro[b-8n8w8i80b3] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-color: color-mix(in srgb, var(--color-danger-700) 35%, transparent);
}

/* «En tolerancia»: entre el ámbar de advertencia y el rojo de peligro (su
   gravedad está entre Urgente y Vencido). Tokens propios en tokens.css, con
   variante por tema. */
.badge-tolerancia[b-8n8w8i80b3] {
    background-color: var(--color-tolerancia-50);
    color: var(--color-tolerancia-700);
    border-color: color-mix(in srgb, var(--color-tolerancia-700) 35%, transparent);
}

.badge-info[b-8n8w8i80b3] {
    background-color: var(--color-info-50);
    color: var(--color-info-500);
    /* Info no tiene escalón *-700: su texto es *-500, y de él sale el borde. */
    border-color: color-mix(in srgb, var(--color-info-500) 35%, transparent);
}
/* /Components/DesignSystem/BandaAccion.razor.rz.scp.css */
.banda-accion[b-t1ldq6yqbs] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: 10px var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-md);
    font: var(--font-body-md);
    font-weight: 500;
}

.banda-accion[data-tono="peligro"][b-t1ldq6yqbs] {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
    border-color: color-mix(in srgb, var(--color-danger-700) 35%, transparent);
}

.banda-accion[data-tono="advertencia"][b-t1ldq6yqbs] {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: color-mix(in srgb, var(--color-warning-700) 35%, transparent);
}

.banda-accion[data-tono="neutro"][b-t1ldq6yqbs] {
    background: var(--color-info-50);
    color: var(--color-neutral-700);
    border-color: var(--color-border);
}

.banda-accion-texto[b-t1ldq6yqbs] {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
}

.banda-accion-enlace[b-t1ldq6yqbs] {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.banda-accion-enlace:focus-visible[b-t1ldq6yqbs] {
    outline: var(--border-focus);
    outline-offset: 2px;
}
/* /Components/DesignSystem/BarraAccionesLote.razor.rz.scp.css */
.barra-acciones-lote[b-57ucg9m66u] {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-overlay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    border: var(--border-default);
    padding: var(--space-3) var(--space-4);
    z-index: 1040;
}

.barra-acciones-lote-cantidad[b-57ucg9m66u] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Aparta la acción destructiva de «Cancelar» (D-29). */
.barra-acciones-lote-separador[b-57ucg9m66u] {
    align-self: stretch;
    width: 1px;
    background-color: var(--color-border);
}
/* /Components/DesignSystem/BarraCumplimiento.razor.rz.scp.css */
.barra-cumplimiento[b-waaa9ae2u4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.barra-cumplimiento-pista[b-waaa9ae2u4] {
    display: block;
    flex: none;
    width: 64px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-anillo-pista);
    overflow: hidden;
}

.barra-cumplimiento-relleno[b-waaa9ae2u4] {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    /* El tramo fija `color` y el relleno lo toma: los *-700 son tokens de texto, con variante por tema. */
    background-color: currentColor;
}

.barra-cumplimiento-cifra[b-waaa9ae2u4] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

/* *-700, no *-500 — mismo motivo que AnilloCumplimiento y Badge: contraste sobre fondo claro. */
.barra-cumplimiento-exito .barra-cumplimiento-relleno[b-waaa9ae2u4] {
    color: var(--color-success-700);
}

.barra-cumplimiento-advertencia .barra-cumplimiento-relleno[b-waaa9ae2u4] {
    color: var(--color-warning-700);
}

.barra-cumplimiento-peligro .barra-cumplimiento-relleno[b-waaa9ae2u4] {
    color: var(--color-danger-700);
}

.barra-cumplimiento-marca .barra-cumplimiento-relleno[b-waaa9ae2u4] {
    background: var(--color-primary-500);
}

/* Sin universo: «—» en gris, sin pista — nunca 0 % ni 100 %. */
.barra-cumplimiento-sin-universo .barra-cumplimiento-cifra[b-waaa9ae2u4] {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Estrecho o táctil: la cifra es el dato; la pista no cabe junto al nombre. */
@media (max-width: 767px) {
    .barra-cumplimiento-pista[b-waaa9ae2u4] {
        display: none;
    }
}
/* /Components/DesignSystem/BarraFiltros.razor.rz.scp.css */
.barra-filtros-maqueta[b-qzt2krsx1m] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.barra-filtros-maqueta .barra-filtros-pastillas-fila[b-qzt2krsx1m] { align-items: flex-end; gap: var(--space-3); }
.barra-filtros-maqueta .barra-filtros-buscador-pantalla[b-qzt2krsx1m] { flex: 2 1 260px; max-width: none; }
.barra-filtros-maqueta[b-qzt2krsx1m]  .campo label { font: var(--font-caption); color: var(--color-text); }
.barra-filtros-maqueta .barra-filtros-buscador-icono[b-qzt2krsx1m],
.barra-filtros-maqueta .barra-filtros-tecla[b-qzt2krsx1m] { top: auto; bottom: var(--space-3); transform: none; }
.barra-filtros-maqueta[b-qzt2krsx1m]  .campo-input { min-height: var(--space-10); }
.barra-filtros-maqueta[b-qzt2krsx1m]  .menu-acciones-disparador-pastilla { min-height: var(--space-10); border-radius: var(--radius-sm); }
.barra-filtros-maqueta .guardar-filtro-barra[b-qzt2krsx1m] { margin-left: auto; }
.lista-herramientas-maqueta[b-qzt2krsx1m] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.lista-contador[b-qzt2krsx1m] { color: var(--color-text-muted); font: var(--font-body-md); }
.lista-herramientas-maqueta[b-qzt2krsx1m]  .barra-herramientas-lista:empty { display: none; }

.lista-contador .cabecera-listado-contador[b-qzt2krsx1m] { padding: 0; border-radius: 0; background: none; font: inherit; }
/* /Components/DesignSystem/Boton.razor.rz.scp.css */
.boton[b-vxro8r3ezt] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font: var(--font-label-md);
    font-weight: 600;
    cursor: pointer;
    border: var(--border-default);
    overflow: hidden;
    /* Tier A usa aceleracion estandar (07 § 3). La curva "spring" con
       overshoot que habia aqui no esta en el contrato cerrado de 07 § 8, y
       anadir una curva nueva exige decidirla antes en 07. */
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
    white-space: nowrap;
}

.boton:disabled[b-vxro8r3ezt] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* 40 px, la altura del mockup (D-30: medía 45,6 px con el relleno de 14 px y
   desentonaba junto a los pequeños de 36). Sin relleno vertical: la altura la da el mínimo, y una
   etiqueta que no cabe crece en vez de desbordar. */
.boton-medio[b-vxro8r3ezt] {
    padding: 0 1.5rem;
    min-height: 40px;
}

.boton-pequeno[b-vxro8r3ezt] {
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
    font-size: 0.8125rem;
}

/*
  36px es intencional en escritorio (fila de tabla densa, puntero preciso),
  pero por debajo del objetivo táctil de 44px que pide WCAG 2.5.5 — y este
  es el tamaño que usan los botones "Ver/Editar/Eliminar" de cada fila en
  ~27 pantallas de listado. pointer:coarse cubre también una tablet/portátil
  táctil que no esté por debajo de 767px.
*/
@media (max-width: 767px), (pointer: coarse) {
    .boton-pequeno[b-vxro8r3ezt] {
        min-height: 44px;
    }

    .boton-medio[b-vxro8r3ezt] {
        min-height: 44px;
    }
}

.boton-primario[b-vxro8r3ezt] {
    background-color: var(--color-primario-fondo);
    border-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.boton-primario:not(:disabled):hover[b-vxro8r3ezt] {
    background-color: var(--color-primario-fondo-hover);
    border-color: var(--color-primario-fondo-hover);
    transform: translateY(-1px);
}

.boton-secundario[b-vxro8r3ezt] {
    background-color: var(--color-surface);
    /* El borde es lo único que delimita este botón sobre la superficie:
       está sujeto al 3:1 de 02 § 8 (DDL-062/063). Las variantes primaria y
       de peligro se identifican por su relleno, y la fantasma por su texto. */
    border-color: var(--color-border-control);
    color: var(--color-text);
}

.boton-secundario:not(:disabled):hover[b-vxro8r3ezt] {
    background-color: var(--color-surface-hover);
    transform: translateY(-1px);
}

/*
  Fantasma = botón con borde de menor peso que Secundario en una barra de
  herramientas ("Selección múltiple", "Expandir todos", "Exportar" — ver
  ESPECIFICACION-VISUAL-HYDRA (documento que ya no existe) § 3.1/3.7, ".btn.fantasma": fondo surface,
  borde border-strong). Un intento anterior en esta misma sesión lo convirtió
  en un link plano para que "Detalles"/"Eliminar" de fila se parecieran al
  lámina — pero esa referencia estaba incompleta: la especificación
  consolidada confirma que las acciones de fila NO son botones Fantasma en
  absoluto, son enlaces `<a>` con su propia clase (".accion-fila-enlace",
  ver list-page.css) — Fantasma vuelve a ser el botón con borde que ya era.
*/
.boton-fantasma[b-vxro8r3ezt] {
    background-color: var(--color-surface);
    border-color: var(--color-border-control);
    color: var(--color-text);
}

.boton-fantasma:not(:disabled):hover[b-vxro8r3ezt] {
    background-color: var(--color-surface-hover);
    transform: translateY(-1px);
}

.boton-destructivo[b-vxro8r3ezt] {
    background-color: var(--color-danger-500);
    border-color: var(--color-danger-500);
    color: var(--color-neutral-0);
}

.boton-destructivo:not(:disabled):hover[b-vxro8r3ezt] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.boton:active:not(:disabled)[b-vxro8r3ezt] {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/*
  El ripple (.boton-ondulacion) NO se estiliza aquí a propósito — vive en
  base.css sin aislar. El <span> lo crea JS puro (document.createElement,
  ver wwwroot/js/microinteracciones.js), y el compilador de Blazor reescribe
  todo selector de un .razor.css a la forma ".clase[b-xxxxxxxx]" (el mismo
  atributo de scope que ve en el propio <button>) — un elemento creado fuera
  del árbol de Razor nunca recibe ese atributo, así que una regla scoped
  jamás lo alcanza: quedaba con position:static por defecto (en vez de
  absolute) dentro de un contenedor inline-flex, con el ancho/alto grande
  que le pone el JS inline, inflando el botón en cada clic sin límite —
  bug real encontrado en producción tras esta ronda de pruebas.
*/

@media (prefers-reduced-motion: reduce) {
    .boton[b-vxro8r3ezt] {
        transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
            opacity var(--motion-fast) var(--ease-standard);
    }

    .boton:active:not(:disabled)[b-vxro8r3ezt] {
        transform: none;
    }
}

.boton-spinner[b-vxro8r3ezt] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: girar-b-vxro8r3ezt 0.6s linear infinite;
}

@keyframes girar-b-vxro8r3ezt {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/DesignSystem/Boton360.razor.rz.scp.css */
/* 30×30 con borde, como .boton-360 de los mockups Cliente 360 y Empresa 360. */
.boton-360[b-j9w1z9rdqp] {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    vertical-align: middle;
    transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.boton-360:hover[b-j9w1z9rdqp] {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.boton-360:focus-visible[b-j9w1z9rdqp] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

/* Al pasar el cursor o enfocarlo, el icono gira media vuelta con la curva de los iconos
   animados, en las dos variantes: el botón que abre el panel (cabeceras y filas de las fichas
   360) y el enlace a la página 360 completa (listados). Sin giro con movimiento reducido. */
.boton-360[b-j9w1z9rdqp]  svg {
    transition: transform 360ms var(--ease-fluid);
}

.boton-360:hover[b-j9w1z9rdqp]  svg,
.boton-360:focus-visible[b-j9w1z9rdqp]  svg {
    transform: rotate(180deg);
}

/* Enlace a la página 360 completa (listados). */
.boton-360-pagina[b-j9w1z9rdqp] {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .boton-360[b-j9w1z9rdqp]  svg {
        transition: none;
    }

    .boton-360:hover[b-j9w1z9rdqp]  svg,
    .boton-360:focus-visible[b-j9w1z9rdqp]  svg {
        transform: none;
    }
}
/* /Components/DesignSystem/BotonConEspera.razor.rz.scp.css */
/* Botón con espera (ficha 11). Todo el color sale de tokens que ya tienen su par de contraste en
   ContrasteDeComponentesPorTemaTests: el relleno es el color de hover del primario (la letra ya se mide sobre él), el aviso
   «colgada» y el «hecha» usan los tonos suaves de aviso y éxito con la letra normal. */
.boton-espera[b-pkqs8zonh8] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.boton-espera-fila[b-pkqs8zonh8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.boton-espera-mensaje[b-pkqs8zonh8] {
    min-height: 1.25rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, var(--color-text));
}

/* Mientras corre el botón está deshabilitado, pero no «apagado»: el progreso se tiene que ver. */
.boton-espera[b-pkqs8zonh8]  .boton-espera-boton:disabled {
    opacity: 1;
    cursor: progress;
}

.boton-espera[b-pkqs8zonh8]  .boton-espera-boton {
    min-width: 11rem;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

.boton-espera-relleno[b-pkqs8zonh8] {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--color-primario-fondo-hover);
    transition: width var(--motion-slow) linear;
    pointer-events: none;
}

/* El relleno sigue a la variante: el color de hover de cada una ya tiene su par de contraste con la letra (primario: letra del
   primario sobre su hover; secundario y fantasma: letra normal sobre surface-hover); el destructivo oscurece su propio fondo. */
.boton-espera[b-pkqs8zonh8]  .boton-secundario .boton-espera-relleno,
.boton-espera[b-pkqs8zonh8]  .boton-fantasma .boton-espera-relleno {
    background-color: var(--color-surface-hover);
}

.boton-espera[b-pkqs8zonh8]  .boton-destructivo .boton-espera-relleno {
    background-color: rgb(0 0 0 / 0.2);
}

/* Sin total conocido: franja que cruza el botón, sin prometer un porcentaje. */
.boton-espera-franja[b-pkqs8zonh8] {
    width: 40%;
    animation: boton-espera-franja-b-pkqs8zonh8 1.1s var(--ease-fluid) infinite;
}

@keyframes boton-espera-franja-b-pkqs8zonh8 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

.boton-espera-etiqueta[b-pkqs8zonh8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Colgada: botón en estado de aviso. Fondo suave con la letra normal (par medido en el trinquete de contraste). */
.boton-espera[b-pkqs8zonh8]  .boton-espera-colgada {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-700);
    color: var(--color-text);
}

.boton-espera[b-pkqs8zonh8]  .boton-espera-colgada:not(:disabled):hover {
    background-color: var(--color-warning-50);
}

.boton-espera-mensaje[b-pkqs8zonh8] {
    transition: color var(--motion-base) var(--ease-standard);
}

.boton-espera[data-estado="colgada"] .boton-espera-mensaje[b-pkqs8zonh8] {
    color: var(--color-text);
}

/* Hecha: éxito con la letra normal, y el check se dibuja. */
.boton-espera[b-pkqs8zonh8]  .boton-espera-hecha {
    background-color: var(--color-success-50);
    border-color: var(--color-success-700);
    color: var(--color-text);
}

.boton-espera-check[b-pkqs8zonh8] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-success-700);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-espera-check path[b-pkqs8zonh8] {
    stroke-dasharray: 22;
    animation: boton-espera-dibuja-b-pkqs8zonh8 var(--motion-transition) var(--ease-fluid) both;
}

@keyframes boton-espera-dibuja-b-pkqs8zonh8 {
    from {
        stroke-dashoffset: 22;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.boton-espera-cancelar[b-pkqs8zonh8] {
    background: none;
    border: 0;
    padding: var(--space-1);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text);
    text-decoration: underline;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.boton-espera-cancelar:focus-visible[b-pkqs8zonh8] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Sin movimiento: el porcentaje y los textos siguen diciendo todo; solo se retira lo que se mueve. */
@media (prefers-reduced-motion: reduce) {
    .boton-espera-franja[b-pkqs8zonh8] {
        animation: none;
        width: 100%;
        opacity: 0.55;
    }

    .boton-espera-relleno[b-pkqs8zonh8],
    .boton-espera-mensaje[b-pkqs8zonh8],
    .boton-espera[b-pkqs8zonh8]  .boton-espera-boton {
        transition: none;
    }

    .boton-espera-check path[b-pkqs8zonh8] {
        animation: none;
    }
}
/* /Components/DesignSystem/BotonCopiar.razor.rz.scp.css */
.boton-copiar[b-0mwk60zjy0] {
    position: relative;
    font: var(--font-label-md);
    color: var(--color-primary-500);
    background: none;
    border: var(--border-control);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.boton-copiar-confirmacion[b-0mwk60zjy0] {
    position: absolute;
    inset-inline-start: calc(100% + var(--space-1));
    color: var(--color-primary-500);
}

.boton-copiar:hover:not(:disabled)[b-0mwk60zjy0] {
    background-color: var(--color-surface-hover);
}

.boton-copiar:disabled[b-0mwk60zjy0] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Identificador copiable en una fila de listado: el dato es el botón. Como `.copia` de las
   maquetas 360: seminegrita, 2 px a cada lado y sin subrayado al pasar el ratón. */
.boton-copiar-en-linea[b-0mwk60zjy0] {
    font: inherit;
    font-weight: 600;
    color: inherit;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0 2px;
    cursor: copy;
}

.boton-copiar-en-linea:hover:not(:disabled)[b-0mwk60zjy0] {
    background-color: transparent;
    color: var(--color-primary-500);
    text-decoration: none;
}

.boton-copiar-en-linea:focus-visible[b-0mwk60zjy0] {
    outline: var(--border-focus);
    outline-offset: 1px;
    color: var(--color-primary-500);
}
/* /Components/DesignSystem/Breadcrumb.razor.rz.scp.css */
.breadcrumb ol[b-s31f6zqofl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-1);
}

.breadcrumb-item[b-s31f6zqofl] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.breadcrumb-enlace[b-s31f6zqofl] {
    background: none;
    border: none;
    padding: var(--space-1) var(--space-1);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.breadcrumb-enlace:hover[b-s31f6zqofl] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.breadcrumb-enlace:focus-visible[b-s31f6zqofl] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.breadcrumb-actual[b-s31f6zqofl] {
    font: var(--font-body-sm);
    font-weight: 600;
    color: var(--color-text);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-separador[b-s31f6zqofl] {
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .breadcrumb-item:not(:nth-last-child(2)):not(:last-child)[b-s31f6zqofl] {
        display: none;
    }
}
/* /Components/DesignSystem/CabeceraIdentidad.razor.rz.scp.css */
/* .tarjeta.ident de los mockups «… 360 página». Sin sombra: sombra solo en Overlay. */
.cabecera-identidad[b-hmomhmvawo] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
    margin-bottom: var(--space-3);
    padding: 18px 22px;
    border: var(--border-default);
    border-radius: var(--radius-lg);
    /* background-color, no el atajo background: el velo de cumplimiento (.velo-cumplimiento,
       base.css) pinta su degradado como background-image y el atajo lo borraría. */
    background-color: var(--color-surface);
}

.cabecera-identidad-anillo[b-hmomhmvawo] {
    flex: none;
}

.cabecera-identidad-texto[b-hmomhmvawo] {
    flex: 1;
    min-width: 0;
}

.cabecera-identidad-kicker[b-hmomhmvawo] {
    display: block;
    font: var(--font-body-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cabecera-identidad-titulo[b-hmomhmvawo] {
    margin: 2px 0 0;
    font: var(--font-heading-lg);
    overflow-wrap: anywhere;
}

.cabecera-identidad-titular[b-hmomhmvawo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.cabecera-identidad-datos[b-hmomhmvawo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 7px;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.cabecera-identidad-acciones[b-hmomhmvawo] {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/*
   Móvil y tableta (@media (max-width:900px) de los «… 360 página»: .centro360-cabecera{flex-wrap:wrap}
   y .centro360-acciones{align-items:flex-start}): las acciones pasan a su propia fila bajo el anillo
   y la identidad, en vez de apretar el nombre hasta una letra por línea.
*/
@media (max-width: 900px) {
    .cabecera-identidad[b-hmomhmvawo] {
        flex-wrap: wrap;
    }

    .cabecera-identidad-acciones[b-hmomhmvawo] {
        align-items: flex-start;
    }
}
/* /Components/DesignSystem/CabeceraListado.razor.rz.scp.css */
.cabecera-listado-exportar[b-tdfj2iiui5] { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font: var(--font-body-md); text-decoration: none; }
.cabecera-listado-exportar:hover[b-tdfj2iiui5] { text-decoration: underline; }
/* /Components/DesignSystem/CabeceraPagina.razor.rz.scp.css */
/*
   La caja exterior (.cabecera-pagina: flex, space-between, margin-bottom) la
   sigue poniendo list-page.css, que es global y compartido con las 21 páginas
   que todavía escriben la cabecera a mano. Aquí solo van las piezas nuevas.
*/

/* .retencion-cabecera y .cabecera-delegaciones —dos copias byte a byte de la
   misma caja— traían wrap y gap, que .cabecera-pagina no tiene. Se conservan
   aquí para no estrechar el título contra su botón en pantallas angostas. */
.cabecera-pagina[b-ur41yvo5i4] {
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* La separación entre kicker, título y entradilla la pone el gap, no los
   márgenes de cada hijo: así hay UN valor y no tres que se suman. 8px es el
   del mockup, medido —no elegido— sobre Proyectos, Facturación y Vehículos:
   los tres pintan este bloque como flex column con rowGap 8px y los hijos a
   margen cero (kicker 113→121, título 165→173). */
.cabecera-pagina-texto[b-ur41yvo5i4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* Con descripción la cabecera deja de ser una línea: alinear las acciones al
   alto del título y no al centro del bloque entero, que las dejaría flotando
   a media entradilla. Gana a la regla global por especificidad (clase +
   atributo de ámbito). */
/* Con Inicio: la pieza de la izquierda y el texto van juntos, 24px entre
   ellos (gap de .centro360-cabecera en el mockup de Empresa 360), y las
   acciones siguen a la derecha. */
.cabecera-pagina-principal[b-ur41yvo5i4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    min-width: 0;
}

.cabecera-pagina-inicio[b-ur41yvo5i4] {
    flex: none;
    display: inline-flex;
}

.cabecera-pagina-con-descripcion[b-ur41yvo5i4] {
    align-items: flex-start;
}

/* Título y su pieza acompañante (JuntoAlTitulo) en una sola línea, con el
   mismo gap de 12px que el mockup del editor de plantillas pone entre el h1 y
   su badge de estado. Envuelve en pantallas angostas. */
.cabecera-pagina-titular[b-ur41yvo5i4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
}

.cabecera-pagina-kicker[b-ur41yvo5i4] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* margin 0 a propósito: el navegador da margen propio a <p> y se sumaría al
   gap del contenedor, dejando dos valores para una sola separación.

   DEC 2026-09-09 — ancho de la entradilla: 48rem (~768px con raíz de 16px).
   Los mockups medidos dan 689, 720, 760, 800 y 820px, y en dos casos no fijan
   ninguno: no hay un valor que honrar, así que esto es decisión y no lectura.
   48rem cae dentro de ese rango sin fingir una precisión —742px, 86ch— que
   los mockups no dan.

   Sustituye a un 70ch (~604px) que estuvo aquí unas horas: es buena heurística
   editorial para texto largo, pero la entradilla de una pantalla de gestión no
   es un artículo. Aquí manda la jerarquía de la interfaz, no optimizar una
   columna de lectura prolongada, y 604px se desviaba materialmente por debajo
   de todo lo observado.

   En rem y no en ch para no depender de la métrica de la tipografía.

   NO se crea todavía un token semántico (--content-page-intro-max-width):
   institucionalizarlo con un solo consumidor sería inventar reutilización. Si
   la reconciliación saca dos o tres primitivas más con este mismo concepto, ahí
   sí. */
.cabecera-pagina-descripcion[b-ur41yvo5i4] {
    font: var(--font-body-lg);
    color: var(--color-text-muted);
    max-inline-size: 48rem;
    margin: 0;
}

/* La separación bajo la cabecera la pone .cabecera-pagina; el título no debe
   añadir la suya (base.css da --space-6 a .titulo-pagina y configuracion.css
   --space-4 a .titulo-panel-configuracion). Sin descripción, list-page.css ya
   lo hacía para .titulo-pagina, pero no para el título del panel. */
.cabecera-pagina-texto .titulo-pagina[b-ur41yvo5i4],
.cabecera-pagina-texto .titulo-panel-configuracion[b-ur41yvo5i4] {
    margin-bottom: 0;
}
/* /Components/DesignSystem/CajasFicha.razor.rz.scp.css */
/* .ficha-cols de la maqueta «Páginas 360 nuevas»: un solo flujo de dos columnas, 12 px entre
   columnas y entre cajas. Una caja nunca se parte entre columnas. */
.cajas-ficha[b-g2uqtgn0fg] {
    columns: 2;
    column-gap: var(--space-3);
}

.cajas-ficha-caja[b-g2uqtgn0fg] {
    break-inside: avoid;
    margin: 0 0 var(--space-3);
}

/* Mismo corte que CuerpoConLateral: cuando el lateral baja, las cajas van en una columna. */
@media (max-width: 900px) {
    .cajas-ficha[b-g2uqtgn0fg] {
        columns: 1;
    }
}
/* /Components/DesignSystem/CampoBuscarSelect.razor.rz.scp.css */
.campo-input[b-q0v1wy12jz] {
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.campo-input:focus[b-q0v1wy12jz] {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.campo-input:disabled[b-q0v1wy12jz] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/DesignSystem/CampoSelect.razor.rz.scp.css */
.campo-select[b-egggdmsw0c] {
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.campo-select:focus[b-egggdmsw0c] {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.campo-select:disabled[b-egggdmsw0c] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mismo motivo que .campo-input en CampoTexto.razor.css: evitar el zoom
   automático de iOS al enfocar un campo con font-size < 16px. */
@media (max-width: 767px) {
    .campo-select[b-egggdmsw0c] {
        font-size: 1rem;
    }
}
/* /Components/DesignSystem/CampoSelectAvanzado.razor.rz.scp.css */
.campo-select-avanzado[b-xd8tlgd7me] {
    position: relative;
}

.csa-disparador[b-xd8tlgd7me] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-3) 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.csa-compacto .csa-disparador[b-xd8tlgd7me] {
    min-height: 40px;
}

.csa-disparador:hover:not(:disabled)[b-xd8tlgd7me] {
    border-color: var(--color-primary-500);
}

.csa-disparador:focus-visible[b-xd8tlgd7me],
.csa-abierto .csa-disparador[b-xd8tlgd7me] {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.csa-disparador:disabled[b-xd8tlgd7me] {
    opacity: 0.6;
    cursor: not-allowed;
}

.csa-valor[b-xd8tlgd7me] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csa-marcador[b-xd8tlgd7me] {
    color: var(--color-text-muted);
}

.csa-disparador[b-xd8tlgd7me]  .icono {
    flex: none;
    transition: transform var(--motion-base) var(--ease-fluid);
}

.csa-abierto .csa-disparador[b-xd8tlgd7me]  .icono {
    transform: rotate(180deg);
}

/* Cierra al pulsar fuera, como MenuAcciones: capa transparente a pantalla completa tras el panel. */
.csa-superposicion[b-xd8tlgd7me] {
    position: fixed;
    inset: 0;
    z-index: 1030;
}

/* Sin JS (o sin Popover API) cae aquí: absoluto bajo el disparador. Con JS pasa a la capa superior
   del navegador y el script fija left/top/width/max-height en línea. Los restos de [popover]
   (borde, relleno, margen automático) se pisan a propósito. */
.csa-panel[b-xd8tlgd7me] {
    position: absolute;
    z-index: 1031;
    left: 0;
    right: 0;
    top: calc(100% + var(--space-1));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-overlay);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
    transform-origin: top;
}

.csa-panel[data-lado="arriba"][b-xd8tlgd7me] {
    transform-origin: bottom;
}

@media (prefers-reduced-motion: no-preference) {
    .csa-panel[b-xd8tlgd7me] {
        transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-fluid);

        @starting-style {
            opacity: 0;
            transform: translateY(-6px) scale(0.98);
        }
    }
}

.csa-buscador-caja[b-xd8tlgd7me] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-default);
    color: var(--color-text-muted);
}

.csa-buscador[b-xd8tlgd7me] {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    border: 0;
    background: none;
    color: var(--color-text);
    font: var(--font-body-md);
}

.csa-buscador:focus[b-xd8tlgd7me] {
    outline: none;
    box-shadow: none;
}

.csa-buscador-caja:focus-within[b-xd8tlgd7me] {
    box-shadow: inset 0 -2px 0 var(--color-primary-500);
}

.csa-lista[b-xd8tlgd7me] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 16rem;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    overflow-y: auto;
}

.csa-opcion[b-xd8tlgd7me] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font: var(--font-body-md);
    cursor: pointer;
}

.csa-opcion:hover[b-xd8tlgd7me],
.csa-activa[b-xd8tlgd7me] {
    background-color: var(--color-surface-hover);
}

.csa-elegida[b-xd8tlgd7me] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* Mismos colores que la regla de arriba (la que mide el trinquete de contraste): hover y activa tienen
   más especificidad que .csa-elegida y, sin esto, le quitarían el color a la opción actual. */
.csa-elegida:hover[b-xd8tlgd7me],
.csa-elegida.csa-activa[b-xd8tlgd7me] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.csa-deshabilitada[b-xd8tlgd7me] {
    opacity: 0.5;
    cursor: not-allowed;
}

.csa-texto[b-xd8tlgd7me] {
    flex: 1;
    min-width: 0;
}

.csa-descripcion[b-xd8tlgd7me] {
    display: block;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.csa-elegida .csa-descripcion[b-xd8tlgd7me] {
    color: inherit;
}

.csa-marca[b-xd8tlgd7me] {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-primary-500);
}

.csa-elegida .csa-marca[b-xd8tlgd7me] {
    color: inherit;
}

/* Punto de color: mismos tonos que Badge, nunca decorativo. */
.csa-punto[b-xd8tlgd7me] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
}

.csa-punto-exito[b-xd8tlgd7me] {
    background-color: var(--color-success-700);
}

.csa-punto-advertencia[b-xd8tlgd7me] {
    background-color: var(--color-warning-700);
}

/* Misma regla que .badge-tolerancia: el punto de una opción con TonoBadge.Tolerancia no cae al gris. */
.csa-punto-tolerancia[b-xd8tlgd7me] {
    background-color: var(--color-tolerancia-500);
}

.csa-punto-peligro[b-xd8tlgd7me] {
    background-color: var(--color-danger-500);
}

.csa-punto-info[b-xd8tlgd7me] {
    background-color: var(--color-primary-500);
}

.csa-vacio[b-xd8tlgd7me] {
    margin: 0;
    padding: var(--space-4);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-align: center;
}

/* Anuncio de «N resultados» para lectores de pantalla; no se ve. */
.csa-anuncio[b-xd8tlgd7me] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Mismo motivo que .campo-input: con letra < 16px iOS hace zoom al enfocar. */
@media (max-width: 767px) {
    .csa-disparador[b-xd8tlgd7me],
    .csa-buscador[b-xd8tlgd7me],
    .csa-opcion[b-xd8tlgd7me] {
        font-size: 1rem;
    }

    .csa-opcion[b-xd8tlgd7me] {
        min-height: 44px;
    }
}
/* /Components/DesignSystem/CampoTextarea.razor.rz.scp.css */
.campo-textarea[b-odr2gifjq6] {
    min-height: 96px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    resize: vertical;
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.campo-textarea:focus[b-odr2gifjq6] {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.campo-textarea:disabled[b-odr2gifjq6] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/DesignSystem/CampoTexto.razor.rz.scp.css */
.campo-input[b-frkb28t5pp] {
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.campo-input:focus[b-frkb28t5pp] {
    /* El outline sólido (borde 2px, alto contraste) es el indicador de foco
       accesible; el glow es puramente decorativo, nunca el único indicador. */
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.campo-input:disabled[b-frkb28t5pp] {
    opacity: 0.6;
    cursor: not-allowed;
}

.campo-input-error[b-frkb28t5pp] {
    border-color: var(--color-danger-500);
}

/* iOS hace zoom automático al enfocar un input con font-size < 16px — el
   14px de --font-body-md es ilegible como motivo para forzar zoom en cada
   campo del formulario en un iPhone. Solo el tamaño de fuente, nada más
   cambia (min-height ya era 48px). */
@media (max-width: 767px) {
    .campo-input[b-frkb28t5pp] {
        font-size: 1rem;
    }
}
/* /Components/DesignSystem/CuerpoConLateral.razor.rz.scp.css */
/* Las medidas del cuerpo de Centro 360 (su antigua .centro360-cuerpo, que ya usa esta pieza) y del mockup. */
.cuerpo-con-lateral[b-mikbfr8ip5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
    align-items: start;
}

.cuerpo-con-lateral-sin-lateral[b-mikbfr8ip5] {
    grid-template-columns: minmax(0, 1fr);
}

.cuerpo-con-lateral-principal[b-mikbfr8ip5] {
    min-width: 0;
}

.cuerpo-con-lateral-lateral[b-mikbfr8ip5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-6);
}

@media (max-width: 900px) {
    .cuerpo-con-lateral[b-mikbfr8ip5] {
        grid-template-columns: 1fr;
    }

    .cuerpo-con-lateral-lateral[b-mikbfr8ip5] {
        position: static;
    }
}
/* /Components/DesignSystem/DatoRejilla.razor.rz.scp.css */
/* .celda-info de los mockups Cliente 360 / Empresa 360. */
.dato-rejilla[b-xm8mtkz9rd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dato-rejilla-ancho[b-xm8mtkz9rd] {
    grid-column: 1 / -1;
}

.dato-rejilla-etiqueta[b-xm8mtkz9rd] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* flex: el valor puede llevar un BotonCopiar o un badge al lado. */
.dato-rejilla-valor[b-xm8mtkz9rd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.dato-rejilla-vacio[b-xm8mtkz9rd] {
    font-weight: 400;
    color: var(--color-text-muted);
}
/* /Components/DesignSystem/Drawer.razor.rz.scp.css */
.drawer-superposicion[b-e32s909oz3] {
    position: fixed;
    inset: 0;
    background-color: var(--color-scrim);
    display: flex;
    justify-content: flex-end;
    /* Por debajo de Modal (1050): un Drawer que abre un Modal de confirmación
       encima (p. ej. eliminar desde el drawer de edición) debe quedar
       tapado, no competir en el mismo plano — ver especificación de stacking
       del patrón de modales/drawers. */
    z-index: 1040;
}

/* El panel ya entra con su propia animación; el velo funde con @starting-style. */
@media (prefers-reduced-motion: no-preference) {
    .drawer-superposicion[b-e32s909oz3] {
        transition: opacity var(--motion-transition) var(--ease-fluid);

        @starting-style {
            opacity: 0;
        }
    }
}

/* Nivel Overlay (06 § 3). */
.drawer-panel[b-e32s909oz3] {
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    width: 100%;
    max-width: 420px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    animation: entrar-desde-derecha-b-e32s909oz3 var(--motion-transition) var(--ease-fluid);
}

@keyframes entrar-desde-derecha-b-e32s909oz3 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* prefers-reduced-motion desactiva Tier B SIEMPRE (DDL-020, 07 § 4). Faltaba:
   era la unica entrada de overlay del sistema que seguia animandose. */
@media (prefers-reduced-motion: reduce) {
    .drawer-panel[b-e32s909oz3] {
        animation: none;
    }
}

.drawer-header[b-e32s909oz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: var(--border-default);
}

.drawer-header h2[b-e32s909oz3] {
    font: var(--font-heading-md);
}

.drawer-cerrar[b-e32s909oz3] {
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.drawer-cerrar:hover[b-e32s909oz3] {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}

.drawer-cerrar:active[b-e32s909oz3] {
    transform: scale(0.9);
}

.drawer-aviso[b-e32s909oz3] {
    padding: var(--space-4) var(--space-5) 0;
}

.drawer-aviso:empty[b-e32s909oz3] {
    display: none;
}

.drawer-cuerpo[b-e32s909oz3] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.drawer-pie[b-e32s909oz3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
}

/* Mismo criterio que .modal-pie en Modal.razor.css: en móvil los botones
   del pie (acción principal + "Cancelar", en ese orden en el marcado de
   cada página) ocupan todo el ancho y se apilan en vez de compartir fila. */
@media (max-width: 640px) {
    .drawer-pie[b-e32s909oz3] {
        flex-direction: column;
    }

    .drawer-pie .boton[b-e32s909oz3] {
        width: 100%;
    }
}

/* Ficha 16: desenfoque ligero tras el velo, detrás de @supports y bajo el token
   --scrim-filtro (tokens.css; "none" lo apaga). Con transparencia o movimiento
   reducidos, el velo vuelve a ser un color plano. */
@supports (backdrop-filter: blur(1px)) {
    .drawer-superposicion[b-e32s909oz3] {
        backdrop-filter: var(--scrim-filtro);
    }

    @media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
        .drawer-superposicion[b-e32s909oz3] {
            backdrop-filter: none;
        }
    }
}
/* /Components/DesignSystem/DrawerFormulario.razor.rz.scp.css */
/* El envoltorio solo existe para que el foco al primer error tenga un contenedor al que preguntar: no es una caja. */
.formulario-drawer-contenido[b-o1fxvlskvt] {
    display: contents;
}

/* El fieldset solo existe para deshabilitar de una vez las acciones extra mientras se guarda: no es una caja. */
.formulario-drawer-pie-extra[b-o1fxvlskvt] {
    display: contents;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* /Components/DesignSystem/ElementoListaLateral.razor.rz.scp.css */
/* Las medidas de la antigua .centro360-lista-canales li de Centro 360 y sus dos clases de línea. */
.elemento-lista-lateral[b-240flm2ahl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-3);
    border-top: var(--border-default);
}

.elemento-lista-lateral:first-child[b-240flm2ahl] {
    padding-top: 0;
    border-top: none;
}

.elemento-lista-lateral-etiqueta[b-240flm2ahl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label-md);
    color: var(--color-text);
}

.elemento-lista-lateral-detalles[b-240flm2ahl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Cada hijo directo, una línea: lo declara la página, así que va con ::deep. */
.elemento-lista-lateral-detalles[b-240flm2ahl]  > * {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Components/DesignSystem/Esqueleto.razor.rz.scp.css */
/* Mismo criterio que EstadoCargando: ocupa su sitio desde el primer momento (sin salto) pero es transparente hasta pasados
   200 ms, y el brillo se apaga con prefers-reduced-motion (aparecer con opacidad no es movimiento). Colores: los tokens
   propios por tema --color-esqueleto-base y -brillo (revisión de Design, 2026-10-17, §O): los neutros que se usaban antes no
   cambian de tema y en oscuro daban un esqueleto gris claro sobre la tarjeta oscura. Sin texto encima. */
.esqueleto[b-lnkrk9tb1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: esqueleto-aparece-b-lnkrk9tb1c 0s linear 200ms both;
}

.esqueleto-metricas[b-lnkrk9tb1c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
}

@keyframes esqueleto-aparece-b-lnkrk9tb1c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.esqueleto-bloque[b-lnkrk9tb1c] {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-esqueleto-base) 25%, var(--color-esqueleto-brillo) 37%, var(--color-esqueleto-base) 63%);
    background-size: 400% 100%;
    animation: esqueleto-brillo-b-lnkrk9tb1c 1.4s var(--ease-fluid) infinite;
}

@keyframes esqueleto-brillo-b-lnkrk9tb1c {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.esqueleto-fila-lista[b-lnkrk9tb1c],
.esqueleto-fila-tabla[b-lnkrk9tb1c],
.esqueleto-tarjeta[b-lnkrk9tb1c] {
    padding: var(--space-3);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.esqueleto-fila-lista[b-lnkrk9tb1c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.esqueleto-redondo[b-lnkrk9tb1c] {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
}

.esqueleto-textos[b-lnkrk9tb1c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.esqueleto-linea-titulo[b-lnkrk9tb1c] {
    height: 12px;
    width: 40%;
}

.esqueleto-linea-detalle[b-lnkrk9tb1c] {
    height: 10px;
    width: 65%;
}

.esqueleto-fila-tabla[b-lnkrk9tb1c] {
    display: grid;
    grid-template-columns: repeat(var(--esqueleto-columnas, 4), minmax(0, 1fr));
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.esqueleto-celda[b-lnkrk9tb1c] {
    height: 12px;
}

.esqueleto-tarjeta[b-lnkrk9tb1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.esqueleto-cifra[b-lnkrk9tb1c] {
    height: 28px;
    width: 45%;
}

@media (prefers-reduced-motion: reduce) {
    .esqueleto-bloque[b-lnkrk9tb1c] {
        animation: none;
    }
}
/* /Components/DesignSystem/EstadoCargando.razor.rz.scp.css */
/* Una carga que termina en menos de ~200 ms no debe enseñar nada: un esqueleto
   que aparece y desaparece en un fotograma se lee como un fallo, no como una
   espera. Ocupa su sitio desde el primer momento (sin salto de maquetación)
   pero es transparente hasta pasado el retardo; si el contenido llega antes,
   se retira sin haberse llegado a ver. Es solo CSS: el retardo corre en el
   navegador y no depende del circuito Blazor. `prefers-reduced-motion` apaga
   el brillo, no el retardo: aparecer con un cambio de opacidad no es movimiento. */
.esqueleto-lista[b-21mdhtyl2z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: esqueleto-aparece-b-21mdhtyl2z 0s linear 200ms both;
}

@keyframes esqueleto-aparece-b-21mdhtyl2z {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.esqueleto-fila[b-21mdhtyl2z] {
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--color-esqueleto-base) 25%,
        var(--color-esqueleto-brillo) 37%,
        var(--color-esqueleto-base) 63%
    );
    background-size: 400% 100%;
    animation: brillo-b-21mdhtyl2z 1.4s ease infinite;
}

@keyframes brillo-b-21mdhtyl2z {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esqueleto-fila[b-21mdhtyl2z] {
        animation: none;
    }
}
/* /Components/DesignSystem/EstadoFila.razor.rz.scp.css */
.estado-fila[b-qkxrz403h7] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

/* Lo correcto: sin pastilla. Mide lo mismo de alto que una (24px) para que la fila no baile entre estados. */
.estado-fila-correcto[b-qkxrz403h7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    white-space: nowrap;
}

.estado-fila-punto[b-qkxrz403h7] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    color: var(--color-success-700);
    background-color: currentColor;
}

.estado-fila-motivo[b-qkxrz403h7] {
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
  Un motivo que lleva una ventana de contexto no recorta: el panel de la ventana sale de la caja y, recortado,
  no se vería. Quien lo pone (p. ej. MotivoIncidenciasDocumentales) recorta entonces el texto de su disparador,
  para que la línea siga sin ensanchar la columna.
*/
.estado-fila-motivo:has(.ventana-contexto)[b-qkxrz403h7] {
    overflow: visible;
}
/* /Components/DesignSystem/EstadoVacio.razor.rz.scp.css */
.estado-vacio[b-h4h3wrmbll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-muted);
}

.estado-vacio-icono[b-h4h3wrmbll] {
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
    color: var(--color-neutral-300);
}

/* El hueco se dimensionaba con font-size porque su contenido era texto. Ahora
   lleva un svg, que no escala con la tipografía: se le da tamaño explícito.
   ::deep porque lo renderiza <Icono>, un componente hijo sin este scope. */
.estado-vacio-icono[b-h4h3wrmbll]  .icono {
    width: 40px;
    height: 40px;
}

/* Círculo de acento (AcentoIcono/FondoIcono) — icono de estado de severidad
   (error, aviso, bloqueo) en vez del icono gris genérico. Ver Estados Sistema
   TALVEG.dc.html: mismo círculo de 56px para Error/404/Acceso denegado. */
.estado-vacio-icono-acento[b-h4h3wrmbll] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    border: 1px solid var(--estado-vacio-acento);
    background: var(--estado-vacio-fondo-icono);
    color: var(--estado-vacio-acento);
    display: flex;
    align-items: center;
    justify-content: center;
}

.estado-vacio-icono-acento[b-h4h3wrmbll]  .icono {
    width: 24px;
    height: 24px;
}

.estado-vacio h3[b-h4h3wrmbll] {
    font: var(--font-heading-md);
    color: var(--color-text);
}

.estado-vacio-accion[b-h4h3wrmbll] {
    margin-top: var(--space-4);
}

/* Acabado (ficha 12): el estado vacío entra con un fundido y un leve ascenso, y
   su icono genérico respira muy despacio —tenue, solo opacidad y desplazamiento,
   que no provocan repintado—. Vive aquí, en el componente compartido, y llega a
   todos sus usos de una vez. El icono de severidad (AcentoIcono: error, aviso,
   bloqueo) no respira: un estado de error que late parece vivo, no roto. */
.estado-vacio[b-h4h3wrmbll] {
    animation: entrar-estado-vacio-b-h4h3wrmbll var(--motion-transition) var(--ease-fluid) backwards;
}

.estado-vacio-icono:not(.estado-vacio-icono-acento)[b-h4h3wrmbll] {
    animation: respirar-estado-vacio-b-h4h3wrmbll calc(var(--motion-live-cycle) * 1.5) ease-in-out infinite;
}

@keyframes entrar-estado-vacio-b-h4h3wrmbll {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes respirar-estado-vacio-b-h4h3wrmbll {
    50% {
        opacity: 0.55;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .estado-vacio[b-h4h3wrmbll],
    .estado-vacio-icono:not(.estado-vacio-icono-acento)[b-h4h3wrmbll] {
        animation: none;
    }
}
/* /Components/DesignSystem/FilaRelacion.razor.rz.scp.css */
/* .fila-rel y compañía, de los mockups Cliente 360 / Empresa 360. */
.fila-relacion[b-lmwr44pkwl] {
    min-height: 48px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-top: var(--border-default);
    transition: background-color 120ms;
}

.fila-relacion:first-child[b-lmwr44pkwl] {
    border-top: none;
}

/*
  Toda fila responde al cursor, también la que no lleva tinte (defecto del
  2026-10-09: solo reaccionaba la fila con problema). Va ANTES de las reglas
  del tinte a propósito: con la misma especificidad, el color del tinte gana
  al pasar el cursor y la fila con problema conserva su receta.

  Con el cursor dentro del bloque desplegado responde la subfila, no la fila
  que lo contiene. La exclusión va en :where() para que no sume especificidad
  y el tinte siga ganando.
*/
.fila-relacion:hover:where(:not(:has(.fila-relacion-desplegado:hover)))[b-lmwr44pkwl] {
    background-color: var(--color-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .fila-relacion[b-lmwr44pkwl] {
        transition: none;
    }
}

.fila-relacion-icono[b-lmwr44pkwl] {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

/* .fila-rel-avatar del mockup de Empresa 360 (fila de trabajador). */
.fila-relacion-avatar[b-lmwr44pkwl] {
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-default);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Identidad: desplegar + casilla + nombre y detalle. En flex ocupa lo que
   deja la columna derecha; en rejilla es la primera columna. */
.fila-relacion-identidad[b-lmwr44pkwl] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fila-relacion-casilla[b-lmwr44pkwl] {
    flex: none;
    display: flex;
    align-items: center;
}

.fila-relacion-texto[b-lmwr44pkwl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fila-relacion-nombre[b-lmwr44pkwl] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nombre-botón (OnNombre): el mismo aspecto que el nombre-enlace. */
.fila-relacion-nombre-boton[b-lmwr44pkwl] {
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

a.fila-relacion-nombre:hover[b-lmwr44pkwl],
.fila-relacion-nombre-boton:hover[b-lmwr44pkwl] {
    color: var(--color-primary-500);
    text-decoration: underline;
}

a.fila-relacion-nombre:focus-visible[b-lmwr44pkwl],
.fila-relacion-nombre-boton:focus-visible[b-lmwr44pkwl] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.fila-relacion-detalle[b-lmwr44pkwl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.fila-relacion-derecha[b-lmwr44pkwl] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/*
  Rejilla única de fila de las páginas 360 del 2026-10-08:
  identidad | cifra | estado | acción. Las tres últimas columnas tienen ancho
  fijo y la pastilla empieza siempre a la izquierda de la suya.
*/
.fila-relacion-rejilla[b-lmwr44pkwl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 152px 128px;
    align-items: center;
    min-height: 50px;
    /* El resaltado y el tinte sobresalen del contenido de la tarjeta lo que
       mide este relleno lateral, en TODAS las filas: así el texto no cambia
       de columna entre una fila teñida y una sin teñir. */
    margin-inline: calc(-1 * var(--space-3));
    padding: 10px var(--space-3);
    border-top: 1px solid var(--color-fila-divisor);
}

.fila-relacion-rejilla:first-child[b-lmwr44pkwl] {
    border-top: none;
}

.fila-relacion-cifra[b-lmwr44pkwl] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.fila-relacion-estado[b-lmwr44pkwl] {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.fila-relacion-acciones[b-lmwr44pkwl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/*
  Fila con problema: ÚNICO sitio donde se define. El tinte lleva encima una
  capa en degradado que lo funde con la superficie hacia la derecha; al pasar
  el cursor la capa se desplaza y la fila queda teñida entera.

  La fila teñida conserva su línea divisoria y no redondea las esquinas: dos
  filas con problema seguidas tienen que leerse como dos elementos, no como
  una sola franja de color (defecto del 2026-10-09). Lo fija
  FilaConProblemaConservaDivisorTests.
*/
.fila-relacion[data-tono][b-lmwr44pkwl] {
    background-image: linear-gradient(90deg, transparent 0, transparent 50%, var(--color-surface) 87.5%, var(--color-surface) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fila-relacion[data-tono="peligro"][b-lmwr44pkwl] {
    background-color: var(--color-danger-50);
}

.fila-relacion[data-tono="advertencia"][b-lmwr44pkwl] {
    background-color: var(--color-warning-50);
}

.fila-relacion[data-tono]:hover[b-lmwr44pkwl] {
    background-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .fila-relacion[data-tono][b-lmwr44pkwl] {
        transition: none;
    }
}

.fila-relacion-desplegar[b-lmwr44pkwl] {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: transform 150ms ease;
}

.fila-relacion-desplegar[aria-expanded="true"][b-lmwr44pkwl] {
    transform: rotate(90deg);
}

.fila-relacion-desplegar:hover[b-lmwr44pkwl] {
    color: var(--color-text);
}

.fila-relacion-desplegar:focus-visible[b-lmwr44pkwl] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .fila-relacion-desplegar[b-lmwr44pkwl] {
        transition: none;
    }
}

/* Bloque desplegado bajo la fila: a todo el ancho, con la sangría que deja
   el botón de desplegar más su separación (22 + 12). */
.fila-relacion-desplegado[b-lmwr44pkwl] {
    flex-basis: 100%;
    grid-column: 1 / -1;
    padding: var(--space-2) var(--space-3) var(--space-2) 34px;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

/* Pantalla estrecha: las tres columnas fijas (384 px) dejarían la identidad
   sin sitio. El nombre pasa a ocupar su propia línea y debajo van cifra,
   estado y acciones. */
@media (max-width: 767px) {
    .fila-relacion-rejilla[b-lmwr44pkwl] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .fila-relacion-rejilla > .fila-relacion-identidad[b-lmwr44pkwl] {
        grid-column: 1 / -1;
    }
}
/* /Components/DesignSystem/FiltroEstadosMultiple.razor.rz.scp.css */
.filtro-estados[b-hoaud90ovx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 var(--space-2);
}

.filtro-estados-opcion[b-hoaud90ovx] {
    height: 30px;
    padding: var(--space-1) 11px;
    border: var(--border-default);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
    cursor: pointer;
}

.filtro-estados-opcion b[b-hoaud90ovx] {
    color: var(--color-text);
}

.filtro-estados-opcion[aria-pressed="true"][b-hoaud90ovx] {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
    font-weight: 600;
    color: var(--color-primary-700);
}

.filtro-estados-opcion:focus-visible[b-hoaud90ovx] {
    outline: var(--border-focus);
    outline-offset: 1px;
}
/* /Components/DesignSystem/FranjaEstado.razor.rz.scp.css */
/* Franja de estado de un listado. Botones rectangulares (no pastillas: las pastillas son los filtros de
   contexto de la barra) con un punto del color del estado, la cifra y el nombre. */
.franja-estado[b-6oy4ou54ad] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.franja-estado-boton[b-6oy4ou54ad] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    min-height: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    white-space: nowrap;
    cursor: pointer;
}

.franja-estado-boton:hover[b-6oy4ou54ad] {
    background-color: var(--color-fila-hover);
}

.franja-estado-boton:focus-visible[b-6oy4ou54ad] {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
}

.franja-estado-recuento[b-6oy4ou54ad] {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Marcado: acento primario (fondo --color-primary-50, texto y borde --color-primary-700). */
.franja-estado-boton[aria-pressed="true"][b-6oy4ou54ad] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-700);
    color: var(--color-primary-700);
    font-weight: 600;
}

.franja-estado-boton[aria-pressed="true"] .franja-estado-recuento[b-6oy4ou54ad] {
    color: inherit;
}

/* Sin filas en ese estado: sigue pulsable (se puede desmarcar), pero cede protagonismo. */
.franja-estado-boton-vacio:not([aria-pressed="true"])[b-6oy4ou54ad] {
    opacity: 0.6;
}

.franja-estado-punto[b-6oy4ou54ad] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    background-color: currentColor;
}

.franja-estado-punto-peligro[b-6oy4ou54ad] {
    color: var(--color-danger-700);
}

.franja-estado-punto-advertencia[b-6oy4ou54ad] {
    color: var(--color-warning-700);
}

.franja-estado-punto-tolerancia[b-6oy4ou54ad] {
    color: var(--color-tolerancia-700);
}

.franja-estado-punto-exito[b-6oy4ou54ad] {
    color: var(--color-success-700);
}

.franja-estado-punto-info[b-6oy4ou54ad] {
    color: var(--color-info-500);
}

.franja-campo-lista[b-6oy4ou54ad] { display: flex; flex: 1 1 160px; min-width: 0; flex-direction: column; gap: var(--space-1); }
.franja-campo-etiqueta[b-6oy4ou54ad] { font: var(--font-caption); color: var(--color-text); }
.franja-campo-desplegable[b-6oy4ou54ad] { position: relative; }
.franja-campo-desplegable summary[b-6oy4ou54ad] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--space-10); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; list-style: none; }
.franja-campo-desplegable summary[b-6oy4ou54ad]::-webkit-details-marker { display: none; }
.franja-campo-desplegable summary:focus-visible[b-6oy4ou54ad] { outline: var(--border-focus); }
.franja-campo-panel[b-6oy4ou54ad] { position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(360px, 85vw); z-index: 20; padding: var(--space-2); background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-sm); }
.franja-campo-panel .franja-estado[b-6oy4ou54ad] { flex-direction: column; align-items: stretch; margin: 0; }
/* /Components/DesignSystem/Icono.razor.rz.scp.css */
.icono[b-wn2m1dwdh3] {
    flex-shrink: 0;
    display: block;
}

.icono-pequeno[b-wn2m1dwdh3] {
    width: 16px;
    height: 16px;
}

.icono-medio[b-wn2m1dwdh3] {
    width: 20px;
    height: 20px;
}

.icono-grande[b-wn2m1dwdh3] {
    width: 24px;
    height: 24px;
}

/*
    Microanimaciones al pasar el ratón o enfocar el control que contiene el
    icono (botón, enlace o NavLink). Solo CSS y solo transform/stroke: el
    glifo, el trazo de 1,75 px y el tamaño no cambian. Se disparan desde el
    control y no desde el icono, que es aria-hidden y no recibe foco.
    La campana suena (cuerpo y badajo), el check se dibuja y el aro del
    círculo late una vez. Reposo = estado sin animar, así que con
    prefers-reduced-motion todo queda como siempre.
*/
.icono .ic-campana-cuerpo[b-wn2m1dwdh3],
.icono .ic-campana-badajo[b-wn2m1dwdh3],
.icono .ic-aro[b-wn2m1dwdh3] {
    transform-box: fill-box;
}

.icono .ic-campana-cuerpo[b-wn2m1dwdh3] {
    transform-origin: 50% 0;
}

.icono .ic-campana-badajo[b-wn2m1dwdh3] {
    transform-origin: 50% 0;
}

.icono .ic-aro[b-wn2m1dwdh3] {
    transform-origin: center;
}

.icono .ic-trazo[b-wn2m1dwdh3] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

:is(button, a):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .icono .ic-campana-cuerpo[b-wn2m1dwdh3] {
    animation: icono-campana-suena-b-wn2m1dwdh3 var(--motion-transition) var(--ease-standard);
}

:is(button, a):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .icono .ic-campana-badajo[b-wn2m1dwdh3] {
    animation: icono-campana-badajo-b-wn2m1dwdh3 var(--motion-transition) var(--ease-standard);
}

:is(button, a):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .icono .ic-trazo[b-wn2m1dwdh3] {
    animation: icono-trazo-dibuja-b-wn2m1dwdh3 var(--motion-transition) var(--ease-fluid);
}

:is(button, a):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .icono .ic-aro[b-wn2m1dwdh3] {
    animation: icono-aro-pulso-b-wn2m1dwdh3 var(--motion-transition) var(--ease-fluid);
}

@keyframes icono-campana-suena-b-wn2m1dwdh3 {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    35% { transform: rotate(-12deg); }
    55% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}

@keyframes icono-campana-badajo-b-wn2m1dwdh3 {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-1px); }
    60% { transform: translateX(1px); }
}

@keyframes icono-trazo-dibuja-b-wn2m1dwdh3 {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes icono-aro-pulso-b-wn2m1dwdh3 {
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .icono .ic-campana-cuerpo[b-wn2m1dwdh3],
    .icono .ic-campana-badajo[b-wn2m1dwdh3],
    .icono .ic-trazo[b-wn2m1dwdh3],
    .icono .ic-aro[b-wn2m1dwdh3] {
        animation: none !important;
    }
}
/* /Components/DesignSystem/IndicadorPasos.razor.rz.scp.css */
.indicador-pasos[b-jg3o6ey7za] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
}

.indicador-pasos-item[b-jg3o6ey7za] {
    display: flex;
    align-items: center;
    flex: 1;
}

.indicador-pasos-item:not(:last-child)[b-jg3o6ey7za]::after {
    content: "";
    flex: 1;
    height: 2px;
    margin: 0 var(--space-2);
    background: var(--color-border);
}

.indicador-pasos-item.indicador-pasos-completado:not(:last-child)[b-jg3o6ey7za]::after {
    background: var(--color-primario-fondo);
}

.indicador-pasos-boton[b-jg3o6ey7za] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    cursor: default;
    white-space: nowrap;
}

button.indicador-pasos-boton[b-jg3o6ey7za] {
    cursor: pointer;
}

button.indicador-pasos-boton:hover .indicador-pasos-circulo[b-jg3o6ey7za] {
    border-color: var(--color-primary-500);
}

button.indicador-pasos-boton:focus-visible[b-jg3o6ey7za] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.indicador-pasos-circulo[b-jg3o6ey7za] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    font: var(--font-body-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.indicador-pasos-activo .indicador-pasos-circulo[b-jg3o6ey7za] {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.indicador-pasos-completado .indicador-pasos-circulo[b-jg3o6ey7za] {
    border-color: var(--color-primario-fondo);
    background: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.indicador-pasos-activo .indicador-pasos-titulo[b-jg3o6ey7za] {
    color: var(--color-text);
    font-weight: 600;
}

.indicador-pasos-completado .indicador-pasos-titulo[b-jg3o6ey7za] {
    color: var(--color-text);
}

@media (max-width: 640px) {
    .indicador-pasos-titulo[b-jg3o6ey7za] {
        display: none;
    }
}
/* /Components/DesignSystem/LeyendaAtajosLista.razor.rz.scp.css */
.leyenda-atajos-lista[b-qx0s76bx5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-3) 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.leyenda-atajos-lista-entrada[b-qx0s76bx5z] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

/* El punto medio separa entradas; es decoración: el lector de pantalla ya anuncia cada elemento de la lista. */
.leyenda-atajos-lista-entrada + .leyenda-atajos-lista-entrada[b-qx0s76bx5z]::before {
    content: "·";
    margin-right: var(--space-1);
}

.leyenda-atajos-lista-entrada kbd[b-qx0s76bx5z] {
    display: inline-block;
    min-width: 1.25em;
    padding: 0 var(--space-1);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font: var(--font-body-sm);
    text-align: center;
}

/* Sin teclado que la use: en pantallas táctiles o estrechas la leyenda sobra (mismo corte que Boton). */
@media (max-width: 767px), (pointer: coarse) {
    .leyenda-atajos-lista[b-qx0s76bx5z] {
        display: none;
    }
}
/* /Components/DesignSystem/LimiteDeErrores.razor.rz.scp.css */
/* Aviso compacto de un islote interactivo (P1-E1c): cabe en la cabecera junto a los
   selectores. *-700 sobre *-50, como el semáforo de Badge, por contraste WCAG AA. */
.limite-errores-compacto[b-7k6ek92m67] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    font: var(--font-label-md);
    font-size: 0.75rem;
    line-height: 1.25rem;
    white-space: nowrap;
}
/* /Components/DesignSystem/ListaLateral.razor.rz.scp.css */
.lista-lateral[b-rfxd3r91l8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* /Components/DesignSystem/ListaRelaciones.razor.rz.scp.css */
.lista-relaciones[b-h16n9i00om] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

/* .tarjeta.lista de los mockups «… 360 página»: la tarjeta es la caja y la
   lista va dentro sin borde propio. Sin sombra: sombra solo en Overlay. */
.lista-relaciones-tarjeta[b-h16n9i00om] {
    min-width: 0;
    padding: 6px 18px var(--space-2);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* Sin overflow: hidden, que recortaría el tinte de la fila con problema. */
.lista-relaciones-sin-caja[b-h16n9i00om] {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
}

.lista-relaciones-encabezado[b-h16n9i00om] {
    margin: 2px 0 var(--space-1);
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}

.lista-relaciones-pie[b-h16n9i00om] {
    margin: var(--space-2) 0 0;
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}
/* /Components/DesignSystem/MarcaProcedencia.razor.rz.scp.css */
/*
    Marca no textual: cuadrado pequeño con tinte de sistema. El indicador usa
    --color-system-text (5,38:1 sobre Surface) y no --color-system-indicator,
    porque aquí el icono hace de glifo legible, no de punto de estado.
*/
.marca-procedencia-icono[b-firnyebzwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1875rem;
    height: 1.1875rem;
    flex-shrink: 0;

    color: var(--color-system-text);
    background-color: var(--color-system-tint);
    border-radius: var(--radius-sm);
}
/* /Components/DesignSystem/MenuAcciones.razor.rz.scp.css */
.menu-acciones[b-bltny66uqc] {
    position: relative;
    display: inline-block;
}

.menu-acciones-disparador[b-bltny66uqc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
}

.menu-acciones-disparador:hover[b-bltny66uqc] {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* Disparador con texto («Más ▾» de la cabecera de lista): botón secundario. */
.menu-acciones-disparador-texto[b-bltny66uqc] {
    gap: var(--space-1);
    border: var(--border-default);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label-md);
}

.menu-acciones-disparador:focus-visible[b-bltny66uqc] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Pastilla de filtro (BarraFiltros con pastillas): «Gestor CAE ▾», «Estado: Con vencidos ▾». */
.menu-acciones-disparador-pastilla[b-bltny66uqc] {
    border-radius: var(--radius-full);
    font: var(--font-body-sm);
    white-space: nowrap;
}

/* Filtro aplicado: misma señal que la fila con foco de teclado (primario suave con borde primario). */
.menu-acciones-disparador-activa[b-bltny66uqc] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-500);
    color: var(--color-text);
    font-weight: 600;
}

/* «⋯» de la cabecera de listado: botón cuadrado con borde, a la altura de sus vecinos. */
.menu-acciones-disparador-borde[b-bltny66uqc] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.menu-acciones-superposicion[b-bltny66uqc] {
    position: fixed;
    inset: 0;
    z-index: 1030;
}

.menu-acciones-panel[b-bltny66uqc] {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1031;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    background-color: var(--color-overlay);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-2);
}

/* Los ítems son <ItemMenuAccion>, un componente hijo declarado por la página, no
   por MenuAcciones: el identificador de CSS aislado de este fichero no llega a su
   <button>, y sin ::deep los ítems se pintaban con el estilo nativo del navegador. */
@media (prefers-reduced-motion: no-preference) {
    .menu-acciones-panel[b-bltny66uqc] {
        transition: opacity var(--motion-transition) var(--ease-fluid), transform var(--motion-transition) var(--ease-fluid);

        @starting-style {
            opacity: 0;
            transform: translateY(-8px);
        }
    }
}

.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    font: var(--font-body-sm);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    white-space: nowrap;
}

.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item:hover {
    background-color: var(--color-surface-hover);
}

/* Pastilla: el panel cae bajo la pastilla, no hacia la izquierda (la primera se saldría de la pantalla). */
.menu-acciones-panel-izquierda[b-bltny66uqc] {
    left: 0;
    right: auto;
}

/* Ítem enlace (Href): mismo aspecto que un ítem botón. */
.menu-acciones-panel[b-bltny66uqc]  a.menu-acciones-item {
    display: block;
    text-decoration: none;
}

/* Opción vigente de una pastilla de filtro (menuitemradio con aria-checked). */
.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item-marcado {
    font-weight: 600;
}

/* La marca es decorativa: aria-checked ya dice cuál es la vigente. Con el texto alternativo
   vacío («/ ""») no entra en el nombre accesible, que si no sería «✓ Todos» en vez de «Todos».
   La primera declaración es la reserva para un navegador sin esa sintaxis. */
.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item-marcado::before {
    content: "✓ ";
    content: "✓ " / "";
}

.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item-destructivo {
    color: var(--color-danger-700);
}

/* Acción destructiva (D-29): separada de las demás con una línea, para que no
   cuelgue del mismo grupo y no se pulse por error al apuntar a la de al lado. */
.menu-acciones-panel[b-bltny66uqc]  .menu-acciones-item:not(.menu-acciones-item-destructivo) + .menu-acciones-item-destructivo {
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-top: var(--space-1);
    padding-top: var(--space-3);
}
/* /Components/DesignSystem/Modal.razor.rz.scp.css */
.modal-superposicion[b-arz02y8adg] {
    position: fixed;
    inset: 0;
    background-color: var(--color-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-4);
}

/* Nivel Overlay (06 § 3): flota sobre el contenido con relación espacial
   real, y por eso es de los pocos sitios donde la sombra está permitida. */
.modal-contenido[b-arz02y8adg] {
    background-color: var(--color-overlay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Entrada sin JS: el modal solo existe en el DOM mientras está abierto, así que
   @starting-style da el estado de partida de la transición (Tier B, 07 § 4).
   Anulada con prefers-reduced-motion: reduce al no declarar la transición. */
@media (prefers-reduced-motion: no-preference) {
    .modal-superposicion[b-arz02y8adg] {
        transition: opacity var(--motion-transition) var(--ease-fluid);

        @starting-style {
            opacity: 0;
        }
    }

    .modal-contenido[b-arz02y8adg] {
        transition: opacity var(--motion-transition) var(--ease-fluid), transform var(--motion-transition) var(--ease-fluid);

        @starting-style {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}

.modal-contenido-pequeno[b-arz02y8adg] {
    max-width: 420px;
}

.modal-contenido-mediano[b-arz02y8adg] {
    max-width: 520px;
}

.modal-contenido-grande[b-arz02y8adg] {
    max-width: 720px;
}

.modal-header[b-arz02y8adg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: var(--border-default);
}

.modal-header h2[b-arz02y8adg] {
    font: var(--font-heading-md);
}

.modal-titulos[b-arz02y8adg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modal-titulos h2[b-arz02y8adg] {
    margin: 0;
}

.modal-sobretitulo[b-arz02y8adg] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal-subtitulo[b-arz02y8adg] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.modal-cerrar[b-arz02y8adg] {
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.modal-cerrar:hover[b-arz02y8adg] {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}

.modal-cerrar:active[b-arz02y8adg] {
    transform: scale(0.9);
}

.modal-cuerpo[b-arz02y8adg] {
    padding: var(--space-5);
    overflow-y: auto;
}

.modal-pie[b-arz02y8adg] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
}

/*
  Móvil: los botones del pie (normalmente acción principal + "Cancelar", en
  ese orden en el marcado de cada página) pasan a ocupar todo el ancho y
  apilarse en vez de compartir la fila — más fácil de alcanzar con el
  pulgar, y evita que dos botones lado a lado queden demasiado angostos
  para tocar con precisión.
*/
@media (max-width: 640px) {
    .modal-pie[b-arz02y8adg] {
        flex-direction: column;
    }

    .modal-pie .boton[b-arz02y8adg] {
        width: 100%;
    }
}

/* Aviso del formulario (ModalFormulario): fuera del cuerpo desplazable, como .drawer-aviso. */
.modal-aviso[b-arz02y8adg] {
    padding: var(--space-4) var(--space-5) 0;
}

.modal-aviso:empty[b-arz02y8adg] {
    display: none;
}

/* Ficha 16: desenfoque ligero tras el velo, detrás de @supports y bajo el token
   --scrim-filtro (tokens.css; "none" lo apaga). Con transparencia o movimiento
   reducidos, el velo vuelve a ser un color plano. */
@supports (backdrop-filter: blur(1px)) {
    .modal-superposicion[b-arz02y8adg] {
        backdrop-filter: var(--scrim-filtro);
    }

    @media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
        .modal-superposicion[b-arz02y8adg] {
            backdrop-filter: none;
        }
    }
}
/* /Components/DesignSystem/ModalFormulario.razor.rz.scp.css */
/* El envoltorio solo existe para que el foco al primer error tenga un contenedor al que preguntar: no es una caja. */
.formulario-modal-contenido[b-36vtnl2psw] {
    display: contents;
}

/* El fieldset solo existe para deshabilitar de una vez las acciones extra mientras se guarda: no es una caja. */
.formulario-modal-pie-extra[b-36vtnl2psw] {
    display: contents;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* /Components/DesignSystem/NotaInterna.razor.rz.scp.css */
/* Texto y pie comunes a las fichas 360, con el corte de una
   palabra larga (una URL pegada en la nota), que en una columna de 300 px se saldría de la tarjeta. */
.nota-interna-texto[b-48xkt78w4n] {
    margin: 0;
    font: var(--font-body-md);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.nota-interna-pie[b-48xkt78w4n] {
    margin: var(--space-2) 0 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}
/* /Components/DesignSystem/PaginadorSimple.razor.rz.scp.css */
.paginador-simple[b-7mazo4bjqr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.paginador-texto[b-7mazo4bjqr] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}
/* /Components/DesignSystem/PastillaFiltro.razor.rz.scp.css */
.filtro-pastilla-lista[b-ogryrxoww6] { display: contents; }
.filtro-campo-lista[b-ogryrxoww6] { display: flex; flex: 1 1 140px; min-width: 0; flex-direction: column; gap: var(--space-1); }
.filtro-campo-etiqueta[b-ogryrxoww6] { font: var(--font-caption); color: var(--color-text); }
.filtro-campo-lista[b-ogryrxoww6]  .menu-acciones-disparador { width: 100%; justify-content: space-between; min-height: var(--space-10); border-radius: var(--radius-sm); }
.filtro-campo-lista[b-ogryrxoww6]  .menu-acciones { width: 100%; }
/* /Components/DesignSystem/Pestanas.razor.rz.scp.css */
.pestanas[b-fb0yhu9p6s] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pestanas-lista[b-fb0yhu9p6s] {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--border-default);
    overflow-x: auto;
    scrollbar-width: thin;
}

.pestanas-lista.pestanas-lista-envuelta[b-fb0yhu9p6s] {
    flex-wrap: wrap;
    overflow-x: visible;
}

.pestanas-boton[b-fb0yhu9p6s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-3) var(--space-3);
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.pestanas-boton:hover[b-fb0yhu9p6s] {
    color: var(--color-text);
}

.pestanas-boton:focus-visible[b-fb0yhu9p6s] {
    outline: var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.pestanas-boton-activa[b-fb0yhu9p6s] {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

/*
   Píldora de recuento de la pestaña (mockup Gen 2 de Trabajador 360: 11/14
   peso 500, radio completo, fondo sutil). El tono de alerta NO sustituye al
   número: el número sigue siendo el dato y el color solo lo enfatiza.
*/
.pestanas-contador[b-fb0yhu9p6s] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 1px var(--space-2);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    font-variant-numeric: tabular-nums;
}

.pestanas-contador-alerta[b-fb0yhu9p6s] {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}

/*
   La glosa ("documentos con incidencia") solo existe para el nombre
   accesible del botón: sin ella un lector de pantalla anuncia «Operación 3»
   y el 3 queda sin unidad. No se pinta, pero no se marca aria-hidden — es
   justamente lo que hay que oír.
*/
.pestanas-contador-glosa[b-fb0yhu9p6s] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
   Variante de página 360 (parámetro Pagina360): .pestanas / .pestana /
   .pestana-contador de los «… 360 página» del export de Design.
*/
.pestanas-lista-pagina360[b-fb0yhu9p6s] {
    gap: 2px;
}

.pestanas-lista-pagina360 .pestanas-boton[b-fb0yhu9p6s] {
    height: 38px;
    padding: 0 10px;
    gap: 6px;
    font: var(--font-label);
    font-weight: 600;
}

.pestanas-lista-pagina360 .pestanas-boton.pestanas-boton-activa[b-fb0yhu9p6s] {
    color: var(--color-text);
}

.pestanas-lista-pagina360 .pestanas-contador[b-fb0yhu9p6s] {
    padding: 1px 6px;
    font: 500 11px/14px var(--font-family);
}

.pestanas-panel[b-fb0yhu9p6s] {
    padding-top: var(--space-4);
    flex: 1;
    min-height: 0;
}
/* /Components/DesignSystem/PieListado.razor.rz.scp.css */
.pie-lista-maqueta[b-f1xb8mkg6i] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font: var(--font-body-md); }
.pie-lista-inicio[b-f1xb8mkg6i], .pie-lista-opciones[b-f1xb8mkg6i], .pie-lista-opciones label[b-f1xb8mkg6i] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.pie-lista-maqueta button[b-f1xb8mkg6i], .pie-lista-maqueta select[b-f1xb8mkg6i] { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
.pie-lista-maqueta button:disabled[b-f1xb8mkg6i], .pie-lista-maqueta select:disabled[b-f1xb8mkg6i] { opacity: .5; cursor: default; }
.pie-lista-atajos[b-f1xb8mkg6i] { flex-basis: 100%; }
@media (max-width: 600px) { .pie-lista-inicio[b-f1xb8mkg6i], .pie-lista-opciones[b-f1xb8mkg6i] { width: 100%; } }
/* /Components/DesignSystem/ProgresoConMensajes.razor.rz.scp.css */
.progreso-carga[b-n1k9gumswl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
}

.progreso-barra[b-n1k9gumswl] {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    overflow: hidden;
}

.progreso-barra-relleno[b-n1k9gumswl] {
    position: absolute;
    top: 0;
    left: -35%;
    height: 100%;
    width: 35%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-500);
    animation: progreso-indeterminado-b-n1k9gumswl 1.6s ease-in-out infinite;
}

@keyframes progreso-indeterminado-b-n1k9gumswl {
    0% {
        left: -35%;
    }
    100% {
        left: 100%;
    }
}

.progreso-mensaje[b-n1k9gumswl] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-align: center;
    min-height: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .progreso-barra-relleno[b-n1k9gumswl] {
        animation: none;
        left: 0;
        width: 100%;
        opacity: 0.6;
    }
}
/* /Components/DesignSystem/RejillaDatos.razor.rz.scp.css */
.rejilla-datos[b-qi5pih6pmu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
}
/* /Components/DesignSystem/SeccionColapsable.razor.rz.scp.css */
.seccion-colapsable[b-ojtvqyddnx] {
    border: var(--border-default);
    border-radius: var(--radius-card-sm);
    overflow: hidden;
}

.seccion-colapsable + .seccion-colapsable[b-ojtvqyddnx] {
    margin-top: var(--space-3);
}

.seccion-colapsable-cabecera[b-ojtvqyddnx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: var(--color-surface);
    border: none;
    padding: var(--space-3) var(--space-4);
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.seccion-colapsable-cabecera:hover[b-ojtvqyddnx] {
    background: var(--color-surface-hover);
}

.seccion-colapsable-cabecera:focus-visible[b-ojtvqyddnx] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.seccion-colapsable-chevron[b-ojtvqyddnx] {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: transform var(--motion-fast) var(--ease-standard);
}

.seccion-colapsable-chevron-abierta[b-ojtvqyddnx] {
    transform: rotate(180deg);
}

.seccion-colapsable-titulo[b-ojtvqyddnx] {
    flex: 1;
}

.seccion-colapsable-encabezado[b-ojtvqyddnx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.seccion-colapsable-contenido[b-ojtvqyddnx] {
    padding: var(--space-4);
    border-top: var(--border-default);
}
/* /Components/DesignSystem/SelectorEntidad.razor.rz.scp.css */
.selector-entidad-envoltorio[b-9jchlod24t] {
    position: relative;
}

.selector-entidad-lista[b-9jchlod24t] {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background: var(--color-overlay);
    border: var(--border-control);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    max-height: 16rem;
    overflow-y: auto;
}

.selector-entidad-opcion[b-9jchlod24t] {
    padding: var(--space-2) var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text);
    cursor: pointer;
}

.selector-entidad-opcion:hover[b-9jchlod24t],
.selector-entidad-opcion-resaltada[b-9jchlod24t] {
    background: var(--color-primary-50);
}

.selector-entidad-opcion-crear[b-9jchlod24t] {
    color: var(--color-primary-500);
    font-weight: 600;
    border-top: var(--border-default);
}
/* /Components/DesignSystem/SelectorMultiple.razor.rz.scp.css */
.selector-multiple-controles[b-7t3tb88q9o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-2);
}

.selector-multiple-controles .campo[b-7t3tb88q9o] {
    flex: 1 1 160px;
    margin-bottom: 0;
}

.selector-multiple-controles .campo-checkbox[b-7t3tb88q9o] {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* /Components/DesignSystem/Tarjeta.razor.rz.scp.css */
.tarjeta[b-hillenees8] {
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.tarjeta-header[b-hillenees8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-default);
}

.tarjeta-titulo[b-hillenees8] {
    font: var(--font-heading-md);
}

.tarjeta-contenido[b-hillenees8] {
    padding: var(--space-5);
}

/*
  Variante compacta: la tarjeta del lateral de las páginas 360
  (la antigua .centro360-tarjeta-lateral de Centro 360, que ya usa esta
  variante, y la de los mockups Cliente 360 / Empresa 360): 16 px de relleno total, sin raya bajo la
  cabecera, 12 px entre cabecera y contenido, título --font-heading-sm.
*/
.tarjeta-compacta .tarjeta-header[b-hillenees8] {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) 0;
    margin-bottom: var(--space-3);
    border-bottom: none;
}

/*
   «Editar →» de la cabecera del lateral: en los mockups 360 es .boton-fantasma
   boton-pequeno, un enlace sin borde ni relleno en azul primario (13/16, peso
   600, relleno 0 4 px). El Boton Fantasma del repo es el botón con borde de
   las barras de herramientas, y aquí no es esa pieza.
*/
.tarjeta-compacta .tarjeta-acciones[b-hillenees8]  .boton-fantasma {
    min-height: 0;
    height: auto;
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: var(--color-primary-500);
    font: var(--font-label);
    font-weight: 600;
}

.tarjeta-compacta .tarjeta-acciones[b-hillenees8]  .boton-fantasma:not(:disabled):hover {
    background: none;
    color: var(--color-primary-600);
    transform: none;
}

.tarjeta-compacta .tarjeta-titulo[b-hillenees8] {
    font: var(--font-heading-sm);
    margin: 0;
}

.tarjeta-compacta .tarjeta-contenido[b-hillenees8] {
    padding: 0 var(--space-4) var(--space-4);
}

.tarjeta-compacta > .tarjeta-contenido:first-child[b-hillenees8] {
    padding-top: var(--space-4);
}
/* /Components/DesignSystem/TarjetaMetrica.razor.rz.scp.css */
.tarjeta-metrica[b-v9lapjikil] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-card-sm);
    border-left: 3px solid var(--color-neutral-300);
}

.tarjeta-metrica-etiqueta[b-v9lapjikil] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/*
  Fila del icono con la cifra (02 § 7, DDL-036): un icono decorativo delante
  del número, nunca solo — el nombre accesible del KPI lo aporta la etiqueta
  que ya acompaña a la tarjeta.
*/
.tarjeta-metrica-fila-valor[b-v9lapjikil] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tarjeta-metrica-fila-valor .icono[b-v9lapjikil] {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tarjeta-metrica-valor[b-v9lapjikil] {
    font: var(--font-heading-xl);
    font-variant-numeric: tabular-nums;
}

/* Tercera línea opcional: contexto del valor principal, mismo tono que la
   etiqueta pero sin mayúsculas — no compite con el número ni con la etiqueta. */
.tarjeta-metrica-pista[b-v9lapjikil] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.tarjeta-metrica-exito[b-v9lapjikil] {
    border-left-color: var(--color-success-500);
}

.tarjeta-metrica-advertencia[b-v9lapjikil] {
    border-left-color: var(--color-warning-500);
}

.tarjeta-metrica-peligro[b-v9lapjikil] {
    border-left-color: var(--color-danger-500);
}

.tarjeta-metrica-info[b-v9lapjikil] {
    border-left-color: var(--color-info-500);
}

/*
  Variante discreta: KPIs informativos (no una señal que requiera acción),
  se apoyan menos — sin borde de color semántico ni degradado (ver
  Dashboard.razor.css, el degradado solo se aplica a .tarjeta-metrica que no
  sea discreta), valor a tamaño de subtítulo en vez de H1.
*/
.tarjeta-metrica-discreta[b-v9lapjikil] {
    border-left-color: transparent;
    box-shadow: none;
    background-color: var(--color-surface-hover);
}

.tarjeta-metrica-discreta .tarjeta-metrica-valor[b-v9lapjikil] {
    font: var(--font-heading-sm);
}

/* Sin sombra ni realce de hover: --shadow-overlay tiene un unico uso
   permitido, el nivel Overlay (06 § 5), y una tarjeta metrica no lo es
   (ODM-06, resuelto). El cursor ya senala que es interactiva. */
.tarjeta-metrica-clicable[b-v9lapjikil] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* /Components/DesignSystem/TextoFechaCopiable.razor.rz.scp.css */
/* Reset de botón: se ve y se comporta como el texto que envuelve, con la
   señal de interacción es un subrayado punteado al pasar el cursor o al
   recibir foco; cuando ofrece emisión con Alt/Option, permanece visible. */
.texto-fecha-copiable[b-9r26jsleid] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: underline dotted transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color var(--motion-fast) var(--ease-standard);
}

.texto-fecha-copiable:hover[b-9r26jsleid],
.texto-fecha-copiable[data-copiar-alt][b-9r26jsleid],
.texto-fecha-copiable:focus-visible[b-9r26jsleid] {
    text-decoration-color: currentColor;
}

.copia-fecha-manual[b-9r26jsleid] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.copia-fecha-manual input[b-9r26jsleid] {
    width: 12ch;
    max-width: 100%;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.texto-fecha-copiable:focus-visible[b-9r26jsleid] {
    outline: var(--border-focus);
    outline-offset: 2px;
}
/* /Components/DesignSystem/TextoResaltado.razor.rz.scp.css */
/* <mark> trae de fábrica el amarillo y el negro del navegador, iguales en los dos temas. Aquí el
   fondo es el token (con variante oscura) y la letra es la de la celda: nombre, texto secundario
   o identificador copiable conservan su color y su peso. */
.texto-resaltado[b-l10deehp6m] {
    background-color: var(--color-resaltado-busqueda);
    color: inherit;
}
/* /Components/DesignSystem/VentanaContexto.razor.rz.scp.css */
/*
    El disparador es inline: se incrusta dentro de una celda, de un badge o
    junto a una fecha sin romper la línea. `position: relative` lo convierte en
    el ancla del panel.
*/
.ventana-contexto[b-bqb9xowcz6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* `help` y no `pointer`: no navega ni ejecuta nada, solo explica. */
    cursor: help;
}

.ventana-contexto-inerte[b-bqb9xowcz6] {
    cursor: inherit;
}

/*
    El disparador solo cambia de color al pasar el cursor o al recibir el foco
    (decisión del 2026-10-08): sin subrayado punteado. Un disparador que trae
    su propio color, como un Badge, lo conserva.
*/
.ventana-contexto:not(.ventana-contexto-inerte):hover[b-bqb9xowcz6],
.ventana-contexto:not(.ventana-contexto-inerte):focus-within[b-bqb9xowcz6] {
    color: var(--color-primary-500);
}

/*
    Interactiva: lo que se enfoca es el botón, no el contenedor. Hereda la
    tipografía de la celda para que el disparador se lea igual que el texto
    que sustituye. `default` y no `help`: aquí sí se pulsa lo de dentro.
*/
.ventana-contexto-interactiva[b-bqb9xowcz6] {
    cursor: default;
}

.ventana-contexto-disparador[b-bqb9xowcz6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: default;
}

.ventana-contexto-disparador:focus-visible[b-bqb9xowcz6] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*
    Puente sobre la separación entre disparador y panel. Sin él, al cruzar esos
    píxeles el cursor deja de estar sobre la ventana, `:hover` se pierde y el
    panel se cierra antes de llegar a él (WCAG 1.4.13). Va en el contenedor y
    no en el panel porque el panel recorta su desbordamiento. Solo existe
    mientras la ventana está abierta, y es tan ancho como el panel para que el
    cursor también llegue en diagonal.
*/
.ventana-contexto:not(.ventana-contexto-inerte):hover[b-bqb9xowcz6]::after,
.ventana-contexto:not(.ventana-contexto-inerte):focus-within[b-bqb9xowcz6]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 260px;
    height: var(--space-1);
    transform: translateX(-50%);
}

.ventana-contexto-abajo:not(.ventana-contexto-inerte):hover[b-bqb9xowcz6]::after,
.ventana-contexto-abajo:not(.ventana-contexto-inerte):focus-within[b-bqb9xowcz6]::after {
    top: 100%;
    bottom: auto;
}

.ventana-contexto-fin:not(.ventana-contexto-inerte):hover[b-bqb9xowcz6]::after,
.ventana-contexto-fin:not(.ventana-contexto-inerte):focus-within[b-bqb9xowcz6]::after {
    right: 0;
    left: auto;
    transform: none;
}

.ventana-contexto:focus-visible[b-bqb9xowcz6] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*
    Nivel Overlay (06 § 3): flota sobre el contenido, así que es de los pocos
    sitios donde --shadow-overlay está permitida.

    Se oculta con `display` para que, cerrado, no capture el puntero ni
    intercepte clics de la fila que hay debajo.
*/
.ventana-contexto-panel[b-bqb9xowcz6] {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;

    width: max-content;
    max-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);

    background-color: var(--color-overlay);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);

    font: var(--font-body-sm);
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;

    /*
        Se oculta con `display`, no con `opacity` + `visibility`.

        El par opacity/visibility se probó primero y falló en la propia
        aplicación: la regla de apertura se aplicaba —`visibility` pasaba a
        `visible`— pero la opacidad se quedaba en 0, así que el panel existía
        para el lector de pantalla y era invisible para todo lo demás. Peor que
        no abrirse, porque no se nota.

        `display` no admite transición, y eso está permitido: 07 § 4 dice que
        Tier A puede degradarse a cambio instantáneo — lo que nunca puede es
        desaparecer. La ventana se abre; no se desvanece.
    */
    display: none;
}

/*
    Las condiciones que exige DDL-032, juntas y en la misma regla para que no
    se pueda retirar una sin ver la otra: puntero Y foco de teclado.

    `:focus-within` además de `:focus-visible` a propósito. `:focus-visible`
    depende de una heurística del navegador sobre si el foco "merece" indicarse,
    y se ha comprobado en este proyecto que puede no aplicarse aunque el
    elemento tenga el foco por teclado — con lo que la ventana no se abriría y
    el recuento se quedaría sin su desglose, que es justo el defecto que
    DDL-033 cierra. `:focus-within` no depende de ninguna heurística.
*/
.ventana-contexto:hover > .ventana-contexto-panel[b-bqb9xowcz6],
.ventana-contexto:focus-visible > .ventana-contexto-panel[b-bqb9xowcz6],
.ventana-contexto:focus-within > .ventana-contexto-panel[b-bqb9xowcz6] {
    display: block;
}

/* Hacia abajo: filas de listado, donde hacia arriba taparía la fila anterior. */
.ventana-contexto-abajo > .ventana-contexto-panel[b-bqb9xowcz6] {
    top: calc(100% + var(--space-1));
    bottom: auto;
}

.ventana-contexto-fin > .ventana-contexto-panel[b-bqb9xowcz6] {
    right: 0;
    left: auto;
    transform: none;
}

/* Con elementos pulsables el panel necesita ancho para la línea entera. */
.ventana-contexto-interactiva > .ventana-contexto-panel[b-bqb9xowcz6] {
    min-width: 220px;
    max-width: 340px;
    /* Diálogo de la revisión de Design (DDL-083): radio --radius-lg y sin relleno propio; el título, las filas
       (8/16) y el pie (12/16) lo llevan por su cuenta. */
    padding: 0;
    border-radius: var(--radius-lg);
}

.ventana-contexto-interactiva .ventana-contexto-titulo[b-bqb9xowcz6] {
    margin-bottom: 0;
    padding: 14px 16px 10px;
    font-size: 14px;
}

.ventana-contexto-interactiva .ventana-contexto-pie[b-bqb9xowcz6] {
    margin-top: var(--space-1);
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

/*
    Esc (ventana-contexto.js) marca la ventana como cerrada aunque el cursor
    siga encima o el foco dentro. Doble clase para ganar a la regla de apertura
    sin `!important`.
*/
.ventana-contexto.ventana-contexto[data-ventana-cerrada] > .ventana-contexto-panel[b-bqb9xowcz6] {
    display: none;
}

/* Entrada: al pasar de display:none a block, @starting-style da el estado de
   partida. Si el navegador no lo soporta se ignora y la ventana sigue
   apareciendo de golpe, que es el comportamiento de arriba (07 § 4). Conserva
   el translateX(-50%) del centrado. */
@media (prefers-reduced-motion: no-preference) {
    .ventana-contexto-panel[b-bqb9xowcz6] {
        transition: opacity var(--motion-base) var(--ease-fluid), transform var(--motion-base) var(--ease-fluid);

        @starting-style {
            opacity: 0;
            transform: translateX(-50%) translateY(4px);
        }
    }

    .ventana-contexto-abajo > .ventana-contexto-panel[b-bqb9xowcz6] {
        @starting-style {
            opacity: 0;
            transform: translateX(-50%) translateY(-4px);
        }
    }

    .ventana-contexto-fin > .ventana-contexto-panel[b-bqb9xowcz6] {
        transition-property: opacity;

        @starting-style {
            opacity: 0;
            transform: none;
        }
    }
}

.ventana-contexto-titulo[b-bqb9xowcz6] {
    display: block;
    margin-bottom: var(--space-1);
    font: var(--font-label-md);
    color: var(--color-text);
}

/*
    Cian solo cuando la ventana habla del sistema actuando (02 § 3.1). Un
    recuento de estados no lo es: no lleva esta clase y se queda en texto
    normal, para que el cian no acabe absorbiendo el rol de "información".
*/
.ventana-contexto-titulo-sistema[b-bqb9xowcz6] {
    color: var(--color-system-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
}

.ventana-contexto-pie[b-bqb9xowcz6] {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/*
    Hoja inferior en móvil (HojaEnMovil, revisión de Design 2026-10-17, §C). Por debajo de 768 px el panel
    de una ventana interactiva deja de flotar junto al disparador (en un móvil se saldría de la pantalla) y
    se abre como hoja a todo el ancho, con un velo detrás y un botón de cierre de 44 px. El velo es el
    propio box-shadow del panel con un radio enorme: no captura clics, y tocar fuera quita el foco del
    disparador, que es lo que cierra la ventana. Va al final del fichero para ganar, a igual especificidad,
    a las reglas de colocación de arriba. El tirador y el botón de cierre no existen en escritorio.
*/
.ventana-contexto-tirador[b-bqb9xowcz6],
.ventana-contexto-cerrar[b-bqb9xowcz6] {
    display: none;
}

@media (max-width: 767px) {
    .ventana-contexto-hoja > .ventana-contexto-panel[b-bqb9xowcz6] {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        /* Por encima de la barra de acciones por lotes (1040) y de la cabecera fija (1020); por debajo de Modal (1050) y toasts. */
        z-index: 1045;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 70vh;
        padding: var(--space-1) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 20px 20px 0 0;
        transform: none;
        box-shadow: var(--shadow-overlay), 0 0 0 100vmax var(--color-scrim);

        @starting-style {
            opacity: 0;
            transform: translateY(24px);
        }
    }

    .ventana-contexto-hoja .ventana-contexto-tirador[b-bqb9xowcz6] {
        display: block;
        width: 36px;
        height: 4px;
        margin: var(--space-2) auto var(--space-1);
        border-radius: var(--radius-full);
        background-color: var(--color-border-strong);
    }

    .ventana-contexto-hoja .ventana-contexto-cerrar[b-bqb9xowcz6] {
        position: absolute;
        top: var(--space-1);
        right: var(--space-1);
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-text);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
    }

    .ventana-contexto-hoja .ventana-contexto-cerrar:focus-visible[b-bqb9xowcz6] {
        outline: var(--border-focus);
        outline-offset: -2px;
        border-radius: var(--radius-md);
    }

    /* El título deja sitio al botón de cierre. En la hoja el panel ya pone los 16 px laterales (el relleno de 16 del
       título de escritorio los duplicaría: 32 px frente a los 16 de las filas) y el título se alinea con el botón de
       44 px, a 15 px (revisión de Design, §C, hoja de móvil). */
    .ventana-contexto-hoja .ventana-contexto-titulo[b-bqb9xowcz6] {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 44px 0 0;
        font-size: 15px;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .ventana-contexto-hoja > .ventana-contexto-panel[b-bqb9xowcz6] {
        transition: none;
    }
}
/* /Components/DesignSystem/VentanaContextoElemento.razor.rz.scp.css */
/*
    Fila pulsable dentro del panel de una VentanaContexto interactiva. Ocupa
    todo el ancho del panel para que el objetivo del clic sea la línea entera,
    no solo el texto.
*/
.ventana-contexto-elemento[b-g5w0yl2xfi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ventana-contexto-elemento:hover:not(:disabled)[b-g5w0yl2xfi],
.ventana-contexto-elemento:focus-visible[b-g5w0yl2xfi] {
    /* No --color-fila-hover: en oscuro vale lo mismo que --color-overlay, el fondo del panel. */
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
}

.ventana-contexto-elemento:focus-visible[b-g5w0yl2xfi] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.ventana-contexto-elemento:disabled[b-g5w0yl2xfi] {
    color: var(--color-text-muted);
    cursor: default;
}

.ventana-contexto-elemento-texto[b-g5w0yl2xfi] {
    flex: 1 1 auto;
    min-width: 0;
}

.ventana-contexto-elemento-secundario[b-g5w0yl2xfi] {
    flex: none;
    color: var(--color-text-muted);
}

/* El catálogo solo tiene el chevron hacia abajo: aquí apunta a «se abre». */
.ventana-contexto-elemento-flecha[b-g5w0yl2xfi] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-muted);
    transform: rotate(-90deg);
}
/* /Components/DesignSystem/ZonaSoltarArchivo.razor.rz.scp.css */
.zona-soltar-archivo[b-zngpk5gs6q] {
    position: relative;
    border: 2px dashed var(--color-border-control);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.zona-soltar-archivo:focus-visible[b-zngpk5gs6q] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.zona-soltar-archivo-activa[b-zngpk5gs6q] {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.zona-soltar-archivo-deshabilitada[b-zngpk5gs6q] {
    opacity: 0.6;
    pointer-events: none;
}

.zona-soltar-archivo-superficie[b-zngpk5gs6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    cursor: pointer;
    text-align: center;
}

.zona-soltar-archivo-icono[b-zngpk5gs6q] {
    display: inline-flex;
    color: var(--color-primary-400);
    margin-bottom: var(--space-1);
}

.zona-soltar-archivo-titulo[b-zngpk5gs6q] {
    font: var(--font-body-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.zona-soltar-archivo-subtitulo[b-zngpk5gs6q] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
}

.zona-soltar-archivo-enlace[b-zngpk5gs6q] {
    color: var(--color-primary-500);
    font-weight: 600;
}

.zona-soltar-archivo-subtitulo kbd[b-zngpk5gs6q] {
    font: var(--font-body-sm);
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
}

.zona-soltar-archivo-formatos[b-zngpk5gs6q] {
    font: var(--font-body-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* --color-neutral-400 (#a9b4c2) daba 1,91:1 sobre --color-primary-50, por
       debajo del 4.5:1 exigido a texto de 12px en los dos temas (medido
       2026-09-18, único uso de ese escalón como texto en todo el proyecto
       Web). --color-text-muted es el token que ya existe para "texto
       secundario legible" (criterio en tokens.css, junto a su declaración):
       4,72:1 en claro, 5,30:1 en oscuro contra --color-primary-50. */
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

/*
  El ocultamiento visual de .zona-soltar-archivo-input NO se estiliza aquí a
  propósito — vive en base.css sin aislar. <InputFile> es un componente
  integrado de Blazor y no propaga el atributo de scope de CSS isolation a su
  <input> renderizado (a diferencia de un elemento HTML plano como el <label>
  de arriba, que sí lo lleva) — una regla scoped aquí nunca lo alcanza, así
  que el selector nativo "Elegir archivos / Ningún archivo seleccionado"
  quedaba visible debajo de la zona de arrastrar (bug real, mismo motivo que
  el ripple de Boton.razor.css: ver ese comentario en base.css).
*/
/* /Components/Layout/AccesoLayout.razor.rz.scp.css */
/* Escena del artefacto «Luz de agua». Colores escritos y no tokens a propósito:
   es la paleta de MARCA (verde #122A21, celeste #8FC7BC, marfil #F2EEE1), que
   solo vive aquí. La escena es oscura siempre, con o sin tema oscuro del
   producto, y no hay semáforo con el que el verde pueda confundirse. */

/* IBM Plex Sans (SIL OFL 1.1, licencia en wwwroot/fonts/OFL-IBMPlex.txt): la
   letra del formulario en el artefacto. El lockup no necesita fuente: es
   geometría vectorial pura (img/marca/talveg-lockup-oscuro.svg). */
@font-face {
    font-family: 'TALVEG Plex';
    src: url('/fonts/IBMPlexSans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TALVEG Plex';
    src: url('/fonts/IBMPlexSans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.acceso-escena[b-08q1t1huwg] {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: #122A21;
    color: #F2EEE1;
    font-family: 'TALVEG Plex', system-ui, sans-serif;
}

/* La escena de referencia del artefacto (920×575, 16:10: el ancho útil de su
   página de 1000 px), ampliada por acceso-agua.js hasta cubrir la pantalla con
   --acceso-escala. Todo lo de dentro —lienzo, desenfoque de 7 px, velo— se
   amplía en la misma proporción, así que el agua se ve como en el artefacto a
   cualquier tamaño, recortada lo que sobre. Sin guion queda a escala 1 y
   centrada; fuera de ella se ve el mismo verde en que acaba el velo. */
.acceso-referencia[b-08q1t1huwg] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 920px;
    height: 575px;
    transform: translate(-50%, -50%) scale(var(--acceso-escala, 1));
    pointer-events: none;
    z-index: 0;
}

/* Lienzo a un cuarto de resolución, escalado y desenfocado: la suavidad sale
   del escalado, no de un desenfoque caro. Desborda un 6 % por cada lado para que
   el desenfoque no deje un borde oscuro. */
.acceso-agua[b-08q1t1huwg] {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    filter: blur(7px);
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}

/* El velo oscurece hacia los bordes y deja pasar poca luz en el centro, para
   que el contraste del formulario no dependa nunca de dónde esté el agua. */
.acceso-velo[b-08q1t1huwg] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 34%, rgba(18, 42, 33, .10) 0%, rgba(18, 42, 33, .62) 58%, rgba(18, 42, 33, .86) 100%);
}

/* Reserva abajo el sitio del interruptor: con un error y la validación a la
   vez, la tarjeta crece y no debe acabar debajo de él. */
.acceso-centro[b-08q1t1huwg] {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 26px 64px;
}

/* Interruptor discreto: visible al pasar el ratón Y al llegar con el
   tabulador, nunca solo con hover. */
.acceso-mov[b-08q1t1huwg] {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(242, 238, 225, .05);
    color: rgba(242, 238, 225, .28);
    transition: color .18s ease, background .18s ease;
}

/* display:grid de arriba pisaría el [hidden] del agente de usuario, y sin
   JavaScript el botón quedaría visible sin hacer nada. */
.acceso-mov[hidden][b-08q1t1huwg] {
    display: none;
}

.acceso-escena:hover .acceso-mov[b-08q1t1huwg] {
    color: rgba(242, 238, 225, .45);
}

.acceso-mov:hover[b-08q1t1huwg],
.acceso-mov:focus-visible[b-08q1t1huwg] {
    color: rgba(242, 238, 225, .88);
    background: rgba(242, 238, 225, .14);
}

.acceso-mov:focus-visible[b-08q1t1huwg] {
    outline: 2px solid #8FC7BC;
    outline-offset: 2px;
}

.acceso-mov-tachado[b-08q1t1huwg] {
    opacity: 0;
    transition: opacity .18s ease;
}

.acceso-mov[aria-pressed="false"] .acceso-mov-tachado[b-08q1t1huwg] {
    opacity: 1;
}

.acceso-aviso[b-08q1t1huwg] {
    position: absolute;
    right: 52px;
    bottom: 19px;
    z-index: 3;
    font-size: 11.5px;
    white-space: nowrap;
    color: rgba(242, 238, 225, .6);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.acceso-aviso.acceso-aviso-visible[b-08q1t1huwg] {
    opacity: 1;
}

.acceso-solo-lectores[b-08q1t1huwg] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ══ Tarjeta de las pantallas de acceso ══════════════════════════════
   Las reglas viven aquí y no en cada página: login, 2FA, recuperar,
   restablecer y cambiar contraseña pintan la misma tarjeta. Con ::deep
   porque ese markup es de las páginas, de CabeceraAcceso y de
   RequisitosContrasena, no de este layout. Los textos tenues quedan en .6 o
   más de marfil, que da ≥ 4,5:1 incluso con dos bandas de agua debajo. */
.acceso-centro[b-08q1t1huwg]  .acceso-tarjeta {
    width: 100%;
    max-width: 340px;
    text-align: center;
    color: #F2EEE1;
    line-height: 1.6;
}

/* El lockup ocupa el sitio de un texto de 34–42 px: el SVG se genera a 200
   unidades por em con 185 de alto (generar-lockup.py), así que su altura es
   0,925 veces ese cuerpo. */
.acceso-centro[b-08q1t1huwg]  .acceso-marca {
    margin: 0;
    line-height: 1;
}

.acceso-centro[b-08q1t1huwg]  .acceso-marca img {
    display: inline-block;
    width: auto;
    height: clamp(31.45px, 4.625vw, 38.85px);
    vertical-align: top;
}

.acceso-centro[b-08q1t1huwg]  .acceso-lema {
    margin: 9px 0 28px;
    font-size: 12.5px;
    color: rgba(242, 238, 225, .6);
}

.acceso-centro[b-08q1t1huwg]  .acceso-titulo {
    margin: -8px 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #F2EEE1;
}

.acceso-centro[b-08q1t1huwg]  .acceso-explica {
    margin: 0 0 20px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(242, 238, 225, .72);
}

.acceso-centro[b-08q1t1huwg]  .acceso-alerta {
    margin: 0 0 16px;
    padding: 10px 12px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.5;
    color: #FEE2E2;
    background: rgba(127, 29, 29, .55);
    border: 1px solid rgba(252, 165, 165, .45);
    border-radius: 7px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo {
    margin-bottom: 13px;
    text-align: left;
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(242, 238, 225, .75);
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo input {
    width: 100%;
    height: 43px;
    padding: 0 14px;
    font: 400 14px/1.4 'TALVEG Plex', system-ui, sans-serif;
    color: #F2EEE1;
    background: rgba(10, 24, 18, .42);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(242, 238, 225, .3);
    border-radius: 7px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo input:focus {
    outline: 2px solid #8FC7BC;
    outline-offset: 1px;
    border-color: #8FC7BC;
    box-shadow: 0 0 0 3px rgba(143, 199, 188, .3);
}

/* El autorrelleno del navegador pinta fondo claro y letra oscura: en esta
   escena el campo saltaría a la vista como una mancha. */
.acceso-centro[b-08q1t1huwg]  .acceso-campo input:-webkit-autofill {
    -webkit-text-fill-color: #F2EEE1;
    caret-color: #F2EEE1;
    box-shadow: 0 0 0 1000px #1B342A inset;
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo input.invalid {
    border-color: #FCA5A5;
}

.acceso-centro[b-08q1t1huwg]  .acceso-campo .validation-message {
    margin-top: 4px;
    font-size: 12px;
    color: #FCA5A5;
}

/* El código de 2FA se lee de un vistazo: centrado y con aire entre cifras. */
.acceso-centro[b-08q1t1huwg]  .acceso-codigo input {
    text-align: center;
    font-size: 18px;
    letter-spacing: .5em;
}

/* Botón principal de la tarjeta; también como <a> cuando la salida es navegar. */
.acceso-centro[b-08q1t1huwg]  .acceso-entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    margin-top: 8px;
    border: 0;
    border-radius: 7px;
    font: 600 14px/1 'TALVEG Plex', system-ui, sans-serif;
    color: #0B1F17;
    background: #8FC7BC;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.acceso-centro[b-08q1t1huwg]  .acceso-entrar:hover:not(:disabled) {
    background: #A3D3CA;
    transform: translateY(-1px);
}

.acceso-centro[b-08q1t1huwg]  .acceso-entrar:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.acceso-centro[b-08q1t1huwg]  .acceso-entrar:focus-visible {
    outline: 2px solid #F2EEE1;
    outline-offset: 2px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-alterno {
    margin: 17px 0 0;
    font-size: 12px;
    color: rgba(242, 238, 225, .62);
}

.acceso-centro[b-08q1t1huwg]  .acceso-nota {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: rgba(242, 238, 225, .62);
}

.acceso-centro[b-08q1t1huwg]  .acceso-olvido {
    margin: 6px 0 0;
    font-size: 12px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-alterno a,
.acceso-centro[b-08q1t1huwg]  .acceso-olvido a,
.acceso-centro[b-08q1t1huwg]  .acceso-enlace-boton {
    color: rgba(242, 238, 225, .72);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-alterno a:hover,
.acceso-centro[b-08q1t1huwg]  .acceso-olvido a:hover,
.acceso-centro[b-08q1t1huwg]  .acceso-enlace-boton:hover {
    color: #F2EEE1;
}

.acceso-centro[b-08q1t1huwg]  .acceso-alterno a:focus-visible,
.acceso-centro[b-08q1t1huwg]  .acceso-olvido a:focus-visible,
.acceso-centro[b-08q1t1huwg]  .acceso-enlace-boton:focus-visible {
    outline: 2px solid #8FC7BC;
    outline-offset: 2px;
    border-radius: 2px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-exito {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(143, 199, 188, .16);
    color: #8FC7BC;
}

.acceso-centro[b-08q1t1huwg]  .acceso-reenvio {
    margin: 0;
    font-size: 12px;
    color: rgba(242, 238, 225, .62);
}

.acceso-centro[b-08q1t1huwg]  .acceso-enlace-boton {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* Requisitos de la contraseña nueva: lista hacia abajo, un círculo vacío por
   cumplir y un check celeste al cumplirse (acceso-contrasena.js lo marca en
   vivo). El estado también se dice en texto para lector de pantalla. */
.acceso-centro[b-08q1t1huwg]  .acceso-requisitos {
    list-style: none;
    margin: -4px 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.acceso-centro[b-08q1t1huwg]  .acceso-requisitos li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(242, 238, 225, .68);
    transition: color .18s ease;
}

.acceso-centro[b-08q1t1huwg]  .acceso-requisito-marca {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(242, 238, 225, .4);
    border-radius: 50%;
    background: transparent center / 10px no-repeat;
    transition: background-color .18s ease, border-color .18s ease;
}

.acceso-centro[b-08q1t1huwg]  .acceso-requisitos li.acceso-requisito-cumplido {
    color: #F2EEE1;
}

.acceso-centro[b-08q1t1huwg]  .acceso-requisitos li.acceso-requisito-cumplido .acceso-requisito-marca {
    border-color: #8FC7BC;
    background-color: #8FC7BC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.9' fill='none' stroke='%230B1F17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.acceso-centro[b-08q1t1huwg]  .acceso-requisito-estado,
.acceso-centro[b-08q1t1huwg]  .acceso-requisitos-resumen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Coincidencia de la confirmación, en vivo. Vacío no ocupa sitio. */
.acceso-centro[b-08q1t1huwg]  .acceso-coincidencia {
    margin: 0;
    font-size: 12px;
    text-align: left;
}

.acceso-centro[b-08q1t1huwg]  .acceso-coincidencia:not(:empty) {
    margin-top: 5px;
}

.acceso-centro[b-08q1t1huwg]  .acceso-coincidencia-ok {
    color: #8FC7BC;
}

.acceso-centro[b-08q1t1huwg]  .acceso-coincidencia-error {
    color: #FCA5A5;
}

@media (prefers-reduced-motion: reduce) {
    .acceso-mov[b-08q1t1huwg],
    .acceso-mov-tachado[b-08q1t1huwg],
    .acceso-aviso[b-08q1t1huwg] {
        transition: none;
    }

    .acceso-centro[b-08q1t1huwg]  .acceso-entrar,
    .acceso-centro[b-08q1t1huwg]  .acceso-campo input,
    .acceso-centro[b-08q1t1huwg]  .acceso-requisitos li,
    .acceso-centro[b-08q1t1huwg]  .acceso-requisito-marca {
        transition: none;
    }

    .acceso-centro[b-08q1t1huwg]  .acceso-entrar:hover:not(:disabled) {
        transform: none;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-23uvcaf9ko] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    padding: var(--space-4);
}
/* /Components/Layout/AvisoFinDeAccesoEstatico.razor.rz.scp.css */
/* Aviso de un solo uso tras perder el Workspace operativo derivado. Tono de advertencia, no de
   error: no ha fallado nada, ha terminado un acceso. Su aspecto base lo pone la banda única de la
   cabecera (MainLayout.razor.css); aquí solo el botón de descartar. */
.aviso-fin-de-acceso-descartar[b-2garhqprxg] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.aviso-fin-de-acceso-descartar:focus-visible[b-2garhqprxg] {
    outline: var(--border-focus);
    outline-offset: 2px;
}
/* /Components/Layout/AvisoVentanaSoporte.razor.rz.scp.css */
/* Mismo asunto que la franja de sesión de soporte (TrazaSoporte); su aspecto base lo pone la banda
   única de la cabecera (MainLayout.razor.css). La de «terminó» se distingue por el enlace de salida. */
.enlace-volver-organizacion[b-v8pbsf6xsd] {
    margin-inline-start: var(--space-2);
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}
/* /Components/Layout/BarraSeccion.razor.rz.scp.css */
/*
  Pestañas de sección (Design, 2026-10-17): 48 px bajo la cabecera, dentro del bloque fijo
  (.cabecera-fija), así que se quedan arriba al desplazar. Sin altura propia fuera de esos 48 px.
  En móvil se desplaza en horizontal en vez de partir las pestañas en dos líneas.
*/
.barra-seccion[b-zq9yccgh74] {
    box-sizing: border-box;
    height: 48px;
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
    padding: 0 var(--space-6);
    border-top: var(--border-default);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.barra-seccion-enlace[b-zq9yccgh74] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 47px;
    padding: 0 var(--space-3);
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font: var(--font-body-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.barra-seccion-enlace:hover[b-zq9yccgh74] {
    color: var(--color-text);
}

.barra-seccion-enlace:focus-visible[b-zq9yccgh74] {
    outline: var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.barra-seccion-enlace[aria-current='page'][b-zq9yccgh74] {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

@media (prefers-reduced-motion: reduce) {
    .barra-seccion-enlace[b-zq9yccgh74] {
        transition: none;
    }
}
/* /Components/Layout/CabeceraEmpresaActiva.razor.rz.scp.css */
.cabecera-empresa-activa[b-oaecg6wb2r] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cabecera-empresa-activa-texto[b-oaecg6wb2r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cabecera-empresa-activa-rotulo[b-oaecg6wb2r] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.cabecera-empresa-activa-nombre[b-oaecg6wb2r] {
    font: var(--font-label-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Layout/EnlaceVolverAMiTrabajo.razor.rz.scp.css */
.enlace-volver-mi-trabajo[b-gtt9sq7a4b] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    font: var(--font-body-sm);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* D-28: primer destino del Tab; invisible hasta recibir el foco. */
.saltar-al-contenido[b-2q0c1wgaym] {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1030; /* por encima de la cabecera fija (1020), por debajo de Drawer (1040) */
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    font: var(--font-label-md);
    text-decoration: none;
    transform: translateY(-200%);
}

.saltar-al-contenido:focus[b-2q0c1wgaym] {
    transform: translateY(0);
}

.contenido:focus[b-2q0c1wgaym] {
    outline: none;
}

.shell[b-2q0c1wgaym] {
    display: flex;
    min-height: 100vh;
}

.barra-lateral[b-2q0c1wgaym] {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-right: var(--border-default);
    display: flex;
    flex-direction: column;
    /* Fija a la altura de la ventana: la marca queda arriba y el menú (NavMenu) hace su propio scroll. */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: width var(--motion-transition) var(--ease-fluid);
}

/* El panel del selector de empresa gestionada mide 300 px y la barra 260: mientras está abierto, la barra deja
   que lo desborde y sube por encima de la cabecera fija (1020) —también del bloque de pestañas de sección—,
   pero por debajo de los Drawer (1040) y Modal (1050). */
.barra-lateral:has(.selector-tenant-panel)[b-2q0c1wgaym] {
    overflow: visible;
    z-index: 1030;
}

/* Modo compacto del menú lateral (<html data-menu-compacto>, lo escribe menu-lateral.js): solo iconos. */
html[data-menu-compacto] .barra-lateral[b-2q0c1wgaym] {
    width: var(--sidebar-width-compacto);
}

html[data-menu-compacto] .marca[b-2q0c1wgaym] {
    justify-content: center;
    padding: 0;
}

/* El enlace entero se va (ni parada de Tab vacía ni hueco de 10 px que descentre la T), como los .tvm-marca y .tvm-cae. */
html[data-menu-compacto] .marca .marca-enlace[b-2q0c1wgaym] {
    display: none;
}

/* Marco de Design (html[data-tv-rail] .tvm-logo::after): con la barra compacta solo queda la T. */
html[data-menu-compacto] .marca[b-2q0c1wgaym]::after {
    content: 'T';
    font: 500 22px/1 Georgia, 'Times New Roman', serif;
    color: var(--color-text);
}

/* Marco de Design (html[data-tv-rail] .tvm-ctxb): el selector de empresa gestionada se queda como su avatar
   centrado (SelectorClienteActivo oculta el texto y el chevron); lo demás que no sea la marca ni el menú se oculta. */
html[data-menu-compacto] .barra-lateral[b-2q0c1wgaym] >  :not(.marca):not(nav):not(.selector-tenant) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .barra-lateral[b-2q0c1wgaym] {
        transition: none;
    }
}

/* Marco de Design (.tvm-logo, marco-talveg.js): TOP_H = 64 px, flex:none, gap 10, padding 0 18 y borde inferior.
   `flex: none` es lo que impide que la marca encoja cuando el selector y el menú no caben en la barra. */
.marca[b-2q0c1wgaym] {
    height: var(--navbar-height);
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: var(--border-default);
}

/* La marca es un enlace a Inicio (<a style="display:flex;align-items:center;gap:10px;text-decoration:none">). */
.marca-enlace[b-2q0c1wgaym] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.marca-wordmark[b-2q0c1wgaym] {
    flex-shrink: 0;
    /* Marco de Design (.tvm-marca, marco-talveg.js): texto en Georgia 22 px, tracking .06em; la V en verde. */
    font: 500 22px/1 Georgia, 'Times New Roman', serif;
    letter-spacing: .06em;
    color: var(--color-text);
    white-space: nowrap;
}

.marca-wordmark b[b-2q0c1wgaym] {
    font-weight: 500;
    color: var(--color-success-700);
}

/* Etiqueta "CAE" junto al wordmark. Texto real, no una imagen, para que un
   lector de pantalla la anuncie tal cual. 11px/letter-spacing/padding son
   la medida exacta de la maqueta elegida (opción D): no hay token de
   tamaño que coincida, así que van literales — igual que .badge-visita
   (list-page.css) ya hace con su font-size cuando --font-label-md no
   encaja. El color y el borde sí son tokens del producto, nunca hex. */
.marca-etiqueta[b-2q0c1wgaym] {
    flex-shrink: 0;
    /* .tvm-cae: 600 11px/1 Inter, borde --color-border-strong: 11 + 4 + 4 + 1 + 1 = 21 px de alto. */
    font: 600 11px/1 var(--font-family);
    letter-spacing: .08em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    padding: 4px 6px;
}

.area-principal[b-2q0c1wgaym] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Bloque fijo de la cabecera (rediseño, propuestas 06 y 07): la barra y la banda de avisos del
   sistema se quedan arriba al desplazar la página. Por debajo de Drawer (1040) y Modal (1050), por
   encima de lo que se desplaza. Con la página en reposo es una superficie lisa; al desplazar
   (cabecera.js pone data-desplazada) gana sombra y un velo translúcido con desenfoque. */
.cabecera-fija[b-2q0c1wgaym] {
    position: sticky;
    top: 0;
    z-index: 1020;
    flex-shrink: 0;
    border-bottom: var(--border-default);
    transition: box-shadow var(--motion-base) var(--ease-standard);
}

/* El fondo vive en un pseudoelemento y no en la propia cabecera: un backdrop-filter en la
   cabecera haría de ella el bloque contenedor de los velos position:fixed de sus paneles
   (PanelDesplegableCabecera), que dejarían de cubrir la pantalla entera. */
.cabecera-fija[b-2q0c1wgaym]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-surface);
    transition: background-color var(--motion-base) var(--ease-standard);
}

.cabecera-fija[data-desplazada][b-2q0c1wgaym] {
    box-shadow: var(--shadow-cabecera-tabla);
}

.cabecera-fija[data-desplazada][b-2q0c1wgaym]::before {
    background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.barra-superior[b-2q0c1wgaym] {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0 var(--space-6);
}

.barra-superior-izquierda[b-2q0c1wgaym],
.barra-superior-derecha[b-2q0c1wgaym] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.barra-superior-derecha[b-2q0c1wgaym] {
    flex-shrink: 0;
}

.menu-usuario[b-2q0c1wgaym] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Banda única de avisos del sistema. Se pliega con animación (grid-template-rows 1fr → 0fr) cuando
   cabecera.js descarta el último aviso; sin avisos mide 0 porque no tiene contenido ni relleno. */
.cabecera-bandas[b-2q0c1wgaym] {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--motion-transition) var(--ease-fluid);
}

.cabecera-bandas.cerrada[b-2q0c1wgaym] {
    grid-template-rows: 0fr;
}

.cabecera-bandas-interior[b-2q0c1wgaym] {
    overflow: hidden;
    min-height: 0;
}

/* Cada aviso del sistema es una fila de la banda. El tono sale de data-tono: «soporte» es el de
   advertencia (el mismo que tenían TrazaSoporte, AvisoVentanaSoporte y AvisoFinDeAccesoEstatico) y
   «info» el neutro de solo consulta. El texto oscuro sobre el ámbar es el mismo de siempre
   (#1a1206 sobre --color-warning-500). */
.cabecera-bandas[b-2q0c1wgaym]  [data-aviso-sistema] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-height: 20rem;
    padding: var(--space-2) var(--space-4);
    border-top: var(--border-default);
    font: var(--font-body-sm);
    text-align: center;
    transition: max-height var(--motion-transition) var(--ease-fluid),
        padding var(--motion-transition) var(--ease-fluid),
        opacity var(--motion-slow) var(--ease-standard);
}

.cabecera-bandas[b-2q0c1wgaym]  [data-aviso-sistema][data-tono='soporte'] {
    background: var(--color-warning-500);
    color: #1a1206;
    font-weight: 600;
}

.cabecera-bandas[b-2q0c1wgaym]  [data-aviso-sistema][data-tono='info'] {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.cabecera-bandas[b-2q0c1wgaym]  [data-aviso-sistema][data-saliendo] {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    overflow: hidden;
}

.contenido[b-2q0c1wgaym] {
    flex: 1;
    overflow-y: auto;
}

#blazor-error-ui[b-2q0c1wgaym] {
    background: var(--color-danger-500);
    color: var(--color-neutral-0);
    bottom: 0;
    box-shadow: var(--shadow-overlay);
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
    position: fixed;
    width: 100%;
    z-index: 1200;
}

#blazor-error-ui .dismiss[b-2q0c1wgaym] {
    cursor: pointer;
    position: absolute;
    right: var(--space-4);
    top: var(--space-3);
}

#blazor-error-ui a.reload[b-2q0c1wgaym] {
    color: var(--color-neutral-0);
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .barra-lateral[b-2q0c1wgaym] {
        display: none;
    }

    /*
      Cabecera compacta en tablet/móvil (propuesta 08): solo iconos —menú, título de la pantalla,
      buscar, avisos, tema y avatar—, menos altura y padding lateral. Los selectores técnicos y
      «Cerrar sesión» no ocupan sitio: viven en los paneles que abren el chip y el avatar. Mismo
      punto de corte que oculta ".barra-lateral".
    */
    .barra-superior[b-2q0c1wgaym] {
        height: 56px;
        padding: 0 var(--space-4);
        gap: var(--space-2);
    }

    .barra-superior-izquierda[b-2q0c1wgaym],
    .barra-superior-derecha[b-2q0c1wgaym],
    .menu-usuario[b-2q0c1wgaym] {
        gap: var(--space-2);
    }
}

/* Revisión de Design §B (móvil de /mi-avatar): la pantalla trae su propia barra «‹ Mi avatar» de 56 px
   (.mi-emblema-barra-movil) y el dibujo no lleva cabecera global encima: sin esto salían dos barras apiladas.
   Solo se oculta la barra; los avisos del sistema (.cabecera-bandas) siguen a la vista. La barra de la pantalla
   ya trae su filete inferior, así que el de la cabecera fija sobra. */
@media (max-width: 767px) {
    .area-principal:has(.mi-emblema-barra-movil) .barra-superior[b-2q0c1wgaym] {
        display: none;
    }

    .area-principal:has(.mi-emblema-barra-movil) > .cabecera-fija[b-2q0c1wgaym] {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabecera-fija[b-2q0c1wgaym],
    .cabecera-fija[b-2q0c1wgaym]::before,
    .cabecera-bandas[b-2q0c1wgaym],
    .cabecera-bandas[b-2q0c1wgaym]  [data-aviso-sistema] {
        transition: none;
    }
}

/* Un diálogo abierto desde la cabecera (la confirmación de Rechazar de la campana de avisos) queda
   dentro de este contexto de apilamiento: su z-index de modal solo valdría 1020 frente al resto de
   la página y la barra de acciones por lotes (1040) o los drawers (1045) se pintarían encima. Mientras
   haya un modal dentro, la cabecera sube por encima de todos ellos. */
.cabecera-fija:has(.modal-superposicion)[b-2q0c1wgaym] {
    z-index: 1060;
}
/* /Components/Layout/MenuUsuario.razor.rz.scp.css */
.menu-cuenta[b-mddhsik206] {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-cuenta-boton[b-mddhsik206] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-avatar-fondo);
    color: var(--color-avatar-texto);
    cursor: pointer;
    transition: box-shadow var(--motion-fast) var(--ease-standard);
}

.menu-cuenta-boton:hover[b-mddhsik206],
.menu-cuenta-boton[aria-expanded='true'][b-mddhsik206] {
    box-shadow: 0 0 0 3px var(--color-surface-hover);
}

.menu-cuenta-boton:focus-visible[b-mddhsik206] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* El avatar llena el botón; el fondo del botón queda debajo, como respaldo. */
.menu-cuenta-boton[b-mddhsik206]  .avatar-usuario {
    --avatar-usuario-lado: 36px;
}

.menu-cuenta-boton:hover[b-mddhsik206]  .avatar-usuario-glifo,
.menu-cuenta-cabecera:hover[b-mddhsik206]  .avatar-usuario-glifo {
    transform: scale(1.15) rotate(-8deg);
}

/* Panel flotante. Cerrado: invisible y sin recibir eventos, pero presente, para animar la
   entrada. La visibilidad se retrasa lo que dura la salida (misma técnica que el resto de
   overlays del producto). */
.menu-cuenta-panel[b-mddhsik206] {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 1;
    min-width: 260px;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-fluid),
        visibility 0s linear var(--motion-base);
}

.menu-cuenta-panel.abierto[b-mddhsik206] {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-fluid);
}

/* Es un enlace a /mi-avatar: hereda de .menu-cuenta-elemento (declarado después) el
   hover y el foco; aquí solo lo que lo distingue como cabecera del panel. */
.menu-cuenta-cabecera[b-mddhsik206] {
    margin-bottom: var(--space-1);
}

.menu-cuenta-cabecera.menu-cuenta-elemento[b-mddhsik206] {
    gap: var(--space-3);
}

.menu-cuenta-identidad[b-mddhsik206] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-cuenta-cambiar[b-mddhsik206] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.menu-cuenta-nombre[b-mddhsik206] {
    display: block;
    font: var(--font-label-md);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.menu-cuenta-elemento[b-mddhsik206] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: var(--font-body-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-cuenta-elemento:hover[b-mddhsik206],
.menu-cuenta-elemento:focus-visible[b-mddhsik206] {
    background-color: var(--color-surface-hover);
}

.menu-cuenta-elemento:focus-visible[b-mddhsik206] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

/* Rótulo del grupo «Mi cuenta»: no es un elemento del menú, solo lo encabeza. */
.menu-cuenta-titulo[b-mddhsik206] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.menu-cuenta-idioma[b-mddhsik206] {
    display: flex;
    padding: var(--space-1) var(--space-3);
}

.menu-cuenta-separador[b-mddhsik206] {
    height: 1px;
    margin: var(--space-1) 0;
    background-color: var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
    .menu-cuenta-panel[b-mddhsik206],
    .menu-cuenta-panel.abierto[b-mddhsik206],
    .menu-cuenta-boton[b-mddhsik206] {
        transition: none;
    }
}
/* /Components/Layout/MigasPagina.razor.rz.scp.css */
.migas[b-8qhdy1zg9u] {
    min-width: 0;
}

.migas-lista[b-8qhdy1zg9u] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font: var(--font-body-md);
    white-space: nowrap;
}

.miga[b-8qhdy1zg9u] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El separador es decoración: la sintaxis «content: x / ""» le da texto alternativo vacío, y el
   segundo valor sin ella es el de los navegadores que no la entienden. */
.miga + .miga[b-8qhdy1zg9u]::before {
    content: '›';
    content: '›' / '';
    margin-inline-end: var(--space-2);
    color: var(--color-text-muted);
}

.miga a[b-8qhdy1zg9u] {
    color: var(--color-text-muted);
    text-decoration: none;
}

.miga a:hover[b-8qhdy1zg9u] {
    color: var(--color-text);
    text-decoration: underline;
}

.miga a:focus-visible[b-8qhdy1zg9u] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.miga-actual[b-8qhdy1zg9u] {
    color: var(--color-text);
    font: var(--font-label-md);
    font-size: 0.9375rem;
}

/* Móvil: solo el título de la pantalla (la última miga), que es lo que cabe junto a los iconos. */
@media (max-width: 1023px) {
    .miga:not(.miga-actual)[b-8qhdy1zg9u] {
        display: none;
    }

    .miga + .miga[b-8qhdy1zg9u]::before {
        content: none;
    }
}
/* /Components/Layout/NavegacionMovil.razor.rz.scp.css */
/* Oculto en escritorio (la barra lateral ya está visible) — visible solo
   por debajo de 1024px, el mismo punto de corte donde MainLayout.razor.css
   oculta ".barra-lateral". */
.boton-menu-movil[b-x4ixb9v2hv] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: var(--border-default);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.boton-menu-movil:hover[b-x4ixb9v2hv] {
    background-color: var(--color-surface-hover);
}

.boton-menu-movil:focus-visible[b-x4ixb9v2hv] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    .boton-menu-movil[b-x4ixb9v2hv] {
        display: inline-flex;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*
    Barra de scroll de la barra lateral (y del cajón móvil, que pinta este mismo elemento): fina, con
    el pulgar redondeado y de color apagado derivado de tokens. Los estándares (scrollbar-width y
    scrollbar-color) mandan en Chromium 121+ y Firefox; el bloque ::-webkit-scrollbar solo cubre a
    Safari y a Chromium anterior, por eso va tras @supports not (con los dos a la vez Chromium ignora
    el segundo). Es el único sitio que la estiliza: base.css ya no lista .nav-principal.
*/
.nav-principal[b-cfpktnzhnk] {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent) transparent;
}

@supports not (scrollbar-width: thin) {
    .nav-principal[b-cfpktnzhnk]::-webkit-scrollbar {
        width: 8px;
    }

    .nav-principal[b-cfpktnzhnk]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-principal[b-cfpktnzhnk]::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--color-text-muted) 40%, transparent);
        border: 2px solid transparent;
        background-clip: content-box;
        border-radius: var(--radius-full);
    }

    .nav-principal[b-cfpktnzhnk]::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
    }
}

.nav-principal[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    /* Sin hueco entre hijos: la separación entre grupos es solo el margin-top de 12 px del grupo (.tvm-g del marco
       de Design); con un gap además se sumaban 8 + 12 = 20 px. */
    gap: 0;
    /* Marco de Design (marco-talveg.js, .tvm-nav): padding 4/8/16. */
    padding: var(--space-1) var(--space-2) var(--space-4);
    /* Scroll propio: la marca de MainLayout queda fija arriba y la barra no se estira con la página. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* El menú fijo del rol Cliente (enlaces sueltos, sin grupo) conserva 4 px entre filas, como .tvm-items. */
.nav-principal[b-cfpktnzhnk] >  .nav-item + .nav-item {
    margin-top: var(--space-1);
}

/*
    Grupo colapsable (Negocio/Operación/Control/Administración) con
    <details>/<summary> nativo -- el navegador resuelve el toggle sin JS;
    wwwroot/js/menu-lateral.js solo persiste qué grupos quedaron cerrados
    entre navegaciones (ver el comentario grande de NavMenu.razor).
*/
.nav-grupo-detalle[b-cfpktnzhnk] {
    margin-top: var(--space-3);
}

.nav-grupo-detalle:first-child[b-cfpktnzhnk] {
    margin-top: 0;
}

/*
    Encabezado de grupo. Reemplaza el <span> estático anterior -- misma
    tipografía (pequeña, mayúsculas, color apagado) para no competir con los
    enlaces reales, ahora como <summary> interactivo con el marcador nativo
    del navegador oculto (list-style/::marker en Firefox, ::-webkit-details-marker
    en Chrome/Edge) porque el chevron de Icono.razor ya cumple ese papel.
*/
.nav-grupo-titulo[b-cfpktnzhnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* Marco de Design (.tvm-gh): padding 6/10 y color --color-text. */
    padding: 6px 10px;
    font: var(--font-body-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nav-grupo-titulo[b-cfpktnzhnk]::-webkit-details-marker {
    display: none;
}

.nav-grupo-titulo[b-cfpktnzhnk]  .icono {
    flex-shrink: 0;
    transition: transform var(--motion-transition) var(--ease-fluid);
}

/* Cerrado: el chevron (que apunta hacia abajo por defecto) gira a "derecha". */
.nav-grupo-detalle:not([open]) .nav-grupo-titulo[b-cfpktnzhnk]  .icono {
    transform: rotate(-90deg);
}

/*
    Altura animada del grupo, solo CSS: interpolate-size permite transicionar
    block-size hacia/desde auto y ::details-content con content-visibility
    discreto mantiene el contenido pintado durante el cierre. En navegadores sin
    ::details-content (Firefox, Safari anteriores) no hay animación y el grupo
    se abre/cierra de golpe, como hasta ahora. El selector va dentro de @supports
    para no invalidar nada fuera. El atributo [open] sigue siendo la verdad: lo
    leen menu-lateral.js y los tests.
*/
@supports selector(::details-content) {
    .nav-grupo-detalle[b-cfpktnzhnk] {
        interpolate-size: allow-keywords;
    }

    .nav-grupo-detalle[b-cfpktnzhnk]::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--motion-transition) var(--ease-fluid),
            content-visibility var(--motion-transition) allow-discrete;
    }

    .nav-grupo-detalle[open][b-cfpktnzhnk]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-grupo-detalle[b-cfpktnzhnk]::details-content {
        transition: none;
    }

    .nav-grupo-titulo[b-cfpktnzhnk]  .icono {
        transition: none;
    }
}

.nav-grupo-items[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    /* Marco de Design (.tvm-items): gap 4 y margin-top 4. */
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/*
    ::deep es obligatorio: <NavLink> es un componente hijo de Blazor, no una
    etiqueta escrita directamente en este archivo — el <a> que renderiza
    internamente no recibe el atributo de scope de CSS isolation de
    NavMenu.razor. Sin ::deep estos selectores nunca matchean (mismo bug real
    ya encontrado y documentado en Login.razor con <InputText>).
*/
.nav-principal[b-cfpktnzhnk]  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    /* Marco de Design (.tvm-it): color --color-text, sin marco; el hover solo cambia el fondo. */
    color: var(--color-text);
    font: var(--font-body-md);
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.nav-principal[b-cfpktnzhnk]  .nav-item .icono {
    color: currentColor;
}

.nav-principal[b-cfpktnzhnk]  .nav-item:hover {
    background-color: var(--color-surface-hover);
}

/* Feedback táctil: al pulsar, el botón "cede" ligeramente y suelta al soltar. */
.nav-principal[b-cfpktnzhnk]  .nav-item:active {
    transform: scale(0.97);
    background-color: var(--color-surface-hover);
    box-shadow: none;
    transition-duration: 80ms;
}

.nav-principal[b-cfpktnzhnk]  .nav-item.active {
    /* La selección se distingue por fondo, color y peso: sin franja ni marco (ni inset, ni border-left). */
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
    font-weight: 600;
}

.nav-principal[b-cfpktnzhnk]  .nav-item.active .icono {
    color: var(--color-primary-500);
}

.nav-principal[b-cfpktnzhnk]  .nav-item.active:hover {
    /* Marco de Design: el seleccionado conserva su fondo al pasar el cursor (el hover genérico va antes). */
    background-color: var(--color-primary-50);
}

/*
    ---- Movimiento de los iconos: solo al pasar el cursor o al enfocar con teclado ----
    Un único keyframe corto. Ni al cargar ni al abrir un grupo (ya no hay entrada escalonada). Las
    animaciones propias de algunos glifos (campana, check, aro: Icono.razor.css) se apagan aquí para que
    no se sumen a esta. Con prefers-reduced-motion no hay movimiento.
*/
@media (prefers-reduced-motion: no-preference) {
    .nav-principal[b-cfpktnzhnk]  a.nav-item:is(:hover, :focus-visible) .icono {
        animation: nav-icono-sacude-b-cfpktnzhnk var(--motion-transition) var(--ease-fluid);
    }

    .nav-principal[b-cfpktnzhnk]  a.nav-item .icono :is(.ic-campana-cuerpo, .ic-campana-badajo, .ic-trazo, .ic-aro) {
        animation: none;
    }
}

@keyframes nav-icono-sacude-b-cfpktnzhnk {
    35% {
        transform: scale(1.18) rotate(-8deg);
    }

    70% {
        transform: scale(0.96) rotate(4deg);
    }
}

/* ---- Cabecera de herramientas: campo «Buscar en el menú» y modo compacto ---- */
.nav-herramientas[b-cfpktnzhnk] {
    position: sticky;
    top: calc(-1 * var(--space-1));
    z-index: 2;
    display: flex;
    align-items: center;
    /* Marco de Design (.tvm-buscam): gap 6 y margin 12 8 4 sobre la fila del campo. */
    gap: 6px;
    /* Sin campo (menú fijo del rol Cliente) el botón de compactar queda a la derecha; con campo, este lo llena. */
    justify-content: flex-end;
    margin-top: calc(-1 * var(--space-1));
    padding: var(--space-3) 0 var(--space-1);
    background-color: var(--color-surface);
    /* Los resultados de la búsqueda (.nav-resultados) ocupan su propia fila y solo existen con coincidencias. */
    flex-wrap: wrap;
    row-gap: 0;
}

/*
    El campo «Buscar en el menú» está siempre a la vista (marco de Design, .tvm-buscam label): 34 px de alto,
    borde --color-border, padding 0 10, gap 8 y un icono de 15 px; ocupa la fila hasta el botón de compactar.
*/
.nav-buscador[b-cfpktnzhnk] {
    display: flex;
    align-items: center;
    /* Base 0 (flex:1 del marco): el ancho intrínseco del input no empuja el botón de compactar a otra fila. */
    flex: 1 1 0;
    gap: 8px;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    cursor: text;
    transition: border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.nav-buscador:focus-within[b-cfpktnzhnk] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.nav-lupa[b-cfpktnzhnk] {
    display: grid;
    place-items: center;
    flex: none;
}

.nav-lupa[b-cfpktnzhnk]  .icono {
    width: 15px;
    height: 15px;
}

.nav-filtro-campo[b-cfpktnzhnk] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--color-text);
    font: 400 13px/18px var(--font-family);
}

/* Resultados dentro de las páginas (opciones de Configuración, pestañas de Documentos). */
.nav-resultados[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 0 0 100%;
    padding-top: var(--space-2);
    /* La cabecera es sticky: una lista larga no puede ocupar toda la altura de la barra. */
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-resultados[hidden][b-cfpktnzhnk],
.nav-resultado[hidden][b-cfpktnzhnk] {
    display: none;
}

.nav-resultados-titulo[b-cfpktnzhnk] {
    padding: 0 var(--space-3);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.nav-resultado[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: var(--font-body-md);
    text-decoration: none;
}

.nav-resultado:hover[b-cfpktnzhnk] {
    background-color: var(--color-surface-hover);
}

.nav-resultado-padre[b-cfpktnzhnk] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .nav-buscador[b-cfpktnzhnk] {
        transition: none;
    }
}

/* .tvm-ib: 34 x 34 px. Sin el campo (barra compacta) no hace falta empujarlo a la derecha. */
.nav-compactar[b-cfpktnzhnk] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.nav-compactar:hover[b-cfpktnzhnk] {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* El chevron apunta hacia abajo: a la izquierda para compactar, a la derecha para ampliar. */
.nav-compactar[b-cfpktnzhnk]  .icono {
    transform: rotate(90deg);
    transition: transform var(--motion-transition) var(--ease-fluid);
}

/* ---- Fila de enlace ---- */
.nav-fila[b-cfpktnzhnk] {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-fila[b-cfpktnzhnk]  .nav-item {
    flex: 1;
    min-width: 0;
}

.nav-item-texto[b-cfpktnzhnk] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Cabecera de grupo: marca de «aquí está la página actual» con el grupo cerrado ---- */
.nav-grupo-rotulo[b-cfpktnzhnk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-grupo-extremo[b-cfpktnzhnk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-grupo-punto[b-cfpktnzhnk] {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary-500);
}

.nav-grupo-detalle:not([open]):has(.nav-item.active) .nav-grupo-punto[b-cfpktnzhnk] {
    display: inline-block;
}

.nav-solo-lector[b-cfpktnzhnk] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nav-grupo-detalle[open] .nav-solo-lector[b-cfpktnzhnk],
.nav-grupo-detalle:not(:has(.nav-item.active)) .nav-solo-lector[b-cfpktnzhnk] {
    display: none;
}

/* ---- Foco visible propio (teclado) ---- */
.nav-principal[b-cfpktnzhnk]  .nav-item:focus-visible,
.nav-grupo-titulo:focus-visible[b-cfpktnzhnk],
.nav-compactar:focus-visible[b-cfpktnzhnk],
.nav-resultado:focus-visible[b-cfpktnzhnk] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

/* ---- Filtro activo: lo que no coincide desaparece (menu-lateral.js pone [hidden]) ---- */
.nav-fila[hidden][b-cfpktnzhnk],
.nav-grupo-detalle[hidden][b-cfpktnzhnk] {
    display: none;
}

/*
    ---- Modo compacto: solo iconos ----
    El estado vive en <html data-menu-compacto> (menu-lateral.js). Los grupos
    pierden la cabecera y se separan con una línea fina; todos los iconos siguen
    visibles aunque el grupo esté cerrado (menu-lateral.js los abre mientras
    dura el modo y devuelve el estado guardado al ensanchar).
*/
html[data-menu-compacto] .barra-lateral .nav-principal[b-cfpktnzhnk] {
    padding-inline: var(--space-2);
}

html[data-menu-compacto] .barra-lateral .nav-buscador[b-cfpktnzhnk],
html[data-menu-compacto] .barra-lateral .nav-grupo-titulo[b-cfpktnzhnk] {
    display: none;
}

html[data-menu-compacto] .barra-lateral .nav-herramientas[b-cfpktnzhnk] {
    justify-content: center;
}

html[data-menu-compacto] .barra-lateral .nav-compactar[b-cfpktnzhnk]  .icono {
    transform: rotate(-90deg);
}

html[data-menu-compacto] .barra-lateral .nav-principal[b-cfpktnzhnk]  .nav-item {
    justify-content: center;
    padding: 0;
}

html[data-menu-compacto] .barra-lateral .nav-item-texto[b-cfpktnzhnk] {
    display: none;
}

html[data-menu-compacto] .barra-lateral .nav-grupo-detalle + .nav-grupo-detalle[b-cfpktnzhnk] {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

@supports selector(::details-content) {
    html[data-menu-compacto] .barra-lateral .nav-grupo-detalle:not([open])[b-cfpktnzhnk]::details-content {
        block-size: auto;
        content-visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-compactar[b-cfpktnzhnk]  .icono {
        transition: none;
    }
}

/* El cajón móvil (bajo 1024px) no tiene modo compacto: sin barra lateral el botón no hace nada. */
@media (max-width: 1023px) {
    .nav-compactar[b-cfpktnzhnk] {
        display: none;
    }
}
/* /Components/Layout/PanelDesplegableCabecera.razor.rz.scp.css */
.panel-desplegable[b-i5qhljdzhr] {
    position: relative;
    display: flex;
    align-items: center;
}

.panel-desplegable-panel[b-i5qhljdzhr] {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 2;
    min-width: 280px;
    max-width: min(380px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-fluid),
        visibility 0s linear var(--motion-base);
}

.panel-desplegable-panel.abierto[b-i5qhljdzhr] {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-fluid);
}

/* Velo invisible: solo recoge el clic de fuera para cerrar. Por debajo del panel (2), por encima
   del resto de la cabecera. */
.panel-desplegable-velo[b-i5qhljdzhr] {
    position: fixed;
    inset: 0;
    z-index: 1;
}

/* Botones que abren el panel. Viven aquí y no en quien los usa porque el <button> lo pinta este
   componente: un ::deep desde el padre depende de que el ámbito se propague por el límite de errores. */

/* Chip de vistas de demostración y vocabulario: pill discreto de tono de aviso suave, para que se
   vea que la vista es una lente de prueba y no la sesión real. El par texto/fondo es el warning
   700/50 que cambia de tema con tokens.css. */
.vistas-chip[b-i5qhljdzhr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    font: var(--font-body-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow var(--motion-fast) var(--ease-standard);
}

.vistas-chip:hover[b-i5qhljdzhr],
.vistas-chip[aria-expanded='true'][b-i5qhljdzhr] {
    box-shadow: 0 0 0 2px var(--color-warning-700);
}

/* Campana de avisos. */
.campana-boton[b-i5qhljdzhr] {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
}

.campana-boton:hover[b-i5qhljdzhr],
.campana-boton[aria-expanded='true'][b-i5qhljdzhr] {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

.vistas-chip:focus-visible[b-i5qhljdzhr],
.campana-boton:focus-visible[b-i5qhljdzhr] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Tablet y móvil: el panel se ancla al ancho de la pantalla y no al botón, que queda cerca del
   borde derecho y lo sacaría por la izquierda; el chip se acorta con puntos suspensivos para no
   desbordar la barra (su nombre accesible lo da aria-label). */
@media (max-width: 1023px) {
    .panel-desplegable[b-i5qhljdzhr] {
        position: static;
    }

    .panel-desplegable-panel[b-i5qhljdzhr] {
        position: fixed;
        top: 64px;
        left: var(--space-4);
        right: var(--space-4);
        min-width: 0;
        max-width: none;
        transform-origin: top center;
    }

    .vistas-chip[b-i5qhljdzhr] {
        max-width: 5.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-desplegable-panel[b-i5qhljdzhr],
    .panel-desplegable-panel.abierto[b-i5qhljdzhr],
    .vistas-chip[b-i5qhljdzhr],
    .campana-boton[b-i5qhljdzhr] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6ipeu9bfwg],
.components-reconnect-repeated-attempt-visible[b-6ipeu9bfwg],
.components-reconnect-failed-visible[b-6ipeu9bfwg],
.components-pause-visible[b-6ipeu9bfwg],
.components-resume-failed-visible[b-6ipeu9bfwg],
.components-reconnect-rejected-visible[b-6ipeu9bfwg],
.components-rejoining-animation[b-6ipeu9bfwg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-retrying[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-failed[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-rejected[b-6ipeu9bfwg],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-6ipeu9bfwg] {
    display: block;
}

#components-reconnect-modal[b-6ipeu9bfwg] {
    background-color: var(--color-surface);
    color: var(--color-text);
    width: 22rem;
    max-width: calc(100vw - var(--space-8));
    margin: 20vh auto;
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6ipeu9bfwg 0.5s both;
}

    #components-reconnect-modal[open][b-6ipeu9bfwg] {
        animation: components-reconnect-modal-slideUp-b-6ipeu9bfwg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-6ipeu9bfwg 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

#components-reconnect-modal[b-6ipeu9bfwg]::backdrop {
    background-color: var(--color-scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-6ipeu9bfwg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-6ipeu9bfwg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-6ipeu9bfwg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-6ipeu9bfwg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-6ipeu9bfwg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

#components-reconnect-modal p[b-6ipeu9bfwg] {
    margin: 0;
    font: var(--font-body-lg);
    text-align: center;
}

#components-reconnect-modal button[b-6ipeu9bfwg] {
    border: var(--border-default);
    background-color: var(--color-primario-fondo);
    border-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    font: var(--font-label-md);
    padding: var(--space-2) var(--space-6);
    min-height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

    #components-reconnect-modal button:hover[b-6ipeu9bfwg] {
        background-color: var(--color-primario-fondo-hover);
        border-color: var(--color-primario-fondo-hover);
    }

    #components-reconnect-modal button:active[b-6ipeu9bfwg] {
        background-color: var(--color-primario-fondo);
        border-color: var(--color-primario-fondo);
    }

/*
    El aviso de sesión perdida/rechazada es el único de los tres botones que
    lleva a perder trabajo sin guardar (ver ReconnectModal.razor.js) — se
    distingue con el color de peligro para que no se confunda con un simple
    "Reintentar"/"Reanudar" de rutina.
*/
#components-reconnect-modal #components-reconnect-rejected-button[b-6ipeu9bfwg] {
    background-color: var(--color-danger-500);
    border-color: var(--color-danger-500);
}

    #components-reconnect-modal #components-reconnect-rejected-button:hover[b-6ipeu9bfwg] {
        opacity: 0.9;
    }

.components-rejoining-animation[b-6ipeu9bfwg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-6ipeu9bfwg] {
        position: absolute;
        border: 3px solid var(--color-primary-500);
        opacity: 1;
        border-radius: var(--radius-full);
        animation: components-rejoining-animation-b-6ipeu9bfwg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-6ipeu9bfwg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-6ipeu9bfwg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-6ipeu9bfwg] {
        animation: none;
        opacity: 0;
    }
}
/* /Components/Layout/SelectorClienteActivo.razor.rz.scp.css */
/*
  Selector de Tenant beneficiario en la cabecera de la barra lateral (decisión
  7 ter, variante B). El bloque del Tenant activo es el disparador; la lista de
  la cartera se despliega justo debajo, sobre el menú.

  Medidas y tipografías del marco de Design (marco-talveg.js, DDL-083, .tvm-ctx,
  .tvm-ctxb, .tvm-pop, .tvm-opt): valores literales del marcado fuente.
*/
.selector-tenant[b-noeu2g23bj] {
    position: relative;
    margin: 10px 8px 0;
}

.selector-tenant-disparador[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s;
}

.selector-tenant-disparador:hover[b-noeu2g23bj] {
    border-color: var(--color-primary-500);
}

.selector-tenant-disparador:focus-visible[b-noeu2g23bj],
.selector-tenant-fila:focus-visible[b-noeu2g23bj],
.selector-tenant-busqueda:focus-visible[b-noeu2g23bj],
.selector-tenant-solicitar:focus-visible[b-noeu2g23bj] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.selector-tenant-disparador-abierto[b-noeu2g23bj] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.selector-tenant-texto[b-noeu2g23bj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Nombres largos: una sola línea con puntos suspensivos (carteras de 15 o más). */
.selector-tenant-nombre[b-noeu2g23bj] {
    font: 600 13px/17px var(--font-family);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-tenant-sub[b-noeu2g23bj] {
    font: 500 11px/14px var(--font-family);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-tenant-chevron[b-noeu2g23bj] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.selector-tenant-chevron-abierto[b-noeu2g23bj] {
    transform: rotate(180deg);
}

/* Barra compacta (<html data-menu-compacto>; marco de Design: html[data-tv-rail] .tvm-ctxb, .tvm-ctxt y .tvm-ctxb>svg
   ocultos y padding 8px 0): solo queda el avatar de la empresa gestionada, centrado en el disparador. */
/* Solo en la barra lateral (.barra-lateral): el selector del cajón móvil va siempre completo, aunque <html> lleve
   data-menu-compacto de una sesión de escritorio. */
html[data-menu-compacto] .barra-lateral .selector-tenant-disparador[b-noeu2g23bj] {
    justify-content: center;
    padding: 8px 0;
}

html[data-menu-compacto] .barra-lateral .selector-tenant-disparador .selector-tenant-texto[b-noeu2g23bj],
html[data-menu-compacto] .barra-lateral .selector-tenant-disparador .selector-tenant-chevron[b-noeu2g23bj] {
    display: none;
}

/* Cierra al pulsar fuera sin JS: un velo transparente bajo el panel. */
.selector-tenant-velo[b-noeu2g23bj] {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}

.selector-tenant-panel[b-noeu2g23bj] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* 300 px (Design): más ancha que la barra lateral (260 px), así que MainLayout.razor.css deja que la barra la
       desborde mientras está abierta. En pantallas estrechas no pasa del ancho disponible. */
    width: min(300px, calc(100vw - 16px));
    z-index: 30;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--color-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}

/* Título de la cartera y «+ Solicitar» en la misma fila (marco de Design). */
.selector-tenant-cabecera[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 8px 4px;
}

.selector-tenant-cabecera-titulo[b-noeu2g23bj] {
    flex: 1;
    margin: 0;
    font: 500 12px/16px var(--font-family);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.selector-tenant-solicitar[b-noeu2g23bj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-full);
    color: var(--color-primary-500);
    font: 600 11px/14px var(--font-family);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.selector-tenant-solicitar:hover[b-noeu2g23bj] {
    background: var(--color-primary-50);
}

/* Buscador: extra de la aplicación que el marco de Design no trae (se conserva). */
.selector-tenant-busqueda[b-noeu2g23bj] {
    width: 100%;
    margin: 0 0 4px;
    padding: var(--space-2) var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-control);
    border-radius: var(--radius-md);
}

.selector-tenant-fila[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: 500 13px/17px var(--font-family);
    text-align: left;
    cursor: pointer;
}

/* En una fila el nombre pesa como el resto de la fila (500); en el disparador, 600. */
.selector-tenant-fila .selector-tenant-nombre[b-noeu2g23bj] {
    font: 500 13px/17px var(--font-family);
}

.selector-tenant-fila .selector-tenant-sub[b-noeu2g23bj] {
    font: 400 12px/16px var(--font-family);
}

.selector-tenant-fila:hover[b-noeu2g23bj] {
    background: var(--color-surface-hover);
}

.selector-tenant-fila-activa[b-noeu2g23bj] {
    /* Sin franja lateral: el fondo de fila (el mismo del puntero, como el aria-current del marco de Design) y la
       marca de verificación distinguen la activa. */
    background: var(--color-surface-hover);
}

.selector-tenant-separador[b-noeu2g23bj] {
    height: 0;
    margin: 6px 0;
    border-top: 1px solid var(--color-border);
}

.selector-tenant-marca[b-noeu2g23bj] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-primary-600);
}

.selector-tenant-vacio[b-noeu2g23bj] {
    margin: 0;
    padding: var(--space-2);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.selector-tenant-grupo[b-noeu2g23bj] {
    margin: 10px 8px 4px;
    font: 500 12px/16px var(--font-family);
    color: var(--color-text-muted);
}

/* Pendientes por empresa gestionada: dato de apoyo, el nombre sigue mandando. */
.selector-tenant-contador[b-noeu2g23bj] {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    font: 600 11px/14px var(--font-family);
    text-align: center;
}

/* Fila con su estrella de fijar: el botón de envío ocupa el ancho y la estrella va al lado. */
.selector-tenant-fila-envoltorio[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.selector-tenant-fila-envoltorio .selector-tenant-fila[b-noeu2g23bj] {
    flex: 1;
    min-width: 0;
    width: auto;
}

.selector-tenant-fijar[b-noeu2g23bj] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-border-strong);
    cursor: pointer;
}

.selector-tenant-fijar:hover[b-noeu2g23bj] {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

.selector-tenant-fijar:focus-visible[b-noeu2g23bj] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

/* Fijada: estrella llena en ámbar (--color-warning-500, como el marco de Design). Se pinta con fill y
   stroke y no con color: ese token ya hace de fondo en otras pantallas y TokensDeTexto lo vigila como
   texto. El estado también lo dice aria-pressed, no solo el color. */
.selector-tenant-fijar[aria-pressed='true'][b-noeu2g23bj]  svg {
    fill: var(--color-warning-500);
    stroke: var(--color-warning-500);
}

/* Atajo de las cinco primeras fijadas, en lugar de dato de apoyo: el nombre sigue mandando. */
.selector-tenant-atajo[b-noeu2g23bj] {
    flex-shrink: 0;
    padding: 1px 5px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    color: var(--color-text-muted);
    font: 600 10px/14px var(--font-family);
}
/* /Components/Layout/SelectorIdioma.razor.rz.scp.css */
.selector-idioma-envoltura[b-t50nleel7q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.selector-idioma[b-t50nleel7q] {
    font: var(--font-body-md);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.selector-idioma:focus-visible[b-t50nleel7q] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.selector-idioma-formulario[b-t50nleel7q] {
    display: inline-flex;
}
/* /Components/Layout/SelectorTema.razor.rz.scp.css */
.selector-tema-envoltura[b-1cxwfvgwf2] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

/* El cielo y la noche son una ilustración: no cambian con el tema de la app
   (el interruptor es el mismo en claro y en oscuro), así que sus colores van
   como variables locales y no como tokens. Lo que SÍ sigue al tema es el
   borde (--border-control), que da a la pista el contraste de componente de
   interfaz (WCAG 1.4.11) contra la superficie en ambos temas. */
.selector-tema[b-1cxwfvgwf2] {
    --st-ancho: 72px;
    --st-alto: 34px;
    --st-margen: 3px;
    --st-cielo-alto: #8fc4f0;
    --st-cielo-bajo: #cfe6f8;
    --st-noche-alto: #0f1824;
    --st-noche-bajo: #233449;
    --st-sol: #f7c23a;
    --st-luna: #dfe5ee;
    --st-nube: #ffffff;
    --st-crater: #b8c1cf;

    position: relative;
    box-sizing: border-box;
    width: var(--st-ancho);
    height: var(--st-alto);
    padding: 0;
    border: var(--border-control);
    border-radius: 999px;
    background: linear-gradient(var(--st-cielo-alto), var(--st-cielo-bajo));
    overflow: hidden;
    cursor: pointer;
}

.selector-tema[b-1cxwfvgwf2]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--st-noche-alto), var(--st-noche-bajo));
    opacity: 0;
    transition: opacity 0.5s;
}

.selector-tema[aria-checked="true"][b-1cxwfvgwf2]::before {
    opacity: 1;
}

.selector-tema:focus-visible[b-1cxwfvgwf2] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.selector-tema-pulgar[b-1cxwfvgwf2] {
    position: absolute;
    top: var(--st-margen);
    left: var(--st-margen);
    width: calc(var(--st-alto) - var(--st-margen) * 2 - 2px);
    height: calc(var(--st-alto) - var(--st-margen) * 2 - 2px);
    border-radius: 50%;
    background: var(--st-sol);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    overflow: hidden;
    z-index: 3;
    transition: left 0.45s cubic-bezier(0.5, 0.1, 0.2, 1.15), background 0.4s;
}

.selector-tema[aria-checked="true"] .selector-tema-pulgar[b-1cxwfvgwf2] {
    left: calc(var(--st-ancho) - var(--st-alto) + var(--st-margen));
    background: var(--st-luna);
}

.selector-tema:hover .selector-tema-pulgar[b-1cxwfvgwf2] {
    filter: brightness(1.06);
}

.crater[b-1cxwfvgwf2] {
    position: absolute;
    border-radius: 50%;
    background: var(--st-crater);
    opacity: 0;
    transition: opacity 0.3s 0.15s;
}

.selector-tema[aria-checked="true"] .crater[b-1cxwfvgwf2] {
    opacity: 1;
}

.crater-1[b-1cxwfvgwf2] { left: 14px; top: 6px; width: 7px; height: 7px; }
.crater-2[b-1cxwfvgwf2] { left: 8px; top: 16px; width: 5px; height: 5px; }
.crater-3[b-1cxwfvgwf2] { left: 18px; top: 19px; width: 4px; height: 4px; }

.selector-tema-decoracion[b-1cxwfvgwf2] {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.nube[b-1cxwfvgwf2] {
    position: absolute;
    border-radius: 999px;
    background: var(--st-nube);
    opacity: 0.95;
    transition: transform 0.45s, opacity 0.4s;
}

.selector-tema[aria-checked="true"] .nube[b-1cxwfvgwf2] {
    transform: translateY(24px);
    opacity: 0;
}

.nube-1[b-1cxwfvgwf2] { left: 12px; bottom: -6px; width: 26px; height: 12px; }
.nube-2[b-1cxwfvgwf2] { left: 30px; bottom: -4px; width: 22px; height: 11px; }
.nube-3[b-1cxwfvgwf2] { left: 46px; bottom: -5px; width: 20px; height: 10px; }

.estrella[b-1cxwfvgwf2] {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}

.selector-tema[aria-checked="true"] .estrella[b-1cxwfvgwf2] {
    opacity: 0.9;
    transform: scale(1);
}

.estrella-1[b-1cxwfvgwf2] { left: 12px; top: 9px; }
.estrella-2[b-1cxwfvgwf2] { left: 24px; top: 21px; }
.estrella-3[b-1cxwfvgwf2] { left: 32px; top: 8px; width: 3px; height: 3px; }
.estrella-4[b-1cxwfvgwf2] { left: 42px; top: 19px; }

@media (prefers-reduced-motion: reduce) {
    .selector-tema[b-1cxwfvgwf2]::before,
    .selector-tema-pulgar[b-1cxwfvgwf2],
    .crater[b-1cxwfvgwf2],
    .nube[b-1cxwfvgwf2],
    .estrella[b-1cxwfvgwf2] {
        transition: none;
    }
}
/* /Components/Layout/SelectorVistaDemo.razor.rz.scp.css */
.selector-vista-demo[b-4j1fizeuom],
.selector-vista-demo-panel[b-4j1fizeuom] {
    display: block;
}

.selector-vista-demo-select[b-4j1fizeuom] {
    font: var(--font-body-md);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.selector-vista-demo-select:focus-visible[b-4j1fizeuom] {
    outline: var(--border-focus);
    outline-offset: 1px;
}
/* /Components/Layout/SelectorVistaVocabulario.razor.rz.scp.css */
.selector-vista-vocabulario[b-pkzwshbur7] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.selector-vista-vocabulario:focus-visible[b-pkzwshbur7] {
    outline: var(--border-focus);
    outline-offset: 1px;
}
/* /Components/Layout/TrazaSoporte.razor.rz.scp.css */
/* Franja permanente durante una sesión de soporte. Deliberadamente visible y no un badge
   discreto: quien opera datos de otra organización tiene que verlo sin buscarlo, y saber que queda
   registrado. Su aspecto base (tono de advertencia) lo pone la banda única de la cabecera
   (MainLayout.razor.css); aquí solo sus enlaces. */
.form-salir-sesion-soporte[b-4dny85a18u] {
    display: inline;
    margin-inline-start: var(--space-2);
}

.enlace-salir-sesion-soporte[b-4dny85a18u] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.enlace-logo-organizacion-soporte[b-4dny85a18u] {
    margin-inline-start: var(--space-2);
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}
/* /Components/Layout/VistasTecnicas.razor.rz.scp.css */
.vistas-cabecera[b-xje4z8uvo8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-default);
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font: var(--font-body-md);
}

.vistas-cabecera small[b-xje4z8uvo8] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.vistas-selectores[b-xje4z8uvo8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-2);
}

/* /Components/Legal/PoliticaPrivacidad.razor.rz.scp.css */
.documento-legal[b-aks6mr9qcl] {
    width: min(100%, 1180px);
    margin: var(--space-10) auto;
    padding: 0 var(--space-6) var(--space-10);
}

.documento-legal-cabecera[b-aks6mr9qcl] {
    max-width: 72ch;
    margin-bottom: var(--space-8);
}

.documento-legal-eyebrow[b-aks6mr9qcl] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-label);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.documento-legal h1[b-aks6mr9qcl],
.documento-legal h2[b-aks6mr9qcl],
.documento-legal p[b-aks6mr9qcl] {
    margin-top: 0;
}

.documento-legal h1[b-aks6mr9qcl] {
    margin-bottom: 0;
    color: var(--color-text);
    font: var(--font-heading-xl);
    text-wrap: balance;
}

.documento-legal-disposicion[b-aks6mr9qcl] {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 72ch);
    justify-content: space-between;
    gap: var(--space-10);
}

.documento-legal-indice[b-aks6mr9qcl] {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-border);
}

.documento-legal-indice a[b-aks6mr9qcl] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    line-height: 1.4;
}

.documento-legal-indice a:hover[b-aks6mr9qcl] {
    color: var(--color-primary-500);
}

.documento-legal-contenido[b-aks6mr9qcl] {
    min-width: 0;
    color: var(--color-text);
    font: var(--font-body-lg);
    line-height: 1.6;
}

.documento-legal-contenido > h2[b-aks6mr9qcl] {
    margin: var(--space-10) 0 var(--space-3);
    scroll-margin-top: var(--space-6);
    font: var(--font-heading-md);
    line-height: 1.3;
}

.documento-legal-contenido > h2:first-of-type[b-aks6mr9qcl] {
    margin-top: 0;
}

.documento-legal-contenido p[b-aks6mr9qcl],
.documento-legal-contenido ul[b-aks6mr9qcl],
.documento-legal-contenido ol[b-aks6mr9qcl],
.documento-legal-contenido table[b-aks6mr9qcl] {
    margin-bottom: var(--space-5);
}

.documento-legal-contenido li + li[b-aks6mr9qcl] {
    margin-top: var(--space-2);
}

.documento-legal-aviso[b-aks6mr9qcl],
.documento-legal-pendiente[b-aks6mr9qcl] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    border-left: 3px solid var(--color-warning-500);
    color: var(--color-text-muted);
}

.documento-legal-tabla[b-aks6mr9qcl] {
    width: 100%;
    border-collapse: collapse;
    font: var(--font-body-md);
}

.documento-legal-tabla th[b-aks6mr9qcl],
.documento-legal-tabla td[b-aks6mr9qcl] {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.documento-legal-tabla th[b-aks6mr9qcl] {
    background: var(--color-surface-subtle);
    font: var(--font-label);
}

.documento-legal-pie[b-aks6mr9qcl] {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.documento-legal-enlace[b-aks6mr9qcl] {
    color: var(--color-primary-500);
    font: var(--font-label);
}

@media (max-width: 800px) {
    .documento-legal[b-aks6mr9qcl] { margin-top: var(--space-6); padding-inline: var(--space-4); }
    .documento-legal-disposicion[b-aks6mr9qcl] { display: block; }
    .documento-legal-indice[b-aks6mr9qcl] { position: static; margin-bottom: var(--space-8); }
    .documento-legal-tabla[b-aks6mr9qcl] { display: block; overflow-x: auto; }
}
/* /Components/Legal/TerminosCondiciones.razor.rz.scp.css */
.documento-legal[b-szyp224y3b] {
    width: min(100%, 1180px);
    margin: var(--space-10) auto;
    padding: 0 var(--space-6) var(--space-10);
}

.documento-legal-cabecera[b-szyp224y3b] { max-width: 72ch; margin-bottom: var(--space-8); }

.documento-legal-eyebrow[b-szyp224y3b] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-label);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.documento-legal h1[b-szyp224y3b],
.documento-legal h2[b-szyp224y3b],
.documento-legal p[b-szyp224y3b] { margin-top: 0; }

.documento-legal h1[b-szyp224y3b] {
    margin-bottom: 0;
    color: var(--color-text);
    font: var(--font-heading-xl);
    text-wrap: balance;
}

.documento-legal-disposicion[b-szyp224y3b] {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 72ch);
    justify-content: space-between;
    gap: var(--space-10);
}

.documento-legal-indice[b-szyp224y3b] {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-border);
}

.documento-legal-indice a[b-szyp224y3b] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    line-height: 1.4;
}

.documento-legal-indice a:hover[b-szyp224y3b] { color: var(--color-primary-500); }

.documento-legal-contenido[b-szyp224y3b] {
    min-width: 0;
    color: var(--color-text);
    font: var(--font-body-lg);
    line-height: 1.6;
}

.documento-legal-contenido > h2[b-szyp224y3b] {
    margin: var(--space-10) 0 var(--space-3);
    scroll-margin-top: var(--space-6);
    font: var(--font-heading-md);
    line-height: 1.3;
}

.documento-legal-contenido > h2:first-of-type[b-szyp224y3b] { margin-top: 0; }

.documento-legal-contenido p[b-szyp224y3b],
.documento-legal-contenido ul[b-szyp224y3b],
.documento-legal-contenido ol[b-szyp224y3b],
.documento-legal-contenido table[b-szyp224y3b] { margin-bottom: var(--space-5); }

.documento-legal-contenido li + li[b-szyp224y3b] { margin-top: var(--space-2); }

.documento-legal-aviso[b-szyp224y3b],
.documento-legal-pendiente[b-szyp224y3b] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    border-left: 3px solid var(--color-warning-500);
    color: var(--color-text-muted);
}

.documento-legal-tabla[b-szyp224y3b] {
    width: 100%;
    border-collapse: collapse;
    font: var(--font-body-md);
}

.documento-legal-tabla th[b-szyp224y3b],
.documento-legal-tabla td[b-szyp224y3b] {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.documento-legal-tabla th[b-szyp224y3b] {
    background: var(--color-surface-subtle);
    font: var(--font-label);
}

.documento-legal-pie[b-szyp224y3b] {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.documento-legal-enlace[b-szyp224y3b] { color: var(--color-primary-500); font: var(--font-label); }

@media (max-width: 800px) {
    .documento-legal[b-szyp224y3b] { margin-top: var(--space-6); padding-inline: var(--space-4); }
    .documento-legal-disposicion[b-szyp224y3b] { display: block; }
    .documento-legal-indice[b-szyp224y3b] { position: static; margin-bottom: var(--space-8); }
    .documento-legal-tabla[b-szyp224y3b] { display: block; overflow-x: auto; }
}
/* /Components/Pages/PaginaEstadoSistema.razor.rz.scp.css */
/* Centrado vertical y el fondo ya los pone AuthLayout (min-height:100vh,
   display:flex, align-items/justify-content:center) — las tres páginas que
   usan este componente van con @layout AuthLayout, la misma pieza que ya
   centraba Login/PendienteDeRol. Este componente solo apila sus tres bloques
   (marca, tarjeta, pie legal) dentro de ese hueco. */
.pagina-estado-sistema[b-1zxrbtud2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    text-align: center;
}

.marca-estado-sistema[b-1zxrbtud2t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
}

.marca-estado-sistema:hover[b-1zxrbtud2t] {
    color: var(--color-text);
}

.marca-estado-sistema-marca[b-1zxrbtud2t] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary-500);
}

.marca-estado-sistema-nombre[b-1zxrbtud2t] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* El div que pinta <Tarjeta> es de Tarjeta.razor, no de este componente: el
   contenido que le pasamos como ChildContent conserva el scope de ESTE
   archivo, pero el propio contenedor con la clase que le pasamos por
   Class="..." es de Tarjeta. ::deep es la misma técnica que ya usa
   EstadoVacio.razor.css para alcanzar el <svg> que pinta <Icono>. */
[b-1zxrbtud2t] .tarjeta-estado-sistema {
    width: 100%;
    max-width: 560px;
    box-shadow: var(--shadow-overlay);
}

[b-1zxrbtud2t] .tarjeta-estado-sistema-error {
    border-top: 3px solid var(--color-danger-500);
}

[b-1zxrbtud2t] .tarjeta-estado-sistema-no-encontrado {
    border-top: 3px solid var(--color-border-strong);
}

[b-1zxrbtud2t] .tarjeta-estado-sistema-acceso-denegado {
    border-top: 3px solid var(--color-info-500);
}

.referencia-tecnica-estado-sistema[b-1zxrbtud2t] {
    width: 100%;
    margin-top: var(--space-2);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
}

.referencia-tecnica-etiqueta[b-1zxrbtud2t] {
    flex: none;
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.referencia-tecnica-valor[b-1zxrbtud2t] {
    flex: 1;
    min-width: 0;
    font: 600 0.8125rem/1.125rem var(--font-family);
    letter-spacing: 0.04em;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referencia-tecnica-ayuda[b-1zxrbtud2t] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    max-width: 52ch;
    margin: 0;
}

.acciones-estado-sistema[b-1zxrbtud2t] {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pie-legal-estado-sistema[b-1zxrbtud2t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.pie-legal-estado-sistema a[b-1zxrbtud2t] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.pie-legal-estado-sistema a:hover[b-1zxrbtud2t] {
    color: var(--color-text);
}
/* /Components/Workspace/CampoInfo.razor.rz.scp.css */
.campo-info[b-38zkzdf3on] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    border-bottom: var(--border-default);
}

.campo-info:last-child[b-38zkzdf3on] {
    border-bottom: none;
}

.campo-info-etiqueta[b-38zkzdf3on] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.campo-info-valor[b-38zkzdf3on] {
    font: var(--font-body-md);
    color: var(--color-text);
}

.campo-info-vacio[b-38zkzdf3on] {
    color: var(--color-text-muted);
}
/* /Components/Workspace/ContextWorkspace.razor.rz.scp.css */
.workspace-panel[b-3oqxopvmxs] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    /* Nivel OVERLAY, no Elevated (ODM-01, decidido por el propietario del
       producto el 2026-08-09). El criterio no es que sea `position: fixed`
       por si solo, sino que crea una capa SOBRE el contenido existente y
       compite con el por el plano visual: Subtle es superficie interna,
       Elevated es elevacion dentro del flujo, y Overlay es lo que se
       superpone al contexto actual.
       La sombra NO se anade aqui: ya existia antes de esta migracion, y
       Overlay es el unico nivel donde 06 § 5 la permite. */
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: workspace-entrar-b-3oqxopvmxs var(--motion-transition) var(--ease-fluid);
}

.workspace-panel:focus-visible[b-3oqxopvmxs],
.workspace-panel:focus[b-3oqxopvmxs] {
    outline: none;
}

@keyframes workspace-entrar-b-3oqxopvmxs {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel[b-3oqxopvmxs] {
        animation: none;
    }
}

.workspace-header[b-3oqxopvmxs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.workspace-header-nav[b-3oqxopvmxs] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex-wrap: wrap;
}

.workspace-boton-volver[b-3oqxopvmxs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.workspace-boton-volver:hover[b-3oqxopvmxs] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.workspace-boton-volver:focus-visible[b-3oqxopvmxs] {
    outline: var(--border-focus);
}

.workspace-header-acciones[b-3oqxopvmxs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.workspace-copiar-enlace[b-3oqxopvmxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.workspace-copiar-enlace:hover[b-3oqxopvmxs] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.workspace-copiar-enlace:focus-visible[b-3oqxopvmxs] {
    outline: var(--border-focus);
}

.workspace-cerrar[b-3oqxopvmxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    flex-shrink: 0;
}

.workspace-cerrar:hover[b-3oqxopvmxs] {
    color: var(--color-text);
}

.workspace-cerrar:focus-visible[b-3oqxopvmxs] {
    outline: var(--border-focus);
}

.workspace-cuerpo[b-3oqxopvmxs] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

@media (max-width: 1023px) {
    .workspace-panel[b-3oqxopvmxs] {
        max-width: 420px;
    }
}

@media (max-width: 767px) {
    .workspace-panel[b-3oqxopvmxs] {
        max-width: 100%;
    }
}
/* /Components/Workspace/FilaEntidadRelacionada.razor.rz.scp.css */
.workspace-lista-entidades[b-q6ibt9cg5y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.workspace-fila-entidad[b-q6ibt9cg5y] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background-color: var(--color-bg);
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.workspace-fila-entidad:hover[b-q6ibt9cg5y] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.workspace-fila-entidad:focus-visible[b-q6ibt9cg5y] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.workspace-fila-entidad-texto[b-q6ibt9cg5y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workspace-fila-entidad-titulo[b-q6ibt9cg5y] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-fila-entidad-subtitulo[b-q6ibt9cg5y] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Components/Workspace/PestanaAgendaContactos.razor.rz.scp.css */
.agenda-encabezado[b-pg5iniptsv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.agenda-resumen[b-pg5iniptsv] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-small);
}

.agenda-lista[b-pg5iniptsv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.agenda-contacto[b-pg5iniptsv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.agenda-contacto-datos[b-pg5iniptsv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* Un correo largo no tiene espacios por donde partir: sin esto desbordaba la tarjeta. */
.agenda-contacto-nombre[b-pg5iniptsv],
.agenda-contacto-email[b-pg5iniptsv],
.agenda-contacto-cargo[b-pg5iniptsv],
.agenda-contacto-telefono[b-pg5iniptsv] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.agenda-contacto-nombre[b-pg5iniptsv] {
    font: var(--font-label);
}

.agenda-contacto-email[b-pg5iniptsv],
.agenda-contacto-cargo[b-pg5iniptsv],
.agenda-contacto-telefono[b-pg5iniptsv] {
    color: var(--color-text-muted);
    font: var(--font-small);
}

.agenda-contacto-etiquetas[b-pg5iniptsv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.agenda-contacto-acciones[b-pg5iniptsv] {
    display: flex;
    gap: var(--space-2);
}

/* Aviso de configuración incompleta, no de error: por eso texto atenuado y
   no el tono de peligro reservado al semáforo documental (06 § 4). */
.agenda-aviso[b-pg5iniptsv] {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font: var(--font-small);
}

.agenda-vacio-compacto[b-pg5iniptsv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    font: var(--font-small);
    color: var(--color-text-muted);
}
/* /Components/Workspace/PestanaDocumentacion.razor.rz.scp.css */
.workspace-acciones-documentacion[b-pjtwg4fywm] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-3);
}
/* /Components/Workspace/PestanaHistorial.razor.rz.scp.css */
/* Tarjeta contenedora (mismo borde, radio y fondo que lista-relaciones-tarjeta): cada evento es una fila con la
   acción a la izquierda, el autor a continuación y la fecha alineada a la derecha. */
.workspace-historial-lista[b-59jl5wrbj5] {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.workspace-historial-item[b-59jl5wrbj5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-default);
}

.workspace-historial-item:last-child[b-59jl5wrbj5] {
    border-bottom: none;
}

.workspace-historial-usuario[b-59jl5wrbj5] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--font-body-md);
    color: var(--color-text);
}

.workspace-historial-fecha[b-59jl5wrbj5] {
    font: var(--font-body-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    color: var(--color-text-muted);
}

/* Viewport estrecho (no el ancho del panel): la fecha pasa a su propia línea bajo el autor. */
@media (max-width: 480px) {
    .workspace-historial-item[b-59jl5wrbj5] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-1);
    }

    .workspace-historial-fecha[b-59jl5wrbj5] {
        grid-column: 2;
        text-align: left;
    }
}
/* /Features/Alertas/Pages/Alertas.razor.rz.scp.css */
/*
  Alertas Gen 2 (mockup «Alertas TALVEG.dc.html»). Solo tokens de
  wwwroot/css/tokens.css; tabla, filtros, badges y estados vacíos vienen del
  catálogo y de list-page.css.
*/

/* Procedencia: la lista la calcula el sistema, no una persona → cian de
   sistema (regla de agencia, DDL-009), no el azul de las acciones. */
.alertas-procedencia[b-00v76j1m88] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--font-body-sm);
    color: var(--color-system-text);
}

.alertas-procedencia-punto[b-00v76j1m88] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-system-indicator);
}

.alertas-barra-filtros[b-00v76j1m88] {
    align-items: flex-end;
}

.alertas-agrupar[b-00v76j1m88] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.alertas-agrupar-etiqueta[b-00v76j1m88] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.alertas-grupos[b-00v76j1m88] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.alertas-grupo[b-00v76j1m88] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Vencido y Falta: lo que ya no tiene margen. */
.alertas-grupo-critico[b-00v76j1m88] {
    border-color: var(--color-danger-500);
}

.alertas-grupo-cabecera[b-00v76j1m88] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: none;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.alertas-grupo-cabecera:hover[b-00v76j1m88] {
    background-color: var(--color-surface-hover);
}

.alertas-grupo-cabecera:focus-visible[b-00v76j1m88] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.alertas-grupo-chevron[b-00v76j1m88] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.alertas-grupo-chevron-cerrado[b-00v76j1m88] {
    transform: rotate(-90deg);
}

.alertas-grupo-titulo[b-00v76j1m88] {
    font: var(--font-heading-sm);
}

.alertas-grupo-meta[b-00v76j1m88] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.alertas-tabla-desplazable[b-00v76j1m88] {
    overflow-x: auto;
}

.alertas-lote-ultima[b-00v76j1m88] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/ApiKeys/Pages/ClavesApi.razor.rz.scp.css */
.claves-api[b-0p254w1jzf] { max-width: 960px; }
.claves-api-panel[b-0p254w1jzf] { display: flex; flex-direction: column; gap: 1rem; }
.claves-api-acciones[b-0p254w1jzf] { display: flex; justify-content: flex-end; }
.claves-api-tabla-contenedor[b-0p254w1jzf] { overflow-x: auto; border: 1px solid var(--color-border); border-radius: .875rem; background: var(--color-surface); }
.claves-api-tabla[b-0p254w1jzf] { width: 100%; min-width: 720px; border-collapse: collapse; }
.claves-api-tabla th[b-0p254w1jzf], .claves-api-tabla td[b-0p254w1jzf] { white-space: nowrap; }
.claves-api-nombre[b-0p254w1jzf] { font-weight: 600; color: var(--color-text); }
.claves-api-accion[b-0p254w1jzf] { text-align: right; }
.clave-generada[b-0p254w1jzf] { display: flex; flex-direction: column; gap: .25rem; }
.clave-generada code[b-0p254w1jzf] { overflow-wrap: anywhere; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: .625rem; background: var(--color-surface-subtle); user-select: all; }
.aviso-revocacion[b-0p254w1jzf] { margin: 0; padding: .75rem 1rem; border: 1px solid #f59e0b; border-radius: .625rem; background: #fff8eb; color: #b45309; font-weight: 600; }
.solo-lector[b-0p254w1jzf] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 48rem) { .claves-api-acciones[b-0p254w1jzf] { justify-content: stretch; } .claves-api-acciones[b-0p254w1jzf]  button { width: 100%; } }
/* /Features/AsistenteIa/AsistenteIa.razor.rz.scp.css */
/*
  Panel lateral abatible (no la tarjeta flotante bottom-right anterior) —
  mismo patrón visual y stacking que Drawer.razor.css (superposición +
  panel de altura completa anclado a la derecha), para que abrir el
  Asistente se sienta consistente con el resto de paneles deslizantes de la
  app. z-index 1030: un escalón por debajo de Drawer (1040) y Modal (1050)
  — si el usuario abre un Drawer/Modal mientras el Asistente está abierto,
  ese contenido transaccional debe quedar por encima, nunca al revés.
*/
.asistente-superposicion[b-85fwb1g57h] {
    position: fixed;
    inset: 0;
    background-color: var(--color-scrim);
    display: flex;
    justify-content: flex-end;
    z-index: 1030;
}

/* Nivel Overlay (06 § 3): panel deslizante con superposición propia. */
.asistente-panel[b-85fwb1g57h] {
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    width: 100%;
    max-width: 440px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: entrar-desde-derecha-b-85fwb1g57h var(--motion-transition) var(--ease-fluid);
}

@keyframes entrar-desde-derecha-b-85fwb1g57h {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .asistente-panel[b-85fwb1g57h] {
        animation: none;
    }
}

/* Móvil: el panel ocupa todo el ancho (igual que Drawer en viewports estrechos) — no tiene sentido un max-width de escritorio en una pantalla de 360px. */
@media (max-width: 480px) {
    .asistente-panel[b-85fwb1g57h] {
        max-width: 100%;
    }
}

.asistente-cabecera[b-85fwb1g57h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-default);
}

.asistente-cabecera h2[b-85fwb1g57h] {
    font: var(--font-heading-sm);
    margin: 0;
}

.asistente-cerrar[b-85fwb1g57h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
}

.asistente-descripcion[b-85fwb1g57h] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    padding: 0 var(--space-5) var(--space-3);
    margin: 0;
}

.asistente-mensajes[b-85fwb1g57h] {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.asistente-mensaje-vacio[b-85fwb1g57h] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-6);
}

.asistente-mensaje[b-85fwb1g57h] {
    font: var(--font-body-md);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    max-width: 85%;
    white-space: pre-wrap;
}

.asistente-mensaje-usuario[b-85fwb1g57h] {
    align-self: flex-end;
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.asistente-mensaje-asistente[b-85fwb1g57h] {
    align-self: flex-start;
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* Las respuestas del asistente son HTML real (ver RenderizarMarkdown en
   AsistenteIa.razor.cs) — un bloque casi a todo el ancho lee mejor una
   respuesta estructurada (títulos, listas) que una burbuja de chat
   angosta, a diferencia del mensaje corto del usuario. */
.asistente-mensaje-markdown[b-85fwb1g57h] {
    max-width: 100%;
    white-space: normal;
}

.asistente-mensaje-markdown :first-child[b-85fwb1g57h] {
    margin-top: 0;
}

.asistente-mensaje-markdown :last-child[b-85fwb1g57h] {
    margin-bottom: 0;
}

.asistente-mensaje-markdown h2[b-85fwb1g57h] {
    font: var(--font-heading-sm);
    margin: var(--space-3) 0 var(--space-1);
}

.asistente-mensaje-markdown ul[b-85fwb1g57h],
.asistente-mensaje-markdown ol[b-85fwb1g57h] {
    margin: var(--space-1) 0;
    padding-left: var(--space-5);
}

.asistente-mensaje-markdown p[b-85fwb1g57h] {
    margin: var(--space-1) 0;
}

.asistente-mensaje-cargando[b-85fwb1g57h] {
    color: var(--color-text-muted);
    font-style: italic;
}

.asistente-mensaje-error[b-85fwb1g57h] {
    align-self: stretch;
    font: var(--font-body-sm);
    color: var(--color-danger-700);
    text-align: center;
    padding: var(--space-2);
}

.asistente-entrada[b-85fwb1g57h] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
}

.asistente-textarea[b-85fwb1g57h] {
    flex: 1;
    resize: none;
    font: var(--font-body-md);
    font-family: var(--font-family);
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1,44:1). */
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    max-height: 120px;
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* El foco es un outline solido de 2px y NUNCA se sustituye por un efecto
   (02 § 8, 08 § 3.2). Cambiar el borde de 1px a 2px ademas desplazaba el
   contenido al enfocar. Mismo patron que CampoTextarea del sistema. */
.asistente-textarea:focus-visible[b-85fwb1g57h] {
    outline: var(--border-focus);
    outline-offset: -1px;
}

.asistente-boton-enviar[b-85fwb1g57h] {
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font: var(--font-body-md);
    cursor: pointer;
    white-space: nowrap;
}

.asistente-boton-enviar:disabled[b-85fwb1g57h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.asistente-cabecera-acciones[b-85fwb1g57h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.asistente-cerrar[aria-pressed="true"][b-85fwb1g57h] {
    color: var(--color-primary-700);
}

.asistente-cerrar:focus-visible[b-85fwb1g57h],
.asistente-modo:focus-visible[b-85fwb1g57h],
.asistente-borrador-descartar:focus-visible[b-85fwb1g57h] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.asistente-modos[b-85fwb1g57h] {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-3);
}

.asistente-modo[b-85fwb1g57h] {
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font: var(--font-body-sm);
    cursor: pointer;
}

.asistente-modo[aria-pressed="true"][b-85fwb1g57h] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-color: var(--color-primary-500);
}

.asistente-nota[b-85fwb1g57h] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    padding: 0 var(--space-5) var(--space-3);
    margin: 0;
}

.asistente-borradores[b-85fwb1g57h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.asistente-borrador[b-85fwb1g57h] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-hover);
    font: var(--font-body-md);
}

.asistente-borrador-estado[b-85fwb1g57h],
.asistente-borrador-fecha[b-85fwb1g57h] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.asistente-borrador-texto[b-85fwb1g57h] {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
}

.asistente-borrador-descartar[b-85fwb1g57h] {
    border: none;
    background: none;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    cursor: pointer;
}
/* /Features/AsistenteIa/BotonAsistenteIa.razor.rz.scp.css */
.boton-asistente-ia[b-9jttj4fuiv] {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.boton-asistente-ia:hover[b-9jttj4fuiv] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .boton-asistente-ia[b-9jttj4fuiv] {
        transition: none;
    }

    .boton-asistente-ia:hover[b-9jttj4fuiv] {
        transform: none;
    }
}
/* /Features/AsistenteIa/PlanAsistente.razor.rz.scp.css */
/*
  Plan del agente («Asistente TALVEG.dc.html»). Menos cajas: fondo suave y una
  línea de acento a la izquierda que dice el estado (azul listo, ámbar borrador,
  rojo bloqueado). Solo tokens del sistema de diseño.
*/
.plan[b-ayjhd0jk7e] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    font: var(--font-body-md);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.plan-borrador[b-ayjhd0jk7e] {
    box-shadow: inset 3px 0 0 var(--color-warning-500);
}

.plan-bloqueado[b-ayjhd0jk7e] {
    box-shadow: inset 3px 0 0 var(--color-danger-500);
}

.plan-cerrado[b-ayjhd0jk7e] {
    box-shadow: none;
    gap: var(--space-1);
}

.plan:focus-visible[b-ayjhd0jk7e] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.plan-cabecera[b-ayjhd0jk7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.plan-chip[b-ayjhd0jk7e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 0 var(--space-3) 0 var(--space-1);
    min-height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font: var(--font-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-chip-bloqueado[b-ayjhd0jk7e] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
}

.plan-chip-ini[b-ayjhd0jk7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    flex: none;
}

.plan-pastilla[b-ayjhd0jk7e] {
    flex: none;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-caption);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.plan-pastilla-borrador[b-ayjhd0jk7e] {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

.plan-pastilla-bloqueado[b-ayjhd0jk7e] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
}

.plan-titulo-bloque[b-ayjhd0jk7e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-titulo[b-ayjhd0jk7e] {
    font: var(--font-label);
}

.plan-subtitulo[b-ayjhd0jk7e],
.plan-nota[b-ayjhd0jk7e] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    margin: 0;
}

.plan-ok[b-ayjhd0jk7e] {
    color: var(--color-success-700);
    font-weight: 700;
}

.plan-aviso[b-ayjhd0jk7e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.plan-aviso-peligro[b-ayjhd0jk7e] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    box-shadow: inset 3px 0 0 var(--color-danger-500);
}

.plan-tenants[b-ayjhd0jk7e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.plan-opcion[b-ayjhd0jk7e] {
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font: var(--font-body-sm);
    cursor: pointer;
}

.plan-opcion[aria-pressed="true"][b-ayjhd0jk7e] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-color: var(--color-primary-500);
}

.plan-opcion:disabled[b-ayjhd0jk7e] {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan-opcion:focus-visible[b-ayjhd0jk7e],
.plan-confirmar:focus-visible[b-ayjhd0jk7e],
.plan-descartar:focus-visible[b-ayjhd0jk7e] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.plan-seccion[b-ayjhd0jk7e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.plan-seccion-titulo[b-ayjhd0jk7e] {
    font: var(--font-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.plan-dato[b-ayjhd0jk7e] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-2);
    padding: 2px var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
}

.plan-dato-falta[b-ayjhd0jk7e] {
    background-color: var(--color-warning-50);
}

.plan-dato-campo[b-ayjhd0jk7e] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    padding-top: 2px;
}

.plan-pasos[b-ayjhd0jk7e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.plan-pasos li[b-ayjhd0jk7e] {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--space-2);
}

.plan-paso-marca[b-ayjhd0jk7e] {
    color: var(--color-text-muted);
}

.plan-acciones[b-ayjhd0jk7e] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.plan-confirmar[b-ayjhd0jk7e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    font: var(--font-body-md);
    cursor: pointer;
}

.plan-confirmar[aria-disabled="true"][b-ayjhd0jk7e] {
    opacity: 0.5;
    cursor: not-allowed;
}

.plan-kbd[b-ayjhd0jk7e] {
    font: var(--font-caption);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
}

.plan-descartar[b-ayjhd0jk7e] {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font: var(--font-body-md);
    cursor: pointer;
}

.plan-descartar:disabled[b-ayjhd0jk7e] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Features/AtajosGlobales/AtajosGlobales.razor.rz.scp.css */
.chuleta-atajos[b-0kutoa19nd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chuleta-atajos h3[b-0kutoa19nd] {
    margin: 0 0 var(--space-2);
    font: var(--font-heading-sm);
}

.chuleta-atajos-fila[b-0kutoa19nd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.chuleta-atajos-fila kbd[b-0kutoa19nd] {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    font-family: monospace;
    font-size: 0.85em;
}

.chuleta-atajos-fila span[b-0kutoa19nd] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.chuleta-atajos-letras[b-0kutoa19nd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) 0;
}

.chuleta-atajos-letra[b-0kutoa19nd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.chuleta-atajos-letra kbd[b-0kutoa19nd] {
    min-width: 1.5rem;
    text-align: center;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    font-family: monospace;
    font-size: 0.85em;
}

.chuleta-atajos-nota[b-0kutoa19nd] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}
/* /Features/Auditoria/Pages/AccesosDocumentosSensibles.razor.rz.scp.css */
/* Los dos avisos bajo la entradilla: el alcance (neutro) y la puerta (ámbar). */
.accesos-sensibles-avisos[b-ll2idf2dlm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 900px;
    margin-bottom: var(--space-6);
}

.accesos-sensibles-alcance[b-ll2idf2dlm] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.accesos-sensibles-alcance strong[b-ll2idf2dlm] {
    color: var(--color-text);
}

.accesos-sensibles-punto[b-ll2idf2dlm] {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: var(--radius-full);
    background-color: var(--color-text-muted);
}

.accesos-sensibles-puerta[b-ll2idf2dlm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
}

.accesos-sensibles-puerta-titulo[b-ll2idf2dlm] {
    font: var(--font-label-md);
    color: var(--color-warning-700);
}

.accesos-sensibles-puerta p[b-ll2idf2dlm] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

/* La tabla se desplaza dentro de su marco en pantallas estrechas; la página no. */
.accesos-sensibles-marco-tabla[b-ll2idf2dlm] {
    overflow-x: auto;
}

.accesos-sensibles-tabla[b-ll2idf2dlm] {
    min-width: 56rem;
}

.accesos-sensibles-cuando[b-ll2idf2dlm] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.accesos-sensibles-quien[b-ll2idf2dlm] {
    white-space: nowrap;
}

/* Autor que Identity ya no encuentra: se atenúa para no leerse como una persona real. */
.accesos-sensibles-quien-no-resuelto[b-ll2idf2dlm] {
    color: var(--color-text-muted);
}

.accesos-sensibles-documento[b-ll2idf2dlm] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    word-break: break-all;
}

.accesos-sensibles-tipo[b-ll2idf2dlm] {
    color: var(--color-text-muted);
}

.accesos-sensibles-documento-titulo[b-ll2idf2dlm] {
    font-weight: 600;
    color: var(--color-text);
}
/* /Features/Auditoria/Pages/Auditoria.razor.rz.scp.css */
/* Nota bajo el badge de acción cuando el «Modificado» fue una baja lógica. */
.detalle-baja-logica[b-k9vzip1186] {
    display: block;
    margin-top: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Autor que Identity ya no encuentra: se atenúa para no leerse como una persona real. */
.usuario-no-resuelto[b-k9vzip1186] {
    color: var(--color-text-muted);
}

/* Cuenta afectada en una fila "Usuario"/"RolDeUsuario" — mismo tono discreto
   que el resto de detalles secundarios de esta tabla. */
.detalle-entidad-auditoria[b-k9vzip1186] {
    color: var(--color-text-muted);
}

.columna-acciones-auditoria[b-k9vzip1186],
.celda-acciones-auditoria[b-k9vzip1186] {
    text-align: right;
}

.sin-accion[b-k9vzip1186] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}
/* /Features/AuditoriaIa/Pages/AuditoriaIa.razor.rz.scp.css */
/*
  Solo clases que pinta AuditoriaIa.razor: el CSS aislado no viaja a otros
  componentes (trinquete ClasesDeCssAisladoNoViajanEntreComponentesTests).
*/

/* Once columnas no caben en un panel estrecho: desplaza la tabla, no la página. */
.tabla-auditoria-ia-desplazable[b-661bcartl9] {
    overflow-x: auto;
}

.tabla-auditoria-ia-desplazable .tabla-datos th[b-661bcartl9],
.tabla-auditoria-ia-desplazable .tabla-datos td[b-661bcartl9] {
    white-space: nowrap;
}

/* Numéricas a la derecha y con cifras de ancho fijo, para compararlas en vertical. */
.celda-numerica-auditoria-ia[b-661bcartl9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.celda-incidencias-auditoria-ia[b-661bcartl9] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
}

.sin-decision-auditoria-ia[b-661bcartl9] {
    color: var(--color-text-muted);
    border-bottom: 1px dotted var(--color-border-strong);
    cursor: help;
}

.fila-abierta-auditoria-ia td[b-661bcartl9] {
    background-color: var(--color-surface-hover);
}

.fila-detalle-auditoria-ia td[b-661bcartl9] {
    padding: 0;
    background-color: var(--color-system-tint);
    white-space: normal;
}

.detalle-auditoria-ia[b-661bcartl9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.detalle-auditoria-ia-datos[b-661bcartl9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.detalle-auditoria-ia-dato[b-661bcartl9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.detalle-auditoria-ia-dato dt[b-661bcartl9] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detalle-auditoria-ia-dato dd[b-661bcartl9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--font-body-md);
}

.detalle-auditoria-ia-codigo[b-661bcartl9] {
    font-family: monospace;
    overflow-wrap: anywhere;
}

.detalle-auditoria-ia-pie[b-661bcartl9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-default);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.detalle-auditoria-ia-pie a[b-661bcartl9] {
    font: var(--font-label);
}
/* /Features/Bandeja/Components/DrawerReclamacionLote.razor.rz.scp.css */
/* La tabla del lote vive dentro de una Tarjeta dentro de un Drawer (420 px como máximo, Drawer.razor.css):
   con el relleno de un listado a página completa (.tabla-datos, list-page.css) no cabe y el cuerpo
   del Drawer se desplazaba en horizontal. Aquí va compacta, y el nombre del Trabajador baja a una
   segunda línea de la celda del documento en vez de ocupar una columna. */
.tabla-lote-reclamacion th[b-lptfeyqrph],
.tabla-lote-reclamacion td[b-lptfeyqrph] {
    padding: var(--space-2);
}

/* Un tipo de documento o un nombre largos se parten antes que ensanchar la tabla. */
.lote-reclamacion-documento[b-lptfeyqrph] {
    overflow-wrap: anywhere;
}

.reclamacion-extra-campo[b-lptfeyqrph] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.reclamacion-extra-entrada[b-lptfeyqrph] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.reclamacion-extra-entrada .campo-input[b-lptfeyqrph] {
    flex: 1;
    min-width: 0;
}

.reclamacion-extra-lista[b-lptfeyqrph] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reclamacion-extra-lista li[b-lptfeyqrph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    overflow-wrap: anywhere;
}

.reclamacion-extra-quitar[b-lptfeyqrph] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font: var(--font-body);
    padding: 0 var(--space-1);
}

.lote-reclamacion-titular[b-lptfeyqrph] {
    display: block;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Bandeja/Components/GrupoCola.razor.rz.scp.css */
/*
  Sin `overflow: hidden`, a propósito. Los recuentos de la cabecera son
  VentanaContexto, cuyo panel se abre hacia arriba (position: absolute; bottom:
  100%): con el recorte, el panel del primer grupo de Inicio quedaba cortado
  por el borde superior de la tarjeta y se veía "detrás del fondo" (detectado en
  staging, 2026-09-21). El recorte solo servía para que el fondo de :hover de
  la cabecera respetara las esquinas redondeadas; eso lo hace ahora la propia
  cabecera con su radio.
*/
.grupo-cola[b-skh62uz786] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

/* Mi trabajo TALVEG.dc.html: el grupo que hoy impide entrar a un Centro lleva
   banda de 4 px en el borde izquierdo. Opt-in vía MarcarBloqueo — ver el
   comentario del parámetro. */
.grupo-cola-bloquea[b-skh62uz786] {
    border-left: 4px solid var(--color-danger-500);
}

.grupo-cola-cabecera[b-skh62uz786] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family);
    color: inherit;
    /* Un píxel menos que la tarjeta: el borde de 1 px ocupa el resto. */
    border-radius: calc(var(--radius-md) - 1px);
}

/* Abierta, el contenido cuelga de la cabecera: sus esquinas inferiores son rectas. */
.grupo-cola-cabecera[aria-expanded="true"][b-skh62uz786] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.grupo-cola-cabecera:hover[b-skh62uz786] {
    background: var(--color-surface-hover);
}

.grupo-cola-chevron[b-skh62uz786] {
    flex: none;
    display: flex;
    color: var(--color-text-muted);
    transition: transform var(--motion-transition) var(--ease-fluid);
}

.grupo-cola-chevron-abierta[b-skh62uz786] {
    transform: rotate(180deg);
}

.grupo-cola-info[b-skh62uz786] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.grupo-cola-titulo[b-skh62uz786] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.grupo-cola-resumen[b-skh62uz786] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.grupo-cola-badges[b-skh62uz786] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.grupo-cola-contenido[b-skh62uz786] {
    padding: 0 var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    border-top: var(--border-default);
    padding-top: var(--space-1);
}

/*
  Entrada del contenido al expandir: el contenido solo existe en el DOM mientras
  el grupo está abierto (lo pinta Blazor), así que no hay altura que animar sin
  tocar la lógica; entra con un fundido corto y los primeros hijos en cascada.
*/
.grupo-cola-contenido[b-skh62uz786] {
    animation: grupo-cola-entra-b-skh62uz786 var(--motion-transition) var(--ease-fluid);
}

.grupo-cola-contenido[b-skh62uz786] >  * {
    animation: grupo-cola-entra-b-skh62uz786 var(--motion-transition) var(--ease-fluid) backwards;
}

.grupo-cola-contenido[b-skh62uz786] >  :nth-child(1) { animation-delay: 70ms; }
.grupo-cola-contenido[b-skh62uz786] >  :nth-child(2) { animation-delay: 120ms; }
.grupo-cola-contenido[b-skh62uz786] >  :nth-child(n + 3) { animation-delay: 170ms; }

@keyframes grupo-cola-entra-b-skh62uz786 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .grupo-cola-chevron[b-skh62uz786],
    .grupo-cola-contenido[b-skh62uz786],
    .grupo-cola-contenido[b-skh62uz786] >  * {
        animation: none;
        transition: none;
    }
}

/*
  Segundo nivel de agrupación (Empresa contratista → Trabajador en
  vocabulario Consultora; solo Trabajador en ClienteDirecto/"empresa final")
  dentro del grupo por Cliente — ver el parámetro AgruparPorEmpresa del
  .razor. Empresa marca más (es el eje de trabajo real del gestor de una
  Consultora, DDL-072); Trabajador es un subtítulo más discreto, siempre
  presente porque es el nivel que "empresa final" necesita solo.
*/
.grupo-cola-subcabecera[b-skh62uz786] {
    padding: var(--space-3) 0 var(--space-1);
}

.grupo-cola-subcabecera-empresa[b-skh62uz786] {
    padding-left: var(--space-4);
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.grupo-cola-subcabecera-empresa:first-child[b-skh62uz786] {
    padding-top: var(--space-1);
}

.grupo-cola-subcabecera-trabajador[b-skh62uz786] {
    padding-left: var(--space-6);
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

/* Fila compacta (mockup Inicio TALVEG): título · fecha · badge · enlace, sin icono ni tarjeta propia — indentada bajo la subcabecera de trabajador. */
.grupo-cola-fila-compacta[b-skh62uz786] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-2) 0;
    padding-left: var(--space-8);
    border-bottom: var(--border-default);
}

.grupo-cola-fila-compacta:last-child[b-skh62uz786] {
    border-bottom: 0;
}

.grupo-cola-fila-compacta-titulo[b-skh62uz786] {
    flex: 1;
    min-width: 0;
    font: var(--font-body-md);
}

.grupo-cola-fila-compacta-fecha[b-skh62uz786] {
    flex: none;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.grupo-cola-fila-compacta-accion[b-skh62uz786] {
    flex: none;
    font: var(--font-label-md);
    font-size: 0.8125rem;
}

.grupo-cola-truncado[b-skh62uz786] {
    padding: var(--space-2) 0 var(--space-1) var(--space-6);
}
/* /Features/Bandeja/Components/SelectorLoteDocumental.razor.rz.scp.css */
/* El selector se monta dentro de un Drawer. Su envoltorio aparta los campos del reparto que da el
   cuerpo del Drawer (.drawer-cuerpo, Drawer.razor.css), así que lo repite: sin esto los campos
   quedaban pegados unos a otros. */
.selector-lote-documental[b-c2wd5zo21p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Cancelar y Continuar, alineados como el pie de un Drawer (.drawer-pie). */
.selector-lote-acciones[b-c2wd5zo21p] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}
/* /Features/Bandeja/Pages/Bandeja.razor.rz.scp.css */
/* Mi trabajo TALVEG.dc.html — la fila de chips va bajo la cabecera, a todo
   el ancho, y el selector de orden viaja dentro de las acciones de
   CabeceraPagina (en el mockup comparte línea con el h1, alineado a la
   derecha). */

.bandeja-orden[b-o8kk2fm02h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.bandeja-orden-etiqueta[b-o8kk2fm02h] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Raíz de CampoSelectAvanzado: el aspecto del disparador y del panel es del kit; aquí solo el ancho. */
.bandeja-orden-select[b-o8kk2fm02h] {
    min-width: 9rem;
}

.bandeja-chips[b-o8kk2fm02h] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

/* Píldora, no rectángulo: es la forma del chip en el mockup y lo separa de
   los botones de acción, que son rectangulares en todo el sistema. */
.bandeja-chip[b-o8kk2fm02h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-default);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label-md);
    cursor: pointer;
}

.bandeja-chip:hover[b-o8kk2fm02h] {
    border-color: var(--color-border-strong);
}

/* El número lleva el title que lo explica: «6» no dice si son seis
   documentos, seis personas o seis avisos. */
.bandeja-chip-cuenta[b-o8kk2fm02h] {
    font: var(--font-body-sm);
    opacity: 0.75;
}

.bandeja-chip-activo[b-o8kk2fm02h] {
    background: var(--color-primario-fondo);
    border-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

/* Resumen de lo visible + recordatorio de atajos, la línea que el mockup
   pone entre los chips y la cola. */
.bandeja-resumen[b-o8kk2fm02h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.bandeja-resumen-cuenta[b-o8kk2fm02h] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.bandeja-atajos[b-o8kk2fm02h] {
    margin-left: auto;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.bandeja-atajos kbd[b-o8kk2fm02h] {
    font: var(--font-body-sm);
    font-weight: 700;
    color: var(--color-text);
}
/* /Features/Bandeja/Pages/MiTrabajo.razor.rz.scp.css */
/* Mockup «Cola operativa multi-Tenant» (Mi trabajo.dc.html): tres paneles —
   carril de cartera, cola, detalle — traducidos a tokens del sistema. */

.mi-trabajo-titular[b-r7ti8fab4x] {
    color: var(--color-text);
}

/* FS-07: una Empresa de la cartera no se pudo consultar; el resto sí se pinta. */
.mi-trabajo-cartera-incompleta[b-r7ti8fab4x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Carga por Empresas: contador «Cargando N de M» y barra, mientras la cola se va pintando. */
.mi-trabajo-progreso[b-r7ti8fab4x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font: var(--font-label-md);
}

.mi-trabajo-progreso-barra[b-r7ti8fab4x] {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
}

.mi-trabajo-progreso-barra > i[b-r7ti8fab4x] {
    display: block;
    height: 100%;
    background: var(--color-primario-fondo);
    transition: width var(--transition-slow);
}

.mi-trabajo-chips[b-r7ti8fab4x] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.mi-trabajo-chip[b-r7ti8fab4x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-default);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label-md);
    cursor: pointer;
}

.mi-trabajo-chip:hover[b-r7ti8fab4x] {
    border-color: var(--color-border-strong);
}

.mi-trabajo-chip-cuenta[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    font-weight: 700;
    opacity: 0.75;
}

.mi-trabajo-chip-activo[b-r7ti8fab4x] {
    background: var(--color-primario-fondo);
    border-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.mi-trabajo-paneles[b-r7ti8fab4x] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: var(--space-4);
    align-items: start;
}

/* Sin tarea abierta el detalle no se pinta y no reserva columna: la cola
   gana esos 320px. Con tarea abierta vuelve la rejilla de tres. */
.mi-trabajo-paneles-sin-detalle[b-r7ti8fab4x] {
    grid-template-columns: 260px minmax(0, 1fr);
}

@media (max-width: 1200px) {
    .mi-trabajo-paneles[b-r7ti8fab4x],
    .mi-trabajo-paneles-sin-detalle[b-r7ti8fab4x] {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .mi-trabajo-detalle[b-r7ti8fab4x] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .mi-trabajo-paneles[b-r7ti8fab4x],
    .mi-trabajo-paneles-sin-detalle[b-r7ti8fab4x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mi-trabajo-cartera[b-r7ti8fab4x],
.mi-trabajo-cola[b-r7ti8fab4x],
.mi-trabajo-detalle[b-r7ti8fab4x] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.mi-trabajo-cartera[b-r7ti8fab4x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
}

.mi-trabajo-cartera-cabecera[b-r7ti8fab4x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.mi-trabajo-cartera-titulo[b-r7ti8fab4x] {
    margin: 0;
    font: var(--font-heading-sm);
    color: var(--color-text);
}

.mi-trabajo-cartera-cuenta[b-r7ti8fab4x],
.mi-trabajo-cartera-sub[b-r7ti8fab4x] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.mi-trabajo-cartera-fila[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.mi-trabajo-cartera-fila:hover[b-r7ti8fab4x] {
    background: var(--color-surface-hover);
}

.mi-trabajo-cartera-fila-activa[b-r7ti8fab4x] {
    background: var(--color-primary-50);
}

.mi-trabajo-cartera-avatar[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 24px;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-caption);
    font-weight: 700;
}

.mi-trabajo-cartera-avatar-todo[b-r7ti8fab4x] {
    background: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    color: var(--color-neutral-0);
}

.mi-trabajo-cartera-texto[b-r7ti8fab4x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mi-trabajo-cartera-nombre[b-r7ti8fab4x] {
    font: var(--font-label-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-trabajo-cartera-total[b-r7ti8fab4x] {
    font: var(--font-label-md);
    font-weight: 700;
}

.mi-trabajo-barra[b-r7ti8fab4x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-default);
}

.mi-trabajo-barra-grupo[b-r7ti8fab4x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.mi-trabajo-barra-etiqueta[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.mi-trabajo-pestana[b-r7ti8fab4x] {
    min-height: 28px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: var(--font-label-md);
    cursor: pointer;
}

.mi-trabajo-pestana-activa[b-r7ti8fab4x] {
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.mi-trabajo-barra-derecha[b-r7ti8fab4x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-wrap: wrap;
}

.mi-trabajo-filtro[b-r7ti8fab4x] {
    min-height: 32px;
    min-width: 200px;
    padding: 0 var(--space-3);
    border: var(--border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
}

.mi-trabajo-plegar-todas[b-r7ti8fab4x],
.mi-trabajo-volver-plegar[b-r7ti8fab4x] {
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label-md);
    min-height: 28px;
    padding: 0 var(--space-3);
    cursor: pointer;
}

.mi-trabajo-atajos[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.mi-trabajo-atajos kbd[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    font-weight: 700;
    color: var(--color-text);
}

.mi-trabajo-grupo-cabecera[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: var(--border-default);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
}

.mi-trabajo-grupo-cabecera-tenant[b-r7ti8fab4x],
.mi-trabajo-grupo-cabecera-severidad[b-r7ti8fab4x] {
    cursor: pointer;
}

.mi-trabajo-grupo-cabecera-tenant:hover[b-r7ti8fab4x],
.mi-trabajo-grupo-cabecera-severidad:hover[b-r7ti8fab4x] {
    background: var(--color-surface-hover);
}

.mi-trabajo-chevron[b-r7ti8fab4x] {
    display: flex;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.mi-trabajo-chevron-plegado[b-r7ti8fab4x] {
    transform: rotate(-90deg);
}

.mi-trabajo-grupo-nombre[b-r7ti8fab4x] {
    font: var(--font-heading-sm);
}

.mi-trabajo-grupo-total[b-r7ti8fab4x] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font: var(--font-caption);
    font-weight: 600;
}

.mi-trabajo-grupo-resumen[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.mi-trabajo-subcabecera[b-r7ti8fab4x] {
    padding: var(--space-3) var(--space-4) var(--space-1) var(--space-8);
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.mi-trabajo-fila[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
    border-bottom: var(--border-default);
    border-left: 3px solid transparent;
    cursor: pointer;
}

.mi-trabajo-fila:hover[b-r7ti8fab4x] {
    background: var(--color-surface-hover);
}

.mi-trabajo-fila-bloqueo[b-r7ti8fab4x] {
    border-left-color: var(--color-danger-500);
}

.mi-trabajo-fila-abierta[b-r7ti8fab4x] {
    background: var(--color-primary-50);
}

.mi-trabajo-fila-enfocada[b-r7ti8fab4x] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.mi-trabajo-fila-cuerpo[b-r7ti8fab4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mi-trabajo-fila-linea[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.mi-trabajo-fila-titulo[b-r7ti8fab4x],
.mi-trabajo-lote-titulo[b-r7ti8fab4x] {
    font: var(--font-label-md);
    white-space: nowrap;
}

.mi-trabajo-fila-sujeto[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-trabajo-fila-contexto[b-r7ti8fab4x] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.mi-trabajo-fila-derecha[b-r7ti8fab4x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.mi-trabajo-fila-fecha[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mi-trabajo-pliegue[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
    border: 0;
    border-bottom: var(--border-default);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-align: left;
    cursor: pointer;
}

.mi-trabajo-pliegue-cta[b-r7ti8fab4x] {
    margin-left: auto;
    font: var(--font-label-md);
    color: var(--color-primary-500);
}

.mi-trabajo-lote[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: var(--border-default);
    background: var(--color-surface);
    /* Es un <button>: sin color propio toma el del agente de usuario (negro) y
       no el de la página; en oscuro el título del lote quedaba a 1,31:1. */
    color: var(--color-text);
    font: var(--font-body-sm);
    text-align: left;
    cursor: pointer;
}

.mi-trabajo-lote-resumen[b-r7ti8fab4x] {
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
}

.mi-trabajo-fila-en-lote[b-r7ti8fab4x] {
    padding-left: var(--space-8);
}

.mi-trabajo-pie[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.mi-trabajo-volver-plegar[b-r7ti8fab4x] {
    margin-left: auto;
}

.mi-trabajo-detalle[b-r7ti8fab4x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    position: sticky;
    top: var(--space-4);
}

.mi-trabajo-detalle-cabecera[b-r7ti8fab4x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mi-trabajo-detalle-cerrar[b-r7ti8fab4x] {
    margin-left: auto;
}

/* El tipo de la fila («Revisión IA») no se parte en dos líneas ni se encoge
   cuando el título compite por el ancho: quien cede es el título/sujeto.
   ::deep porque el .badge lo pinta <Badge>, un componente hijo. */
.mi-trabajo-fila-linea[b-r7ti8fab4x]  .badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.mi-trabajo-detalle-tipo[b-r7ti8fab4x],
.mi-trabajo-detalle-sujeto[b-r7ti8fab4x],
.mi-trabajo-detalle-plazo[b-r7ti8fab4x] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.mi-trabajo-detalle-titulo[b-r7ti8fab4x] {
    font: var(--font-heading-sm);
    color: var(--color-text);
}

.mi-trabajo-detalle-datos[b-r7ti8fab4x] {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-3) 0;
    border-top: var(--border-default);
    border-bottom: var(--border-default);
}

.mi-trabajo-detalle-datos dt[b-r7ti8fab4x] {
    font: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mi-trabajo-detalle-datos dd[b-r7ti8fab4x] {
    margin: 0 0 var(--space-2);
    font: var(--font-body-md);
    color: var(--color-text);
}

.mi-trabajo[b-r7ti8fab4x]  .accion-cross-tenant {
    display: inline-flex;
    margin: 0;
}
/* /Features/BusquedaGlobal/BotonBuscadorGlobal.razor.rz.scp.css */
.boton-buscador-global[b-ov5479n8uj] {
    min-width: 240px;
    height: 36px;
    justify-content: space-between;
    transition: border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-surface-subtle);
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1,44:1). */
    border: var(--border-control);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    cursor: pointer;
}

.boton-buscador-global:hover[b-ov5479n8uj],
.boton-buscador-global:focus-visible[b-ov5479n8uj] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-surface-hover);
}

.boton-buscador-global:focus-visible[b-ov5479n8uj] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.boton-buscador-global:hover[b-ov5479n8uj] {
    background-color: var(--color-surface-hover);
}

.atajo-teclado[b-ov5479n8uj] {
    font: var(--font-body-sm);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    border: var(--border-default);
    border-bottom-width: 2px;
    margin-left: auto;
    color: var(--color-text-muted);
}

/* Navbar compacta (ver MainLayout.razor.css): solo el icono de búsqueda, sin
   la etiqueta "Buscar" ni el atajo de teclado (Ctrl+K no es relevante en
   móvil, que no tiene teclado físico). */
@media (max-width: 1023px) {
    .boton-buscador-global[b-ov5479n8uj] {
        min-width: 0;
        width: 36px;
        justify-content: center;
        padding: 0;
    }

    .boton-buscador-global-texto[b-ov5479n8uj],
    .atajo-teclado[b-ov5479n8uj] {
        display: none;
    }
}
/* /Features/BusquedaGlobal/BuscadorGlobal.razor.rz.scp.css */
.buscador-superposicion[b-ru0wsrc5mu] {
    position: fixed;
    inset: 0;
    background-color: var(--color-scrim);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 96px var(--space-4) var(--space-8);
    overflow: auto;
    z-index: 1300;
}

.buscador-panel[b-ru0wsrc5mu] {
    width: 100%;
    max-width: 640px;
    height: fit-content;
    background-color: var(--color-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: entrar-buscador-b-ru0wsrc5mu var(--motion-transition) var(--ease-fluid);
}

@keyframes entrar-buscador-b-ru0wsrc5mu {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .buscador-panel[b-ru0wsrc5mu] {
        animation: none;
    }
}

/* Cabecera del mockup Gen 2: lupa + campo + chip "esc". El borde inferior
   que antes llevaba el propio input pasa aquí, porque ahora el input es solo
   una de las tres piezas de la fila. */
.buscador-cabecera[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-bottom: var(--border-default);
}

.buscador-cabecera .icono[b-ru0wsrc5mu] {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.buscador-input[b-ru0wsrc5mu] {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: none;
    padding: 0;
    font: var(--font-body-lg);
    color: var(--color-text);
    background: transparent;
}

/* Chip «esc»: cierra el palette (botón con aria-label «Cerrar»), como el enlace de la maqueta. */
.buscador-tecla-escape[b-ru0wsrc5mu] {
    flex: none;
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font: var(--font-caption);
    cursor: pointer;
}

.buscador-tecla-escape:focus-visible[b-ru0wsrc5mu] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Sin esto el foco del buscador global era invisible: outline: none sin
   sustituto incumple "el foco siempre visible" (02 § 8). */
.buscador-input:focus-visible[b-ru0wsrc5mu] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.buscador-resultados[b-ru0wsrc5mu] {
    max-height: 480px;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.buscador-mensaje[b-ru0wsrc5mu] {
    padding: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    text-align: center;
}

/* Un fallo de la búsqueda no se pinta con el mismo gris que "sin
   resultados": son desenlaces distintos y tienen que distinguirse. */
.buscador-mensaje-error[b-ru0wsrc5mu] {
    color: var(--color-danger-700);
}



.buscador-lista[b-ru0wsrc5mu] {
    display: flex;
    flex-direction: column;
}

.buscador-grupo-titulo[b-ru0wsrc5mu] {
    margin: 0;
    padding: 10px var(--space-5) 6px;
    font: var(--font-label-md);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* «Ver más →» del grupo: alineado con el texto de las filas (20 + 28 de icono + 10). */
.buscador-ver-mas[b-ru0wsrc5mu] {
    display: block;
    padding: 6px var(--space-5) var(--space-2) 58px;
    font: var(--font-label);
    color: var(--color-primary-500);
    text-decoration: none;
}

.buscador-ver-mas:hover[b-ru0wsrc5mu] {
    color: var(--color-primary-600);
}

/* Bloque «Sin resultados» de la maqueta. */
.buscador-vacio[b-ru0wsrc5mu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-5);
    text-align: center;
}

.buscador-vacio-icono[b-ru0wsrc5mu] {
    color: var(--color-text-muted);
}

/* 28 px, el icono del vacío de la maqueta (Icono llega hasta 24). */
.buscador-vacio-icono[b-ru0wsrc5mu]  .icono {
    width: 28px;
    height: 28px;
}

.buscador-vacio-texto[b-ru0wsrc5mu] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.buscador-vacio-enlace[b-ru0wsrc5mu] {
    font: var(--font-label);
    color: var(--color-primary-500);
    text-decoration: none;
}

.buscador-vacio-enlace:hover[b-ru0wsrc5mu] {
    color: var(--color-primary-600);
}

.buscador-item[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-5) 0 calc(var(--space-5) - 2px);
    color: var(--color-text);
    text-decoration: none;
    font: var(--font-body-md);
    border-left: 2px solid transparent;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

/* Caja del icono del mockup: cuadro de 28 px con fondo y borde propios, no
   el glifo suelto. */
.buscador-item-icono[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

/* Glifo de 14 px dentro de la caja de 28, como la maqueta (`icon(it.icon, 14)`). */
.buscador-item-icono[b-ru0wsrc5mu]  .icono {
    width: 14px;
    height: 14px;
}

.buscador-item-texto[b-ru0wsrc5mu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.buscador-item-titulo[b-ru0wsrc5mu] {
    font: var(--font-body-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buscador-item:hover[b-ru0wsrc5mu],
.buscador-item-seleccionado[b-ru0wsrc5mu] {
    background-color: var(--color-surface-hover);
}

.buscador-item-seleccionado[b-ru0wsrc5mu] {
    border-left-color: var(--color-primary-500);
}

.buscador-item-subtitulo[b-ru0wsrc5mu] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "↵ abrir ficha" — solo en la fila activa, como en el mockup. */
.buscador-item-pista[b-ru0wsrc5mu] {
    flex: none;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.buscador-pie[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: 10px var(--space-5);
    border-top: var(--border-default);
    background-color: var(--color-surface-hover);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.buscador-leyenda[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* El mockup oculta la chuleta de teclas en pantallas estrechas, donde no hay
   teclado que la use y el ámbito de búsqueda importa más. */
@media (max-width: 48rem) {
    .buscador-leyenda[b-ru0wsrc5mu] {
        display: none;
    }
}

.buscador-pie kbd[b-ru0wsrc5mu] {
    display: inline-block;
    min-width: 1.25em;
    padding: 1px 5px;
    margin-right: 0.2em;
    border-radius: var(--radius-sm);
    border: var(--border-default);
    background-color: var(--color-surface);
    font: var(--font-body-sm);
    text-align: center;
}
/* /Features/Calendario/Components/DetalleDia.razor.rz.scp.css */
/* «Detalle del día» (mockup de Calendario): 560px, radio 14, cabecera 20/24, cuerpo 20/24 con 20 entre secciones, pie 14/24.
   Las medidas se aplican al Modal del sistema desde aquí, solo para este diálogo; el Modal compartido no cambia. */
.detalle-dia[b-p2tl3al6ml] { display: contents; }
.detalle-dia[b-p2tl3al6ml]  .modal-contenido { max-width: 560px; max-height: calc(100vh - 64px); border: 1px solid var(--color-border); overflow: hidden; }
.detalle-dia[b-p2tl3al6ml]  .modal-header { align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.detalle-dia[b-p2tl3al6ml]  .modal-cerrar { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.detalle-dia[b-p2tl3al6ml]  .modal-cerrar:hover { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface); }
.detalle-dia[b-p2tl3al6ml]  .modal-cuerpo { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.detalle-dia[b-p2tl3al6ml]  .modal-pie { align-items: center; justify-content: space-between; padding: 14px var(--space-6); }

.detalle-dia-seccion[b-p2tl3al6ml] { display: flex; flex-direction: column; gap: var(--space-2); }
.detalle-dia-etiqueta[b-p2tl3al6ml] { margin: 0; font: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.detalle-dia-lista[b-p2tl3al6ml] { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.detalle-dia-fila[b-p2tl3al6ml] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: 44px; padding: 6px var(--space-4); }
.detalle-dia-fila + .detalle-dia-fila[b-p2tl3al6ml] { border-top: 1px solid var(--color-border); }
.detalle-dia-texto[b-p2tl3al6ml] { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.detalle-dia-principal[b-p2tl3al6ml] { font: var(--font-body-md); font-weight: 600; }
.detalle-dia-secundaria[b-p2tl3al6ml] { font: var(--font-caption); color: var(--color-text-muted); }
.detalle-dia-barra[b-p2tl3al6ml] { flex: none; width: 4px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-500); }
.detalle-dia-acciones[b-p2tl3al6ml] { flex: none; display: flex; gap: var(--space-2); }

.detalle-dia-renovar[b-p2tl3al6ml], .detalle-dia-reclamar[b-p2tl3al6ml] { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-md); background: var(--color-surface); font: var(--font-label); cursor: pointer; text-decoration: none; }
.detalle-dia-renovar[b-p2tl3al6ml] { flex: none; border: 1px solid var(--color-border-control); color: var(--color-primary-500); }
.detalle-dia-renovar:hover[b-p2tl3al6ml] { border-color: var(--color-primary-500); background: var(--color-surface-hover); color: var(--color-primary-500); }
.detalle-dia-reclamar[b-p2tl3al6ml] { border: 1px solid var(--color-border); color: var(--color-text-muted); }
.detalle-dia-reclamar:hover[b-p2tl3al6ml] { border-color: var(--color-border-strong); color: var(--color-text); }
.detalle-dia-renovar:focus-visible[b-p2tl3al6ml], .detalle-dia-reclamar:focus-visible[b-p2tl3al6ml] { outline: var(--border-focus); outline-offset: 2px; }

.detalle-dia-pie-texto[b-p2tl3al6ml] { font: var(--font-caption); color: var(--color-text-muted); }
/* /Features/Calendario/Components/SemanaPorEmpresa.razor.rz.scp.css */
.semana-desplazamiento[b-mp8nvvwbqg] { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.semana-tabla[b-mp8nvvwbqg] { min-width: 860px; }
.semana-fila[b-mp8nvvwbqg] { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, 76px) 180px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.semana-fila:last-child[b-mp8nvvwbqg] { border-bottom: 0; }
.semana-cabecera[b-mp8nvvwbqg] { font: 600 12px/16px var(--font-family); color: var(--color-text-muted); }
.semana-cabecera > span:not(:first-child)[b-mp8nvvwbqg] { text-align: center; }
.semana-cabecera .semana-hoy[b-mp8nvvwbqg] { color: var(--color-danger-700); }
.semana-empresa[b-mp8nvvwbqg] { display: flex; flex-direction: column; min-width: 0; }
.semana-empresa > a[b-mp8nvvwbqg] { font: var(--font-body-md); font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semana-subtitulo[b-mp8nvvwbqg] { font: var(--font-caption); color: var(--color-text-muted); }
.semana-celda[b-mp8nvvwbqg] { display: grid; place-items: center; width: 100%; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; font: 700 14px/1 var(--font-family); font-variant-numeric: tabular-nums; }
button.semana-celda[b-mp8nvvwbqg] { cursor: pointer; }
.semana-vencido[b-mp8nvvwbqg] { background: var(--color-danger-50); color: var(--color-danger-700); }
.semana-proximo[b-mp8nvvwbqg] { background: var(--color-warning-50); color: var(--color-warning-700); }
.semana-acciones[b-mp8nvvwbqg] { display: flex; justify-content: flex-end; }
.semana-reclamar[b-mp8nvvwbqg] { height: 34px; padding: 0 12px; border: 1px solid var(--color-primario-fondo); border-radius: var(--radius-md); background: var(--color-primario-fondo); color: var(--color-primario-texto); font: var(--font-label); cursor: pointer; white-space: nowrap; }
.semana-reclamado[b-mp8nvvwbqg] { border-color: var(--color-border-control); background: var(--color-surface); color: var(--color-text); }
.semana-reclamar:hover[b-mp8nvvwbqg] { filter: brightness(.95); }
button.semana-celda:hover[b-mp8nvvwbqg] { box-shadow: inset 0 0 0 1px currentColor; }
.semana-desplazamiento:focus-visible[b-mp8nvvwbqg], button:focus-visible[b-mp8nvvwbqg], a:focus-visible[b-mp8nvvwbqg] { outline: var(--border-focus); outline-offset: 2px; }
/* /Features/Calendario/Pages/Calendario.razor.rz.scp.css */
.contenedor-pagina[b-ta8pmdoxms] { max-width: 1180px; }
.contenedor-pagina[b-ta8pmdoxms]  .cabecera-pagina { align-items: flex-end; gap: var(--space-6); }
/* Controles de la cabecera (mockup): 12px entre ellos y a otra línea cuando no caben, sin recortar nada en 375. Solo
   esta página: ni Boton ni CabeceraPagina cambian para el resto. */
.contenedor-pagina[b-ta8pmdoxms]  .acciones-cabecera { flex-wrap: wrap; gap: var(--space-3); }
.contenedor-pagina[b-ta8pmdoxms]  .titulo-pagina { font: 700 26px/32px var(--font-family); letter-spacing: -.01em; }

.calendario-vistas[b-ta8pmdoxms] { display: inline-flex; max-width: 100%; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.calendario-vistas button[b-ta8pmdoxms] { padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text); font: var(--font-label); white-space: nowrap; cursor: pointer; }
.calendario-vistas button[aria-selected="true"][b-ta8pmdoxms] { background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }
.calendario-vistas button:focus-visible[b-ta8pmdoxms] { outline: var(--border-focus); outline-offset: 2px; }

.calendario-navegacion[b-ta8pmdoxms] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Anterior, siguiente y «Hoy»: texto y flecha en primary-500, 36px de alto (también en táctil, como el mockup); las
   flechas son cuadradas de 36×36 y «Hoy» lleva relleno 0 14. */
.contenedor-pagina[b-ta8pmdoxms]  .calendario-control { height: 36px; min-height: 36px; color: var(--color-primary-500); }
.contenedor-pagina[b-ta8pmdoxms]  .calendario-control:not(:disabled):hover { border-color: var(--color-primary-500); background: var(--color-surface-hover); transform: none; }
.calendario-navegacion[b-ta8pmdoxms]  .calendario-control { width: 36px; padding: 0; }
.contenedor-pagina[b-ta8pmdoxms]  .calendario-hoy-boton { padding: 0 14px; }

.calendario-titulo-mes[b-ta8pmdoxms] {
    font: var(--font-heading-sm);
    min-width: 10rem;
    text-align: center;
}

/* El catálogo solo tiene «siguiente»: la flecha de «anterior» es la misma, girada. */
.calendario-flecha-anterior[b-ta8pmdoxms] {
    display: inline-flex;
    transform: rotate(180deg);
}

/*
  H3 (auditoría de UX de Bandeja/Alertas/Calendario): la rejilla usaba
  --color-neutral-50, un token de paleta crudo que ningún tema redefine (a
  diferencia de los semánticos --color-bg/--color-surface, que sí cambian por
  tema) — por eso los huecos previos al día 1 y posteriores al último se
  pintaban blanco puro sobre fondo oscuro.
*/
.calendario-rejilla[b-ta8pmdoxms] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendario-cabecera-dia[b-ta8pmdoxms] {
    background-color: var(--color-surface-hover);
    border-bottom: var(--border-default);
    padding: var(--space-2) var(--space-3);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.calendario-celda[b-ta8pmdoxms] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 96px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-right: var(--border-default);
    border-bottom: var(--border-default);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

.calendario-celda:nth-child(7n)[b-ta8pmdoxms] {
    border-right: 0;
}

.calendario-celda-fuera[b-ta8pmdoxms] {
    background-color: var(--color-bg);
}

.calendario-celda-con-datos[b-ta8pmdoxms] {
    cursor: pointer;
}

.calendario-celda-con-datos:hover[b-ta8pmdoxms] {
    background-color: var(--color-surface-hover);
}

.calendario-celda-con-datos:focus-visible[b-ta8pmdoxms] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.calendario-dia-numero[b-ta8pmdoxms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    font: var(--font-body-md);
    color: var(--color-text);
}

.calendario-celda-fuera .calendario-dia-numero[b-ta8pmdoxms] {
    color: var(--color-text-muted);
}

.calendario-dia-hoy[b-ta8pmdoxms] {
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
    font-weight: 700;
}

.calendario-visitas[b-ta8pmdoxms] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 70%;
    font: var(--font-body-sm);
    color: var(--color-primary-500);
}

.calendario-barra-visita[b-ta8pmdoxms] {
    display: block;
    flex: 1;
    height: 5px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-500);
}

.calendario-barra-visita-leyenda[b-ta8pmdoxms] {
    flex: none;
    width: 24px;
}

.calendario-leyenda[b-ta8pmdoxms] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-4);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.calendario-leyenda-item[b-ta8pmdoxms] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* /Features/Centros/Components/AcordeonAsignacionesCentro.razor.rz.scp.css */
/* El bloque de la Empresa comparte rejilla con la lista de Trabajadores (mismas columnas, misma vertical) pero lleva su
   propia clase: los selectores de pruebas y atajos que leen `.lista-trabajadores-acordeon` hablan de Trabajadores. */
.lista-trabajadores-acordeon[b-5tx59svuxe],
.bloque-empresa-ambito[b-5tx59svuxe] {
    --ancho-fraccion-trabajador: 76px;
    --ancho-estado-trabajador: 128px;
    --ancho-acciones-trabajador: 100px;
}

.lista-trabajadores-acordeon[b-5tx59svuxe]  .fila-relacion-nombre,
.bloque-empresa-ambito[b-5tx59svuxe]  .fila-relacion-nombre {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.lista-trabajadores-acordeon[b-5tx59svuxe]  .fila-relacion-rejilla,
.bloque-empresa-ambito[b-5tx59svuxe]  .fila-relacion-rejilla {
    grid-template-columns: minmax(0, 1fr) var(--ancho-fraccion-trabajador) var(--ancho-estado-trabajador) var(--ancho-acciones-trabajador);
}

.documentos-trabajador-ficha[b-5tx59svuxe] {
    display: block;
}

.documentos-trabajador-ficha .fila-documento-requerido[b-5tx59svuxe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-3);
}

.documentos-trabajador-ficha .documentos-requeridos-cabecera[b-5tx59svuxe] {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.documentos-trabajador-ficha .celda-documento-nombre[b-5tx59svuxe] {
    grid-column: 1 / -1;
}

.documentos-trabajador-ficha .fila-documento-requerido > :nth-child(2)[b-5tx59svuxe] {
    grid-column: 2;
    grid-row: 2;
}

.documentos-trabajador-ficha .fila-documento-requerido > :nth-child(3)[b-5tx59svuxe] {
    grid-column: 1;
    grid-row: 2;
}

.documentos-trabajador-ficha .columna-accion[b-5tx59svuxe] {
    grid-column: 3;
    grid-row: 2;
}

.documentos-trabajador-ficha .celda-documento-nombre[b-5tx59svuxe],
.documentos-trabajador-ficha[b-5tx59svuxe]  .enlace-nombre-fila {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.aviso-visita-sin-asignacion[b-5tx59svuxe] {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.aviso-visita-sin-asignacion .fila-documento-requerido[b-5tx59svuxe] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

@media (max-width: 700px) {
    .lista-trabajadores-acordeon[b-5tx59svuxe]  .fila-relacion-rejilla,
    .bloque-empresa-ambito[b-5tx59svuxe]  .fila-relacion-rejilla {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lista-trabajadores-acordeon[b-5tx59svuxe]  .fila-relacion-identidad,
    .bloque-empresa-ambito[b-5tx59svuxe]  .fila-relacion-identidad {
        grid-column: 1 / -1;
    }

    .documentos-trabajador-ficha .fila-documento-requerido[b-5tx59svuxe] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .documentos-trabajador-ficha .columna-accion[b-5tx59svuxe] {
        grid-column: 2;
        grid-row: 3;
    }
}

.documentos-trabajador-ficha .celda-documento-nombre[b-5tx59svuxe] {
    flex-wrap: wrap;
}

/* La fila del listado mantiene nombre, estado, motivo y gestión en una línea. */
.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-rejilla {
    grid-template-columns: minmax(230px, auto) auto minmax(0, 1fr) auto;
    min-height: 0;
    padding-block: 6px;
    font-size: 12px;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-estado {
    grid-column: 2;
    grid-row: 1;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-cifra {
    grid-column: 3;
    grid-row: 1;
    text-align: start;
    min-width: 0;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-detalle {
    display: none;
}

/* «Gestionar» sustituye al chevron solo donde existe; el rol sin escritura conserva el chevron para leer el desglose. */
.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion:has(.fila-trabajador-gestionar) .fila-relacion-desplegar {
    display: none;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-nombre,
.fila-trabajador-motivo[b-5tx59svuxe] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila-trabajador-motivo[b-5tx59svuxe] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* Subcaja plana solo en el listado; Centro 360 conserva la tarjeta de relaciones. */
.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .lista-relaciones-tarjeta {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-trabajador-gestionar {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    line-height: 18px;
}

.lista-trabajadores-acordeon-listado[b-5tx59svuxe]  .fila-relacion-nombre {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}

/* Aire entre la tarjeta de la Empresa y el rótulo «Trabajadores» que la sigue. */
.bloque-empresa-ambito[b-5tx59svuxe] {
    margin-bottom: var(--space-4);
}

.bloque-empresa-ambito + .separador-ambito[b-5tx59svuxe] {
    padding-top: var(--space-2);
}

/* En la fila desplegada de /centros la Empresa sigue el mismo criterio compacto que sus Trabajadores: subcaja plana, 12 px y sin la nota. */
.bloque-empresa-ambito-listado[b-5tx59svuxe]  .lista-relaciones-tarjeta {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bloque-empresa-ambito-listado[b-5tx59svuxe]  .fila-relacion-rejilla {
    min-height: 0;
    padding-block: 6px;
    font-size: 12px;
}

.bloque-empresa-ambito-listado[b-5tx59svuxe]  .fila-relacion-detalle {
    display: none;
}

.bloque-empresa-ambito-listado[b-5tx59svuxe]  .fila-relacion-nombre {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}
/* /Features/Centros/Pages/CentroDetalle.razor.rz.scp.css */
/*
  Cabecera de Centro 360. La tarjeta, el anillo, el nombre, la línea de datos
  y el hueco de acciones los pone CabeceraIdentidad; el cuerpo con lateral,
  CuerpoConLateral; las tarjetas del lateral, Tarjeta (Compacta) con
  ListaLateral. Aquí solo se estila lo que esta página mete en las ranuras de
  la cabecera.

  Ninguna de estas reglas pinta fuera de este componente: el CSS aislado de
  Blazor marca los elementos declarados en ESTE .razor, incluidos los que van
  dentro de las ranuras de CabeceraIdentidad — pero no los que esta declara
  por su cuenta.
*/
.enlace-nombre-fila[b-r4hi6v07bu] {
    font: inherit;
}

/*
  Nombre del Cliente empresarial y de la Empresa en la línea de datos: enlace a
  su página 360, en el color de enlace y sin subrayado hasta pasar por encima
  (.centro360-meta .enlace-nombre-fila del mockup). El botón 360 de al lado
  lo pinta Boton360.
*/
.centro360-contraparte[b-r4hi6v07bu] {
    font-weight: 600;
    color: var(--color-primary-500);
    text-decoration: none;
}

.centro360-contraparte:hover[b-r4hi6v07bu] {
    text-decoration: underline;
}

.centro360-indicadores[b-r4hi6v07bu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Centro 360 TALVEG (17-10): la tarjeta de la cabecera mide 20 px de relleno (la compartida, 18/22 de Empresa 360). */
.contenedor-pagina[b-r4hi6v07bu]  .cabecera-identidad {
    padding: var(--space-5);
}
/* /Features/Centros/Pages/Centros.razor.rz.scp.css */
/* La barra de filtros (tarjeta, chips, «Limpiar todo») vive ahora en el componente BarraFiltros y en
   list-page.css: la superficie de .barra-trabajo-centros que había aquí ya no se usa. */

/* Recuento «N centros» de la barra de herramientas. */
.conteo-centros[b-yrrt1jvvoy] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/*
  Cabecera de columnas (pieza 4). Mismo esqueleto que la cabecera de la fila
  (.tarjeta-fila-acordeon-cabecera, list-page.css): huecos fijos para lo de
  tamaño fijo (casilla, chevron, cumplimiento, indicadores de 320 px, icono 360)
  y dos columnas elásticas, la identidad y la Empresa (en Centros la identidad
  deja de ser la única zona elástica de la fila). Versalitas, como el resto de
  listas del patrón. Los anchos de casilla y chevron son los de sus
  componentes; si cambian, cambia aquí.
*/
.cabecera-columnas-centros[b-yrrt1jvvoy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 var(--space-4);
    margin-bottom: var(--space-2);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    font: var(--font-label);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.cabecera-columnas-centros-seleccion[b-yrrt1jvvoy] {
    width: 16px;
    flex-shrink: 0;
}

/*
  Casilla de selección de la fila, con la misma caja que su hueco de la cabecera (16 px, regla de
  arriba). Sin esto la casilla medía lo que diga el navegador —en Chromium, 13 px más 4 y 3 de
  margen: 20 px—, y con la selección múltiple puesta «Centro» quedaba 4 px a la izquierda de sus
  celdas y «Empresa» 1,6 px (medido a 1266 px, 2026-10-09; sin selección la cabecera y las filas ya
  coincidían). Lo fija CentrosCabeceraAlineadaE2ETests.
*/
.tarjeta-fila-acordeon-cabecera > input[type="checkbox"][b-yrrt1jvvoy] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

/* chevron (24 px); la barra de cumplimiento tiene su propia columna */
.cabecera-columnas-centros-inicio[b-yrrt1jvvoy] {
    width: 24px;
    flex-shrink: 0;
}

.cabecera-columnas-centros-centro[b-yrrt1jvvoy] {
    flex: 1.4;
    min-width: 0;
}

/*
  Columnas Empresa y Cumplimiento (maqueta aprobada de la fase 1). Empresa es elástica, como la
  identidad, pero con menos peso; Cumplimiento es fija, con el ancho de su rótulo en versalitas.
  Las mismas clases en la cabecera y en la fila: cada valor cae bajo su rótulo.
*/
.columna-empresa-centro[b-yrrt1jvvoy] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.columna-cumplimiento-centro[b-yrrt1jvvoy] {
    display: flex;
    align-items: center;
    width: 132px;
    flex-shrink: 0;
}

/* «Cumplimiento» ordena: un botón con el aspecto del rótulo (versalitas heredadas de la cabecera). */
.cabecera-columna-orden[b-yrrt1jvvoy] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.cabecera-columna-orden[aria-pressed="true"][b-yrrt1jvvoy] {
    color: var(--color-text);
}

.cabecera-columna-orden:focus-visible[b-yrrt1jvvoy] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* La identidad pesa lo mismo que su rótulo «Centro». */
.tarjeta-fila-acordeon-identidad[b-yrrt1jvvoy] {
    flex: 1.4;
}

/* La Empresa solo va en la segunda línea cuando su columna no cabe. */
.meta-empresa-movil[b-yrrt1jvvoy] {
    display: none;
}

/*
  En pantallas estrechas solo caben los anchos fijos imprescindibles: la columna Empresa se oculta
  y la de Cumplimiento se queda en el ancho de la cifra (la barra oculta su pista), con su rótulo recortado (el nombre accesible
  del botón no cambia). Sin esto la fila desbordaba ~100 px en un móvil de 375 px y la identidad
  quedaba sin sitio.
*/
@media (max-width: 767px) {
    .columna-empresa-centro[b-yrrt1jvvoy] {
        display: none;
    }

    .columna-cumplimiento-centro[b-yrrt1jvvoy] {
        width: 44px;
    }

    .cabecera-columna-orden[b-yrrt1jvvoy] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meta-empresa-movil[b-yrrt1jvvoy] {
        display: inline;
    }
}

/*
  Dos ranuras: estado (pastilla y, debajo, el motivo «N vencidos · M por vencer») y visita. La fila usa
  las mismas columnas y el mismo ancho (regla de abajo), para que cada una caiga bajo su rótulo.
  320 px: la ranura de estado queda en 200, lo que mide la pastilla más larga («Bloqueo de la
  plataforma CAE», 193 px medidos el 2026-10-09); con menos se metía en la ranura de la visita.
*/
.cabecera-columnas-centros-indicadores[b-yrrt1jvvoy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: var(--space-2);
    width: 320px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: .03em;
}

.cabecera-columnas-centros-indicadores > span[b-yrrt1jvvoy] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tarjeta-fila-acordeon-indicadores[b-yrrt1jvvoy] {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: var(--space-2);
    width: 320px;
}

/*
  El motivo de EstadoFila recorta lo que no cabe (una línea con puntos suspensivos). Aquí contiene
  las ventanas de contexto de las incidencias, cuyo panel sale de la caja: recortado no se vería.
*/
.tarjeta-fila-acordeon-indicadores[b-yrrt1jvvoy]  .estado-fila-motivo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    overflow: visible;
}

/* El color no es el único portador: el texto ya dice «vencidos» o «por vencer». */
.motivo-recuento[b-yrrt1jvvoy] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.motivo-recuento-vencidos[b-yrrt1jvvoy] {
    color: var(--color-danger-700);
}

.motivo-recuento-pendientes[b-yrrt1jvvoy],
.motivo-recuento-bloqueos[b-yrrt1jvvoy] {
    color: var(--color-danger-700);
}

.motivo-recuento-proximos[b-yrrt1jvvoy] {
    color: var(--color-warning-700);
}

/*
  En pantallas estrechas la zona de indicadores no cabe junto al nombre: en un móvil de 375 px la
  identidad se quedaba en 0 px de ancho (medido el 2026-10-09, también con los 200 px de antes). Baja
  a una segunda línea de la fila, sangrada hasta el nombre (chevron de 24 px más la separación), y la
  cabecera de columnas deja de rotularla porque ya no hay vertical que compartir.
*/
@media (max-width: 767px) {
    .tarjeta-fila-acordeon-cabecera[b-yrrt1jvvoy] {
        flex-wrap: wrap;
    }

    .tarjeta-fila-acordeon-indicadores[b-yrrt1jvvoy] {
        order: 1;
        flex-basis: 100%;
        width: auto;
        padding-left: calc(24px + var(--space-2));
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cabecera-columnas-centros-indicadores[b-yrrt1jvvoy] {
        display: none;
    }
}

.cabecera-columnas-centros-acciones[b-yrrt1jvvoy],
.tarjeta-fila-acordeon-acciones[b-yrrt1jvvoy] {
    width: 44px;
    flex-shrink: 0;
    justify-content: flex-end;
}

/* Título del contenido expandido de la fila de Centro. */
.acordeon-centro-titulo[b-yrrt1jvvoy] {
    margin: 0 0 var(--space-3);
    font: var(--font-label-md);
    color: var(--color-text);
}

/* Pie del contenido expandido: el camino a Centro 360, siempre presente. */
.acordeon-centro-pie[b-yrrt1jvvoy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-default);
}

.acordeon-centro-enlace-360[b-yrrt1jvvoy] {
    font: var(--font-label-md);
    color: var(--color-primary-500);
}

/* Variante del listado: v29, .top/.tool. No cambia las cabeceras de otras pantallas. */
.listado-centros-fidelidad[b-yrrt1jvvoy]  .cabecera-pagina {
    min-height: 48px;
    margin-bottom: 6px;
}

.listado-centros-fidelidad[b-yrrt1jvvoy]  .titulo-pagina {
    font-size: 22px;
    line-height: 28px;
}

.listado-centros-fidelidad[b-yrrt1jvvoy]  .barra-filtros-pastillas {
    margin-bottom: 10px;
}

.listado-centros-fidelidad[b-yrrt1jvvoy]  .barra-filtros-buscador-pantalla {
    max-width: 340px;
}

.listado-centros-fidelidad[b-yrrt1jvvoy]  .acciones-cabecera {
    gap: 8px;
}

@media (hover: hover) and (pointer: fine) {
    .listado-centros-fidelidad[b-yrrt1jvvoy]  .cabecera-listado-icono,
    .listado-centros-fidelidad[b-yrrt1jvvoy]  .acciones-cabecera .menu-acciones-disparador {
        width: 34px;
        height: 34px;
        border-radius: 6px;
    }

    .listado-centros-fidelidad[b-yrrt1jvvoy]  .acciones-cabecera .boton {
        min-height: 34px;
        padding: 8px 14px;
        border: 0;
        border-radius: 6px;
        font-size: 13px;
        line-height: 18px;
    }
}
/* /Features/Clientes/Components/ClienteWorkspacePanel.razor.rz.scp.css */
/*
    Cliente 360 contra «Cliente 360 TALVEG.dc.html». El aside de 520 px, su
    cabecera de navegación (volver, copiar enlace, cerrar) y el apilado los
    pone ContextWorkspace.razor, común a los siete paneles; aquí solo va lo
    propio de esta ficha. Todo con tokens declarados en tokens.css.

    CSS aislado: estas clases solo pintan en este componente. Las que vienen
    de fuera —workspace-lista-entidades, workspace-acciones-edicion,
    workspace-titulo-entidad, alerta-formulario, campo-checkbox— son globales
    y NO se redeclaran aquí.
*/

.cabecera-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.icono-cliente-360[b-yjyvi0tbmp] {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    color: var(--color-primary-500);
}

.texto-cabecera-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    /* Ocupa el ancho libre: el lápiz y el icono 360 quedan al final de la cabecera. */
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kicker-cliente-360[b-yjyvi0tbmp] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.titulo-cliente-360[b-yjyvi0tbmp] {
    font: var(--font-heading-md);
    text-wrap: pretty;
}

.meta-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 2px;
}

.recuentos-cliente-360[b-yjyvi0tbmp] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Rejilla de Información: la isla interna del mockup, dos columnas. */
.rejilla-info-cliente-360[b-yjyvi0tbmp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.celda-info-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.celda-info-cliente-360-ancha[b-yjyvi0tbmp] {
    grid-column: 1 / -1;
}

.celda-info-cliente-360 > span[b-yjyvi0tbmp] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.celda-info-cliente-360 strong[b-yjyvi0tbmp] {
    font: var(--font-body-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.valor-con-copia-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.acciones-cliente-360[b-yjyvi0tbmp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
    .rejilla-info-cliente-360[b-yjyvi0tbmp] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Clientes/Pages/AltaGuiada.razor.rz.scp.css */
.contenedor-alta-guiada[b-x6o3rviv7t] {
    max-width: 720px;
}

.tarjeta-alta-guiada[b-x6o3rviv7t] {
    margin-top: var(--space-5);
}

.resumen-alta-guiada[b-x6o3rviv7t] {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: var(--border-default);
}
/* /Features/Clientes/Pages/ClienteDetalle.razor.rz.scp.css */
/*
  Cliente 360, página. La maquetación (cuerpo con lateral, tarjetas, listas de
  relaciones, rejilla de datos) la ponen los componentes compartidos del
  DesignSystem; aquí solo se estila lo que esta página mete en las ranuras de
  CabeceraIdentidad y de las tarjetas.
*/

/* .centro360-identidad{flex:1 1 300px;min-width:260px} de la maqueta: a 375 px la identidad pasa a su propia fila bajo el anillo
   en vez de quedarse en una columna de 157 px. */
.contenedor-pagina[b-9pep8mvblt]  .cabecera-identidad-texto {
    flex: 1 1 300px;
    min-width: 260px;
}

/* Línea de datos de la maqueta: CIF · recuentos · estado. */
.cliente360-datos[b-9pep8mvblt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cliente360-meta[b-9pep8mvblt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 6px 10px;
}

/* Líneas bajo el nombre del Centro (contratista, motivos): una por línea, como los dos .fila-rel-sub de la maqueta. */
.contenedor-pagina[b-9pep8mvblt]  .cliente360-linea-detalle {
    display: block;
}

.cliente360-ficha[b-9pep8mvblt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* .nota-texto de la maqueta: body-md en el color del texto. */
.cliente360-tolerancia-resumen[b-9pep8mvblt] {
    margin: 0 0 var(--space-2);
    font: var(--font-body-md);
    color: var(--color-text);
}

/* .barra-lista de la maqueta 17-10: filtros de estado a la izquierda, buscador (260 px mínimo, 36 px de alto) a la derecha. */
.cliente360-barra[b-9pep8mvblt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cliente360-buscador[b-9pep8mvblt] {
    min-width: 260px;
}

.cliente360-buscador[b-9pep8mvblt]  .campo-input {
    height: 36px;
    min-height: 36px;
    padding-block: 0;
    padding-inline: 10px;
}

@media (max-width: 480px) {
    .cliente360-buscador[b-9pep8mvblt] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Salida «Quitar filtros» cuando el filtro no deja ningún Centro. */
.cliente360-resumen-lista[b-9pep8mvblt] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

/* .cifra-fila de la maqueta: body-md, tabular, a la izquierda de su columna de 104 px. */
.cliente360-cumplimiento[b-9pep8mvblt] {
    font: var(--font-body-md);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* .texto-apoyo / .fila-rel-sub de la maqueta: 13 px en la línea secundaria de las filas. */
.contenedor-pagina[b-9pep8mvblt]  .fila-relacion-detalle {
    font-size: 13px;
}

/* «Sin gestión CAE · no cuentan en el anillo» (.texto-apoyo en 600, 13 px) sobre su lista. */
.cliente360-sin-gestion-cae[b-9pep8mvblt] {
    margin-top: var(--space-5);
}

.cliente360-sin-gestion-cae h3[b-9pep8mvblt] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.cliente360-documentacion[b-9pep8mvblt] {
    display: grid;
    gap: var(--space-4);
}
/* /Features/Clientes/Pages/Clientes.razor.rz.scp.css */
/* Aviso de perfil incompleto en la fila del cliente: no es el semáforo de
   vigencia documental (que se reserva a Documento, 06 § 4) sino una
   configuración que falta, y por eso es un atajo pulsable a la pestaña que la
   resuelve, no un badge decorativo. */
.aviso-sin-agenda[b-dxdchuc9ba] {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-sm);
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    font: var(--font-caption);
    cursor: pointer;
}

.aviso-sin-agenda:hover[b-dxdchuc9ba] {
    border-color: var(--color-warning-700);
}

/* Celda de identidad del Cliente empresarial, en dos líneas: la razón social con sus
   avisos y, debajo, el CIF en pequeño. Mismas reglas que la celda «Trabajador» de
   /trabajadores (Trabajadores.razor.css): no hay clase compartida para este patrón. */
.celda-cliente-empresarial[b-dxdchuc9ba] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.celda-cliente-empresarial-cif[b-dxdchuc9ba] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* La barra de filtros (tarjeta, chips, «Limpiar todo») vive ahora en el
   componente BarraFiltros y en list-page.css: aquí ya no se copia. */

/* Resumen de la barra de filtros: «3 Clientes con estos filtros». */
.conteo-clientes[b-dxdchuc9ba] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Aviso de «todos los de esta página seleccionados» — la mitad informativa
   del banner del mockup, mismos tokens que él. */
.aviso-seleccion-pagina[b-dxdchuc9ba] {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    font: var(--font-body-md);
}

/* Recuento de centros: el disparador de su ventana de contexto (el botón lo pone
   VentanaContexto en modo interactivo). Número con aspecto de enlace, como en el mockup. */
.enlace-centros-cliente[b-dxdchuc9ba] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-primary-500);
}

.ranura-centros-cliente:hover .enlace-centros-cliente[b-dxdchuc9ba] {
    color: var(--color-primary-600);
}

/* Celda «Gestor CAE» para quien puede reasignar: su contenido (avatar y nombre, o «Sin
   asignar») es el botón que abre el formulario de edición con el selector de Gestor CAE;
   el hueco restante de la celda sigue siendo fila. Sin caja: se lee como la celda de
   texto que ven los demás roles, y solo el puntero y el foco dicen que se pulsa. */
.celda-gestor-cae-pulsable[b-dxdchuc9ba] {
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.celda-gestor-cae-pulsable:hover[b-dxdchuc9ba] {
    color: var(--color-primary-500);
}

.celda-gestor-cae-pulsable:focus-visible[b-dxdchuc9ba] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

/* «⚑ Crítico» junto al nombre (sustituye a la antigua columna «Crítico»). Badge es un
   componente hijo: su <span> no lleva el atributo de ámbito de esta página. */
.contenedor-pagina[b-dxdchuc9ba]  .insignia-critico {
    margin-left: var(--space-2);
    vertical-align: middle;
}

.texto-vacio-celda[b-dxdchuc9ba] {
    color: var(--color-text-muted);
}

/* Una alerta de la ventana del motivo: tras la pastilla de su estado, «Documento — Trabajador». */
.incidencia-cliente-texto[b-dxdchuc9ba] {
    margin-left: var(--space-2);
}

/* Solo en la línea de quien consulta (la pulsable lleva su «Secundario» del kit): la fecha de vencimiento o
   el Centro donde falta, atenuado. */
.incidencia-cliente-secundario[b-dxdchuc9ba] {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
}
/* /Features/Clientes/Pages/ConfiguracionIaCliente.razor.rz.scp.css */
.lectura-ia-cliente[b-jnew9jwapr] { display: flex; flex-direction: column; gap: var(--space-5); }
.lectura-ia-rastro[b-jnew9jwapr] { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--color-text-muted); font: var(--font-caption); }
.lectura-ia-niveles[b-jnew9jwapr], .lectura-ia-tabla-contenedor[b-jnew9jwapr], .lectura-ia-aviso[b-jnew9jwapr] { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.lectura-ia-niveles[b-jnew9jwapr] { padding: var(--space-4) var(--space-5); }
.lectura-ia-niveles-titulo[b-jnew9jwapr] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.lectura-ia-niveles-titulo h2[b-jnew9jwapr] { margin: 0; color: var(--color-system-text); font: var(--font-label); }
.indicador-sistema[b-jnew9jwapr] { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-system-indicator); }
.lectura-ia-niveles-lista[b-jnew9jwapr] { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
.lectura-ia-nivel[b-jnew9jwapr] { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font: var(--font-caption); }
.lectura-ia-nivel strong[b-jnew9jwapr] { color: var(--color-text); }
.lectura-ia-nivel-cabecera[b-jnew9jwapr] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.lectura-ia-nivel-actual[b-jnew9jwapr] { border-color: var(--color-primary-500); }
.lectura-ia-tabla-contenedor[b-jnew9jwapr] { overflow-x: auto; }
.lectura-ia-tabla[b-jnew9jwapr] { min-width: 70rem; }
.lectura-ia-guardando[b-jnew9jwapr] { width: 12px; height: 12px; border: 2px solid var(--color-primary-500); border-top-color: transparent; border-radius: var(--radius-full); animation: lectura-ia-girar-b-jnew9jwapr var(--motion-fast) linear infinite; }
.lectura-ia-aviso[b-jnew9jwapr] { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-color: var(--color-warning-500); background: var(--color-warning-50); }
.lectura-ia-aviso-informacion[b-jnew9jwapr] { border-color: var(--color-border); background: var(--color-surface); }
.lectura-ia-aviso-mejora[b-jnew9jwapr] { border-style: dashed; border-color: var(--color-border-strong); background: var(--color-surface); }
@keyframes lectura-ia-girar-b-jnew9jwapr { to { transform: rotate(360deg); } }
@media (max-width: 48rem) { .lectura-ia-rastro > span[b-jnew9jwapr] { display: none; } }
/* /Features/Comercial/Pages/EstadoComercial.razor.rz.scp.css */
/* La tabla tiene cinco columnas y un id de Stripe largo: en pantallas
   estrechas se desplaza dentro de su caja, nunca la página entera. */
.estado-comercial-tabla[b-mc92zxtxx4] {
    overflow-x: auto;
}

.estado-comercial-tabla[b-mc92zxtxx4]  .tabla-datos {
    min-width: 820px;
}

.estado-comercial-nombre[b-mc92zxtxx4] {
    font-weight: 600;
}

/* El id de la suscripción: monoespaciado y copiable con un clic, sin
   aspecto de botón (el mockup lo pinta como texto). */
.estado-comercial-id[b-mc92zxtxx4] {
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 2px var(--space-1);
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--color-text);
    cursor: copy;
    text-align: left;
}

.estado-comercial-id:hover[b-mc92zxtxx4] {
    background-color: var(--color-surface-subtle);
}

.estado-comercial-sin-id[b-mc92zxtxx4] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text-muted);
}

.estado-comercial-fecha[b-mc92zxtxx4] {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.estado-comercial-oculto[b-mc92zxtxx4] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.estado-comercial-formulario[b-mc92zxtxx4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.estado-comercial-formulario .texto-descriptivo[b-mc92zxtxx4] {
    margin: 0;
}

/* Qué estados bloquean la escritura: pie de la tabla, como en el mockup. */
.estado-comercial-nota[b-mc92zxtxx4] {
    margin: var(--space-2) 0 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.estado-comercial-pista[b-mc92zxtxx4] {
    margin: var(--space-1) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Comunicaciones/Components/AccionCenter.razor.rz.scp.css */
/* Action Center (Project-Hydra-Negocio/tecnico/docs/COMUNICACIONES.md § 12.6) — mismo lenguaje visual que
   el resto del sistema de sugerencias: fondo/borde en tono cian de sistema
   (02 § 3.1, DDL-009 — "quien actúa aquí es Hydra"), nunca azul, porque
   confirmar sí es azul (los botones primarios). */

.accion-center[b-6nxvpb3qjm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.accion-center-titulo[b-6nxvpb3qjm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.accion-card[b-6nxvpb3qjm] {
    border: 1px solid var(--color-system-indicator);
    background-color: var(--color-system-tint);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.accion-card-cab[b-6nxvpb3qjm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label-md);
    color: var(--color-text);
}

.accion-card-icono[b-6nxvpb3qjm] {
    display: inline-flex;
    color: var(--color-system-text);
    flex-shrink: 0;
}

.accion-card-confianza[b-6nxvpb3qjm] {
    margin-left: auto;
    font: var(--font-label-md);
    font-variant-numeric: tabular-nums;
    color: var(--color-system-text);
}

.accion-card-confianza-baja[b-6nxvpb3qjm] {
    color: var(--color-warning-700);
}

.accion-card-campos[b-6nxvpb3qjm] {
    margin: var(--space-2) 0 var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.accion-card-botones[b-6nxvpb3qjm] {
    display: flex;
    gap: var(--space-2);
}

/* Editor inline de fechas dentro de RevisionSugerenciaModal (paso 1) — dos
   CampoTexto type=date lado a lado, mismo patrón de rejilla que el resto de
   pares de fecha en la app. */
.accion-editor-fechas[b-6nxvpb3qjm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
/* /Features/Comunicaciones/Components/BannerAlertaCritica.razor.rz.scp.css */
.alerta-critica[b-85lvru02uz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-default);
    color: var(--color-text);
    background: var(--color-surface);
}

.alerta-critica blockquote[b-85lvru02uz] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 12rem;
    overflow: auto;
}

.alerta-critica p[b-85lvru02uz] { margin: 0; }

.alerta-critica-acciones[b-85lvru02uz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Features/Comunicaciones/Components/ComposerBar.razor.rz.scp.css */
.composer[b-xrp4mp5ohe] {
    border-top: var(--border-default);
}

/* --- Banners de estado (ventana de WhatsApp) --- */
.composer-banner[b-xrp4mp5ohe] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font: var(--font-body-sm);
}

.composer-banner-abierto[b-xrp4mp5ohe] {
    background-color: var(--color-success-50, #ecfdf5);
    color: var(--color-success-700, #065f46);
}

.composer-banner-cerrado[b-xrp4mp5ohe] {
    background-color: var(--color-warning-50, #fffbeb);
    color: var(--color-warning-700, #92400e);
}

/* --- Modo Correo --- */
.composer-correo[b-xrp4mp5ohe] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.composer-correo-prellenados[b-xrp4mp5ohe] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    border-bottom: var(--border-default);
}

.composer-correo-prellenados .campo[b-xrp4mp5ohe] {
    flex: 1;
    min-width: 200px;
}

.composer-macro-campo[b-xrp4mp5ohe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 200px;
}

.composer-macro-administrar[b-xrp4mp5ohe] {
    align-self: flex-start;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-decoration: none;
}

.composer-macro-administrar:hover[b-xrp4mp5ohe] {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.composer-adjuntos-pendientes[b-xrp4mp5ohe] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.composer-adjunto-chip[b-xrp4mp5ohe] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-default);
    background-color: var(--color-secondary-50);
    color: var(--color-text);
    font: var(--font-body-sm);
}

.composer-adjunto-nombre[b-xrp4mp5ohe] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-adjunto-quitar[b-xrp4mp5ohe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    cursor: pointer;
}

.composer-adjunto-quitar:hover[b-xrp4mp5ohe] {
    color: var(--color-danger-700);
}

.composer-adjuntos-error[b-xrp4mp5ohe] {
    font: var(--font-body-sm);
    color: var(--color-danger-700);
    margin: 0;
}

.composer-boton-adjuntar[b-xrp4mp5ohe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-default);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.composer-boton-adjuntar:hover[b-xrp4mp5ohe] {
    border-color: var(--color-primary-300);
    color: var(--color-text);
}

/* <InputFile> es un componente hijo: sin ::deep esta regla no llega a su <input>
   y se veía el botón nativo «Elegir archivos» junto al rótulo «Adjuntar». */
.composer-boton-adjuntar[b-xrp4mp5ohe]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.composer-acciones[b-xrp4mp5ohe] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.composer-acciones .composer-boton-adjuntar[b-xrp4mp5ohe] {
    margin-right: auto;
}

/* --- Modo WhatsApp --- */
.composer-whatsapp[b-xrp4mp5ohe] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    align-items: flex-end;
}

.composer-whatsapp-input[b-xrp4mp5ohe] {
    flex: 1;
    resize: none;
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1,44:1). */
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text);
    background-color: var(--color-surface);
}

.composer-whatsapp-input:disabled[b-xrp4mp5ohe] {
    background-color: var(--color-surface-hover);
}

/* Botón de envío redondo, patrón habitual de chat — distinto del botón de
   texto "Enviar" que usa el modo Correo (composer-acciones). */
.composer-boton-enviar-circular[b-xrp4mp5ohe] {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Fallback WhatsApp → correo (§ 16.5) --- */
.composer-fallback[b-xrp4mp5ohe] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* /Features/Comunicaciones/Components/ComposerNotaInterna.razor.rz.scp.css */
/* El borde discontinuo es el mismo lenguaje que la nota en el timeline
   (UnifiedTimeline.razor.css): lo que se escribe aquí no sale del equipo. */
.composer-nota-interna[b-797zjq3whf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-default);
    border-top-style: dashed;
}

.composer-nota-interna-cabecera[b-797zjq3whf] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.composer-nota-interna-aviso[b-797zjq3whf] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.composer-acciones[b-797zjq3whf] {
    display: flex;
    justify-content: flex-end;
}
/* /Features/Comunicaciones/Components/MedidorTiempoGestion.razor.rz.scp.css */
.medidor-tiempo[b-fil5yrxbe6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.medidor-tiempo-valor[b-fil5yrxbe6] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}
/* /Features/Comunicaciones/Components/RecordatorioPropuesto.razor.rz.scp.css */
.recordatorio-propuesto-explicacion[b-yd5su1z4id] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.recordatorio-propuesto-acciones[b-yd5su1z4id] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
/* /Features/Comunicaciones/Components/RevisionCampoResumen.razor.rz.scp.css */
.revision-campo-resumen[b-dsxr3xix4r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.revision-campo-resumen-compacto[b-dsxr3xix4r] {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}

.revision-campo-resumen-etiqueta[b-dsxr3xix4r] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.revision-campo-resumen-valor[b-dsxr3xix4r] {
    font: var(--font-body-md);
    color: var(--color-text);
}

.revision-campo-resumen-confianza[b-dsxr3xix4r] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Features/Comunicaciones/Components/RevisionSugerenciaModal.razor.rz.scp.css */
/* AI Action Review (Project-Hydra-Negocio/tecnico/docs/COMUNICACIONES.md § 12.6) — composición nueva,
   pero el ancho más generoso de este modal en concreto (dos columnas de
   datos) es la única razón para ampliar Modal más allá de "Grande": se hace
   con ::deep sobre el propio contenedor de Modal, sin tocar su CSS
   compartido ni afectar a ningún otro modal de la app. */
[b-e5m8z5uef7] .modal-contenido-grande {
    max-width: 1200px;
}

[b-e5m8z5uef7] .modal-cuerpo {
    padding-top: var(--space-4);
}

.revision-sugerencia-subtitulo[b-e5m8z5uef7] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* --- Stepper --- */
.revision-stepper[b-e5m8z5uef7] {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.revision-stepper-paso[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.revision-stepper-circulo[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    font: var(--font-label-md);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.revision-stepper-texto[b-e5m8z5uef7] {
    display: flex;
    flex-direction: column;
    font: var(--font-body-sm);
    white-space: nowrap;
}

.revision-stepper-texto span[b-e5m8z5uef7] {
    color: var(--color-text-muted);
    font: var(--font-caption);
}

.revision-stepper-linea[b-e5m8z5uef7] {
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    margin: 14px var(--space-2) 0;
}

.revision-stepper-linea-completa[b-e5m8z5uef7] {
    background-color: var(--color-primario-fondo);
}

.revision-stepper-actual .revision-stepper-circulo[b-e5m8z5uef7] {
    border-color: var(--color-primario-fondo);
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.revision-stepper-completado .revision-stepper-circulo[b-e5m8z5uef7] {
    border-color: var(--color-success-700);
    background-color: var(--color-success-700);
    color: var(--color-exito-solido-texto);
}

/* --- Banners --- */
.revision-banner[b-e5m8z5uef7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font: var(--font-body-sm);
    margin-bottom: var(--space-4);
}

.revision-banner-error[b-e5m8z5uef7] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
}

/* --- Paso 1: campos editables --- */
.revision-seccion-titulo[b-e5m8z5uef7] {
    margin: 0 0 var(--space-3);
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.revision-campo-editable[b-e5m8z5uef7] {
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background-color: var(--color-warning-50);
}

.revision-campo-editable-cab[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: var(--font-label-md);
    margin-bottom: var(--space-2);
}

.revision-campo-editable-detectado[b-e5m8z5uef7] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.revision-campo-editable-confianza[b-e5m8z5uef7] {
    margin-left: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.revision-confirmados-toggle[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
    color: var(--color-success-700);
    font: var(--font-body-sm);
    cursor: pointer;
}

.revision-confirmados-toggle-flecha[b-e5m8z5uef7] {
    margin-left: auto;
    color: var(--color-text-muted);
}

.revision-confirmados-lista[b-e5m8z5uef7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin: 0;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.revision-confirmados-lista dt[b-e5m8z5uef7] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.revision-confirmados-lista dd[b-e5m8z5uef7] {
    margin: 0;
    font: var(--font-body-sm);
}

/* --- Paso 2: grid de campos --- */
.revision-grid-campos[b-e5m8z5uef7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .revision-grid-campos[b-e5m8z5uef7] {
        grid-template-columns: 1fr;
    }
}

.revision-leyenda[b-e5m8z5uef7] {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.revision-json[b-e5m8z5uef7] {
    margin-bottom: var(--space-2);
}

.revision-json summary[b-e5m8z5uef7] {
    cursor: pointer;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.revision-json pre[b-e5m8z5uef7] {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    overflow-x: auto;
}

/* --- Paso 3: confirmación --- */
.revision-confirmacion-columnas[b-e5m8z5uef7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 767px) {
    .revision-confirmacion-columnas[b-e5m8z5uef7] {
        grid-template-columns: 1fr;
    }
}

.revision-consecuencias[b-e5m8z5uef7] {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.revision-consecuencias li[b-e5m8z5uef7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font: var(--font-body-sm);
    color: var(--color-text);
}

.revision-consecuencias li .icono[b-e5m8z5uef7] {
    color: var(--color-success-700);
    flex-shrink: 0;
    margin-top: 2px;
}

.revision-sin-cambios[b-e5m8z5uef7] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.revision-cambio[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

.revision-cambio-etiqueta[b-e5m8z5uef7] {
    font: var(--font-label-md);
    flex-basis: 100%;
}

.revision-cambio-antes[b-e5m8z5uef7] {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.revision-cambio-despues[b-e5m8z5uef7] {
    color: var(--color-primary-700);
    font-weight: 600;
}

/* --- Pie --- */
.revision-pie[b-e5m8z5uef7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.revision-pie-paso[b-e5m8z5uef7] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    font-variant-numeric: tabular-nums;
}

.revision-pie-acciones[b-e5m8z5uef7] {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

@media (max-width: 640px) {
    .revision-pie[b-e5m8z5uef7] {
        flex-wrap: wrap;
    }

    .revision-pie-paso[b-e5m8z5uef7] {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .revision-pie-acciones[b-e5m8z5uef7] {
        order: 2;
        width: 100%;
        margin-left: 0;
    }

    .revision-pie-acciones .boton[b-e5m8z5uef7] {
        flex: 1;
    }
}
/* /Features/Comunicaciones/Components/UnifiedTimeline.razor.rz.scp.css */
.timeline-mensajes[b-7k5r8xos6f] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    background-color: var(--color-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.timeline-separador-fecha[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-2) 0;
}

.timeline-separador-fecha span[b-7k5r8xos6f] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    border: var(--border-default);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* Fila = avatar + burbuja, para poder invertir el orden en saliente sin
   duplicar el marcado (flex-direction: row-reverse en vez de un segundo
   bloque de HTML). */
.timeline-mensaje-fila[b-7k5r8xos6f] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 78%;
}

.timeline-mensaje-fila-saliente[b-7k5r8xos6f] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.timeline-mensaje-fila-entrante[b-7k5r8xos6f] {
    align-self: flex-start;
}

/* Un único tratamiento de avatar para todos los remitentes (slate/acero,
   nunca un color por persona) — Project-Hydra-Negocio/tecnico/docs/archive/design/DESIGN_SYSTEM.md reserva el color como
   portador de significado (semáforo, acción). */
.timeline-avatar[b-7k5r8xos6f] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-600);
    font: var(--font-label-md);
    letter-spacing: 0;
}

.timeline-mensaje[b-7k5r8xos6f] {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card-sm);
    border: var(--border-default);
}

.timeline-mensaje-entrante[b-7k5r8xos6f] {
    background-color: var(--color-surface);
}

.timeline-mensaje-saliente[b-7k5r8xos6f] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-100);
}

.timeline-mensaje-cabecera[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.timeline-mensaje-remitente[b-7k5r8xos6f] {
    font: var(--font-label-md);
    color: var(--color-text);
}

/* Ronda de reducción de ruido en Comunicaciones: minimizar sin borrar — el mensaje sigue
   completo y accesible, solo pierde peso visual hasta que el gestor lo confirme. */
.timeline-mensaje-fila-ruido[b-7k5r8xos6f] {
    opacity: 0.6;
}

.timeline-mensaje-fila-ruido:hover[b-7k5r8xos6f],
.timeline-mensaje-fila-ruido:focus-within[b-7k5r8xos6f] {
    opacity: 1;
}

.timeline-ruido-confirmar[b-7k5r8xos6f] {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-primary-500);
    font: var(--font-body-sm);
    cursor: pointer;
    text-decoration: underline;
}

.timeline-badge-canal[b-7k5r8xos6f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.timeline-mensaje-fecha[b-7k5r8xos6f] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    margin-left: auto;
}

.timeline-mensaje-cuerpo[b-7k5r8xos6f] {
    font: var(--font-body-md);
    color: var(--color-text);
    word-break: break-word;
    white-space: pre-wrap;
}

.timeline-entrega-whatsapp[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.timeline-ticks[b-7k5r8xos6f] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.timeline-ticks.leido[b-7k5r8xos6f] {
    color: var(--color-system-text);
}

.timeline-error-entrega[b-7k5r8xos6f] {
    font: var(--font-body-sm);
    color: var(--color-danger-700);
}

.timeline-adjuntos[b-7k5r8xos6f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.timeline-adjunto-chip[b-7k5r8xos6f] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: var(--border-default);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-sm);
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

a.timeline-adjunto-chip:hover[b-7k5r8xos6f] {
    border-color: var(--color-primary-300);
    background-color: var(--color-primary-50);
}

.timeline-adjunto-nombre[b-7k5r8xos6f] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-adjunto-tamano[b-7k5r8xos6f] {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.timeline-adjunto-grupo[b-7k5r8xos6f] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.timeline-adjunto-actualizar-documento[b-7k5r8xos6f] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px dashed var(--color-primary-300);
    background: none;
    color: var(--color-primary-500);
    font: var(--font-body-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.timeline-adjunto-actualizar-documento:hover[b-7k5r8xos6f] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

/* Marcador pasivo de detección IA (sin botones — la decisión vive en
   AccionCenter.razor, columna derecha de Bandeja.razor): solo dice "Hydra
   detectó algo aquí, mira Acciones sugeridas". Centrado con separadores a
   ambos lados, mismo tratamiento que el mockup de referencia para "eventos
   de sistema" en el timeline. Cian, no cobre: el presupuesto de uso del cian
   cubre literalmente "IA cuando actúa" (02 § 3.3), y el cobre sale de la
   paleta (DDL-012). */
.timeline-marca-ia[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-system-text);
}

.timeline-marca-ia-linea[b-7k5r8xos6f] {
    flex: 1;
    max-width: 40px;
    height: 1px;
    background-color: var(--color-system-indicator);
    opacity: 0.4;
}

/* --- Evento del sistema (§ 16.7) — tratamiento neutro, distinto de un
   mensaje: no tiene remitente ni burbuja, es un hecho registrado. --- */
.timeline-evento-fila[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    align-self: center;
    max-width: 90%;
}

.timeline-evento-icono[b-7k5r8xos6f] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.timeline-evento[b-7k5r8xos6f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.timeline-evento-texto[b-7k5r8xos6f] {
    color: var(--color-text);
}

.timeline-evento-enlace[b-7k5r8xos6f] {
    color: var(--color-primary-500);
    text-decoration: none;
    font-weight: 600;
}

.timeline-evento-enlace:hover[b-7k5r8xos6f] {
    text-decoration: underline;
}

/* Nota interna (Project-Hydra-Negocio/tecnico/docs/COMUNICACIONES.md § 12.3): inconfundible con un mensaje
   saliente — ni se alinea a un lado ni usa el fondo de marca del saliente, y
   el borde discontinuo marca que no salió del equipo. Mismo avatar neutro que
   el resto de remitentes. */
/* Envoltorio del AvatarUsuario del autor de una nota interna: solo fija su sitio en la fila. */
.timeline-autor-nota[b-7k5r8xos6f] {
    flex-shrink: 0;
    display: flex;
}

.timeline-nota-interna-fila[b-7k5r8xos6f] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    align-self: center;
    width: 78%;
}

.timeline-nota-interna[b-7k5r8xos6f] {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card-sm);
    border: var(--border-default);
    border-style: dashed;
    background-color: var(--color-surface);
}

.timeline-nota-interna-cuerpo[b-7k5r8xos6f] {
    font: var(--font-body-md);
    color: var(--color-text);
    word-break: break-word;
    white-space: pre-wrap;
}
/* /Features/Comunicaciones/Pages/Bandeja.razor.rz.scp.css */
.bandeja-contenedor[b-bg4yx9j8w2] {
    max-width: none;
}

/* --- Modal "Actualizar documentación desde conversación" (§ 12.7) --- */

.modal-actualizar-documento-confianza[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font: var(--font-body-sm);
}

.modal-actualizar-documento-error[b-bg4yx9j8w2] {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    font: var(--font-body-sm);
}

.modal-actualizar-documento-formulario[b-bg4yx9j8w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- Layout de tres columnas (Inbox / Conversation / Context) ---

   Gen 2: el título de la pantalla bajó a la cabecera de la columna de la
   lista, así que ya no hay banda de cabecera por encima del layout y las
   tres columnas recuperan ese alto. */

.bandeja-layout[b-bg4yx9j8w2] {
    /* Ancho de la lista de hilos (D-26): 360 px por defecto, ajustable con el divisor
       (variable --bandeja-lista-ancho en <html>, ver panel-redimensionable.js); nunca
       más del 40 % de la ventana, para no dejar sin sitio a la conversación. */
    --bandeja-ancho-lista: clamp(260px, var(--bandeja-lista-ancho, 360px), 40vw);
    display: grid;
    grid-template-columns: var(--bandeja-ancho-lista) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    height: calc(100vh - 120px);
    min-height: 480px;
}

.bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
    grid-template-columns: var(--bandeja-ancho-lista) minmax(0, 1fr) 300px;
}

.bandeja-layout[b-bg4yx9j8w2] {
    position: relative;
}

.bandeja-divisor[b-bg4yx9j8w2] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--bandeja-ancho-lista);
    width: var(--space-5);
    cursor: col-resize;
    touch-action: none;
    z-index: 1;
}

.bandeja-divisor:hover[b-bg4yx9j8w2],
.bandeja-divisor:focus-visible[b-bg4yx9j8w2],
.bandeja-divisor.divisor-arrastrando[b-bg4yx9j8w2] {
    background-color: var(--color-primary-200);
}

.bandeja-columna[b-bg4yx9j8w2] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- Columna Inbox (filtros + lista de conversaciones) --- */

.bandeja-filtros[b-bg4yx9j8w2] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
}

.bandeja-filtros-form[b-bg4yx9j8w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: var(--border-default);
}

/* Cabecera de la columna de la lista (Gen 2): título de la pantalla y
   "Redactar", como en el mockup. */
.bandeja-lista-cabecera[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) 0;
}

.bandeja-lista-titulo[b-bg4yx9j8w2] {
    margin: 0;
    font: var(--font-heading-sm);
    color: var(--color-text);
}

/* Toggle "Clientes | Mi buzón personal" — siempre visible encima de los
   filtros, que solo aplican a la vista de Clientes. */
.bandeja-vista-toggle[b-bg4yx9j8w2] {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) 0;
}

.bandeja-vista-personal-descripcion[b-bg4yx9j8w2] {
    margin: 0;
    padding: var(--space-4);
    border-bottom: var(--border-default);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.bandeja-vista-personal-solo-lectura[b-bg4yx9j8w2] {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.bandeja-toggles[b-bg4yx9j8w2] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.bandeja-toggle[b-bg4yx9j8w2] {
    height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1,44:1). */
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-label-md);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

/* Solo los dos conmutadores de ámbito (no los chips de filtro, que comparten la
   clase): se reparten el ancho de la columna y su rótulo puede ocupar dos líneas;
   con height fija de 32px «Clientes» se salía del botón. */
.bandeja-vista-toggle .bandeja-toggle[b-bg4yx9j8w2] {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    line-height: 1.2;
    text-align: center;
}

.bandeja-toggle:hover[b-bg4yx9j8w2] {
    border-color: var(--color-primary-300);
    color: var(--color-text);
}

.bandeja-toggle-activo[b-bg4yx9j8w2],
.bandeja-toggle-activo:hover[b-bg4yx9j8w2] {
    border-color: var(--color-primario-fondo);
    background-color: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.bandeja-filtros-avanzados summary[b-bg4yx9j8w2] {
    font: var(--font-label-md);
    color: var(--color-primary-500);
    cursor: pointer;
    list-style: none;
}

.bandeja-filtros-avanzados summary[b-bg4yx9j8w2]::-webkit-details-marker {
    display: none;
}

.bandeja-filtros-avanzados-campos[b-bg4yx9j8w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

/* «Contactar con un compañero»: desplegable bajo el conmutador de ámbito, con el mismo aire que «Más filtros». */
.companeros[b-bg4yx9j8w2] {
    padding: var(--space-3) var(--space-4) 0;
}

.companeros summary[b-bg4yx9j8w2] {
    font: var(--font-label-md);
    color: var(--color-primary-500);
    cursor: pointer;
}

.companeros-ayuda[b-bg4yx9j8w2] {
    margin: var(--space-2) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.companeros-lista[b-bg4yx9j8w2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.companero[b-bg4yx9j8w2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: var(--border-default);
}

.companero-nombre[b-bg4yx9j8w2] {
    font: var(--font-label-md);
    color: var(--color-text);
}

.companero-dato[b-bg4yx9j8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-body-sm);
}

.companero-rotulo[b-bg4yx9j8w2] {
    color: var(--color-text-muted);
}

.companero-valor[b-bg4yx9j8w2] {
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.companero-sin-dato[b-bg4yx9j8w2] {
    color: var(--color-text-muted);
}

.bandeja-lista[b-bg4yx9j8w2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.bandeja-grupo-cabecera[b-bg4yx9j8w2] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-align: left;
}

.bandeja-grupo-cabecera:hover[b-bg4yx9j8w2] {
    background-color: var(--color-surface-hover);
}

/* Triage es el grupo que reclama atención: el mockup lo pinta en ámbar.
   No es la única señal — su rótulo ya dice "Sin Cliente empresarial asignado". */
.bandeja-grupo-urgente[b-bg4yx9j8w2] {
    color: var(--color-warning-700);
}

.bandeja-grupo-titulo[b-bg4yx9j8w2] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bandeja-grupo-caret[b-bg4yx9j8w2] {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--motion-fast) var(--ease-standard);
}

/* El caret apunta hacia abajo abierto y a la derecha cerrado; el estado lo
   manda aria-expanded, no una clase aparte. */
.bandeja-grupo-cabecera[aria-expanded="false"] .bandeja-grupo-caret[b-bg4yx9j8w2] {
    transform: rotate(-90deg);
}

.bandeja-grupo-filas[b-bg4yx9j8w2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* FilaConversacion es un componente hijo sin su propio .razor.css: el
   aislamiento de CSS de Blazor no aplica el atributo de scope de Bandeja a
   lo que ese componente renderiza, así que cualquier selector que necesite
   alcanzar su marcado tiene que cruzar la frontera con ::deep (verificado en
   navegador — sin ::deep estas reglas compilan pero no coinciden con nada). */
.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-default);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-left-color var(--motion-fast) var(--ease-standard);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila:hover {
    background-color: var(--color-surface-hover);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-activa {
    background-color: var(--color-primary-50);
    border-left-color: var(--color-primary-500);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila.fila-enfocada {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-esperando:not(.bandeja-fila-activa) {
    border-left-color: var(--color-warning-500);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-avatar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-600);
    font: var(--font-label-md);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-canal {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-canal-whatsapp {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-canal-correo {
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-contenido {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-linea1,
.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-linea2,
.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-linea3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/*
  «Cliente | Asunto» fusionados en un solo título (banco visual, Iteración 2).
  min-width: 0 en el envoltorio para que el elipsis del hijo funcione dentro
  de un flex item — sin él, un título largo empuja la fecha fuera de la fila
  en vez de recortarse.
*/
.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-titulo {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 0;
    overflow: hidden;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-remitente {
    font: var(--font-label-md);
    font-weight: 600;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-separador {
    color: var(--color-border-strong);
    flex-shrink: 0;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-fecha {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-asunto {
    font: var(--font-body-md);
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-linea3 > :not(.bandeja-fila-preview) {
    /* Estado y recuento de ruido (Badge): que no se partan en vertical cuando el
       preview les quita el sitio; quien cede es el preview, que ya recorta. */
    flex-shrink: 0;
    white-space: nowrap;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-preview {
    min-width: 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Columna central (Conversation Workspace) --- */

.bandeja-centro[b-bg4yx9j8w2] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow: hidden;
}

.bandeja-centro-cabecera[b-bg4yx9j8w2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-default);
    flex-wrap: wrap;
}

.bandeja-centro-titulo-fila[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bandeja-centro-titulo h2[b-bg4yx9j8w2] {
    margin: 0 0 var(--space-2);
    font: var(--font-heading-sm);
}

.bandeja-centro-copiar-enlace[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.bandeja-centro-copiar-enlace:hover[b-bg4yx9j8w2] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.bandeja-centro-copiar-enlace:focus-visible[b-bg4yx9j8w2] {
    outline: var(--border-focus);
}

.bandeja-centro-meta[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.bandeja-centro-subtitulo[b-bg4yx9j8w2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.bandeja-centro-acciones[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.bandeja-badge-canal[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-body-sm);
}

.bandeja-badge-canal-whatsapp[b-bg4yx9j8w2] {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.bandeja-badge-canal-correo[b-bg4yx9j8w2] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
}

/* --- Columna de contexto del cliente + Action Center (Project-Hydra-Negocio/tecnico/docs/COMUNICACIONES.md
   § 12.5/12.6). El Action Center (AccionCenter.razor) vive primero en esta
   misma columna — es panel de decisiones, tiene prioridad sobre la ficha de
   solo lectura. La ficha de cliente sigue acotada a los datos reales de
   ClienteDetalleDto — sin cumplimiento/centros/trabajadores todavía. --- */

.bandeja-cliente[b-bg4yx9j8w2] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    padding: var(--space-4);
    gap: var(--space-4);
    overflow-y: auto;
}

.bandeja-cliente-titulo[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bandeja-cliente-cabecera[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bandeja-cliente-avatar[b-bg4yx9j8w2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
    font: var(--font-heading-sm);
}

.bandeja-cliente-identidad[b-bg4yx9j8w2] {
    flex: 1;
    min-width: 0;
}

.bandeja-cliente-identidad h3[b-bg4yx9j8w2] {
    margin: 0;
    font: var(--font-body-lg);
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeja-cliente-cif[b-bg4yx9j8w2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.bandeja-cliente-datos[b-bg4yx9j8w2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-4) 0 0;
}

.bandeja-cliente-datos dt[b-bg4yx9j8w2] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.bandeja-cliente-datos dd[b-bg4yx9j8w2] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

.bandeja-cliente-notas[b-bg4yx9j8w2] {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
}

.bandeja-cliente-notas-titulo[b-bg4yx9j8w2] {
    display: block;
    margin-bottom: var(--space-1);
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.bandeja-cliente-notas p[b-bg4yx9j8w2] {
    margin: 0;
    font: var(--font-body-sm);
    color: var(--color-text);
}

/* --- "Documentos citados" (tres niveles de certeza — ver DocumentoCitadoDetalleDto) --- */

.bandeja-documentos-citados[b-bg4yx9j8w2] {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
}

.bandeja-documentos-citados-lista[b-bg4yx9j8w2] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bandeja-documento-citado[b-bg4yx9j8w2] {
    /* En apilado: la columna de contexto mide ~280px y en una sola línea la meta
       (propietario + nivel, flex-shrink: 0) dejaba al nombre del documento en una
       letra. El nombre va arriba, entero, y la meta debajo. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
}

.bandeja-documento-citado-nombre[b-bg4yx9j8w2] {
    font: var(--font-body-sm);
    color: var(--color-text);
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
}

a.bandeja-documento-citado-nombre:hover[b-bg4yx9j8w2] {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.bandeja-documento-citado-meta[b-bg4yx9j8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.bandeja-documento-citado-propietario[b-bg4yx9j8w2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* --- Adaptive Layout (Project-Hydra-Negocio/tecnico/docs/COMUNICACIONES.md § 11) — colapso progresivo por
   ancho; los Drawer deslizantes por breakpoint quedan pendientes (§ 14), esto
   es el escalón de apilado que ya cubría el layout anterior, con los cortes
   documentados en vez de uno solo. --- */

@media (max-width: 1439px) {
    .bandeja-layout[b-bg4yx9j8w2] {
        --bandeja-ancho-lista: clamp(260px, var(--bandeja-lista-ancho, 300px), 40vw);
    }

    .bandeja-layout[b-bg4yx9j8w2],
    .bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
        grid-template-columns: var(--bandeja-ancho-lista) minmax(0, 1fr) 280px;
    }
}

@media (max-width: 1279px) {
    .bandeja-layout[b-bg4yx9j8w2],
    .bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
        grid-template-columns: var(--bandeja-ancho-lista) minmax(0, 1fr);
    }

    .bandeja-cliente[b-bg4yx9j8w2] {
        display: none;
    }
}

@media (max-width: 1023px) {
    .bandeja-layout[b-bg4yx9j8w2],
    .bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .bandeja-columna[b-bg4yx9j8w2] {
        height: auto;
        max-height: 70vh;
    }
}

@media (max-width: 1023px) {
    .bandeja-divisor[b-bg4yx9j8w2] {
        display: none;
    }
}
/* /Features/Comunicaciones/Pages/Buzon.razor.rz.scp.css */
.buzon-contenedor[b-zf5dxjq8sc] {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.buzon-selector-conexion[b-zf5dxjq8sc] {
    max-width: 520px;
    margin: 0;
}

.buzon-layout[b-zf5dxjq8sc] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.buzon-columna[b-zf5dxjq8sc] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.buzon-carpetas[b-zf5dxjq8sc] {
    padding: var(--space-3);
}

.buzon-mensajes[b-zf5dxjq8sc] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.buzon-lista-carpetas[b-zf5dxjq8sc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.buzon-lista-carpetas-hijas[b-zf5dxjq8sc] {
    padding-left: var(--space-5);
    margin-top: var(--space-1);
}

.buzon-carpeta[b-zf5dxjq8sc] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text);
    font: var(--font-body-md);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.buzon-carpeta:hover[b-zf5dxjq8sc] {
    background-color: var(--color-surface-hover);
}

.buzon-carpeta-activa[b-zf5dxjq8sc] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-100);
    color: var(--color-primary-500);
    font-weight: 600;
}

.buzon-paginador[b-zf5dxjq8sc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: 0;
}

.buzon-tabla-contenedor[b-zf5dxjq8sc] {
    overflow-x: auto;
}

.buzon-tabla[b-zf5dxjq8sc] {
    margin: 0;
}

.buzon-tabla th[b-zf5dxjq8sc] {
    height: 40px;
    background-color: var(--color-surface-hover);
    font-size: 0.6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.buzon-tabla th[b-zf5dxjq8sc],
.buzon-tabla td[b-zf5dxjq8sc] {
    padding: var(--space-3) var(--space-4);
}

.buzon-pagina-actual[b-zf5dxjq8sc] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

@media (max-width: 1000px) {
    .buzon-layout[b-zf5dxjq8sc] {
        grid-template-columns: 1fr;
    }

    .buzon-columna[b-zf5dxjq8sc] {
        min-height: auto;
    }
}

/* Mismo botón que .composer-adjunto-quitar del ComposerBar: quita un adjunto
   pendiente de la redacción. Lleva el icono "cerrar", así que necesita
   inline-flex para centrar el svg. */
.bandeja-adjunto-quitar[b-zf5dxjq8sc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    cursor: pointer;
}

.bandeja-adjunto-quitar:hover[b-zf5dxjq8sc] {
    color: var(--color-danger-700);
}
/* /Features/Comunicaciones/Pages/Macros.razor.rz.scp.css */
/* Macros de respuesta, Gen 2 («Macros TALVEG.dc.html»). Solo tokens de tokens.css. */

.enlace-volver-bandeja[b-4kjfms6g5i] {
    font: var(--font-label);
    color: var(--color-primary-500);
    text-decoration: none;
}

.enlace-volver-bandeja:hover[b-4kjfms6g5i] {
    color: var(--color-primary-600);
    text-decoration: underline;
}

/* La tarjeta de filtros la pone .barra-filtros-lista (list-page.css); aquí el
   selector lleva al lado el resumen de lo que hay en la lista. */
.macros-filtros[b-4kjfms6g5i] {
    flex-wrap: wrap;
    align-items: flex-end;
}

.macros-filtros[b-4kjfms6g5i]  .campo {
    flex: 0 1 340px;
    min-width: 240px;
}

.macros-filtro-resumen[b-4kjfms6g5i] {
    margin: 0 0 var(--space-3);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.macros-lista[b-4kjfms6g5i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.macros-tabla-contenedor[b-4kjfms6g5i] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.tabla-macros[b-4kjfms6g5i] {
    min-width: 820px;
    table-layout: fixed;
}

.tabla-macros td[b-4kjfms6g5i] {
    vertical-align: top;
}

.macros-col-cliente[b-4kjfms6g5i] {
    width: 280px;
}

.macros-col-acciones[b-4kjfms6g5i] {
    width: 180px;
    text-align: right;
}

.macros-solo-lectores[b-4kjfms6g5i] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.macro-titulo[b-4kjfms6g5i] {
    display: block;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.macro-resumen[b-4kjfms6g5i] {
    display: block;
    margin-top: 2px;
    font: var(--font-caption);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.macro-cliente[b-4kjfms6g5i] {
    color: var(--color-text);
}

.macros-acciones-fila[b-4kjfms6g5i] {
    display: inline-flex;
    gap: var(--space-2);
}

.macros-acciones-fila[b-4kjfms6g5i]  .boton-eliminar-macro {
    color: var(--color-danger-700);
}

.macros-acciones-fila[b-4kjfms6g5i]  .boton-eliminar-macro:hover {
    background-color: var(--color-danger-50);
}

.macros-drawer-subtitulo[b-4kjfms6g5i] {
    margin: 0 0 var(--space-4);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.macros-conflicto[b-4kjfms6g5i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
}

.macros-conflicto-titulo[b-4kjfms6g5i] {
    font: var(--font-label);
    color: var(--color-warning-700);
}

.macros-conflicto-texto[b-4kjfms6g5i] {
    font: var(--font-caption);
    color: var(--color-warning-700);
}

.macros-conflicto-acciones[b-4kjfms6g5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.macros-conflicto-copiar[b-4kjfms6g5i] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-caption);
    color: var(--color-text);
}
/* /Features/Configuracion/Components/AutomatizacionesPanel.razor.rz.scp.css */
.cabecera-automatizaciones h2[b-30hghgu0m9] {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
}

.cabecera-automatizaciones p[b-30hghgu0m9] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.tabla-automatizaciones[b-30hghgu0m9] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.fila-automatizaciones[b-30hghgu0m9] {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr 0.6fr;
    gap: var(--space-3);
    align-items: center;
    padding: 0 var(--space-5);
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
}

.fila-automatizaciones:last-child[b-30hghgu0m9] {
    border-bottom: none;
}

.fila-cabecera[b-30hghgu0m9] {
    min-height: 40px;
    background-color: var(--color-surface-subtle);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.celda-nombre[b-30hghgu0m9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nombre-trabajo[b-30hghgu0m9] {
    font: var(--font-body-md);
    font-weight: 600;
}

.descripcion-trabajo[b-30hghgu0m9] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.interruptor[b-30hghgu0m9] {
    width: 40px;
    height: 22px;
    flex: none;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    cursor: pointer;
    position: relative;
    padding: 0;
}

.interruptor:disabled[b-30hghgu0m9] {
    cursor: not-allowed;
    opacity: .6;
}

.interruptor-activo[b-30hghgu0m9] {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.interruptor-pomo[b-30hghgu0m9] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-control);
    transition: left .15s ease;
}

.interruptor-activo .interruptor-pomo[b-30hghgu0m9] {
    left: 20px;
}

.celda-resultado[b-30hghgu0m9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.detalle-resultado[b-30hghgu0m9] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.siempre-activo[b-30hghgu0m9] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.nota-auditoria[b-30hghgu0m9] {
    display: inline-flex;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}
/* /Features/Configuracion/Components/ParametrosSistemaPanel.razor.rz.scp.css */
.tarjeta-configuracion[b-uge8wwxc62] {
    max-width: 480px;
}

.descripcion-configuracion[b-uge8wwxc62] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-bottom: var(--space-4);
}

.acciones-formulario[b-uge8wwxc62] {
    margin-top: var(--space-4);
}
/* /Features/Configuracion/Pages/Configuracion.razor.rz.scp.css */
/*
   Hub de Configuración contra «Configuracion TALVEG.dc.html» y el marco de Design
   (marco-talveg.js, .tvm-cfg, DDL-083): valores literales del marcado fuente.
   La cabecera (kicker «Sistema» + h1) la pinta CabeceraPagina, que ya trae
   el margen inferior (.cabecera-pagina, list-page.css). El estado del enlace de
   salida lo pinta EstadoVacio.
*/

/* La página se aparta del panel de sección fijo (el marco da padding-left: 248px al área principal). */
.configuracion-pagina[b-iujymdj9l2] {
    margin-left: 248px;
}

.hub-configuracion[b-iujymdj9l2] {
    display: block;
}

/* Panel de sección: fijo bajo la cabecera, junto al menú lateral, a toda la altura. */
.subnav-configuracion[b-iujymdj9l2] {
    box-sizing: border-box;
    position: fixed;
    top: var(--navbar-height);
    left: var(--sidebar-width);
    bottom: 0;
    width: 248px;
    z-index: 30;
    overflow-y: auto;
    padding: 24px 12px 24px 20px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    transition: left var(--motion-transition) var(--ease-fluid);
}

html[data-menu-compacto] .subnav-configuracion[b-iujymdj9l2] {
    left: var(--sidebar-width-compacto);
}

.titulo-subnav-configuracion[b-iujymdj9l2] {
    margin: 0 0 12px 8px;
    font: 700 16px/22px var(--font-family);
    color: var(--color-text);
}

.grupo-subnav[b-iujymdj9l2] {
    display: block;
}

.titulo-grupo-subnav[b-iujymdj9l2] {
    display: block;
    margin: 16px 8px 6px;
    font: 600 11px/14px var(--font-family);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.lista-subnav[b-iujymdj9l2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entrada-subnav[b-iujymdj9l2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font: 500 13px/18px var(--font-family);
}

.entrada-subnav:hover[b-iujymdj9l2] {
    background-color: var(--color-surface-hover);
}

.entrada-subnav:focus-visible[b-iujymdj9l2] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.entrada-subnav-activa[b-iujymdj9l2],
.entrada-subnav-activa:hover[b-iujymdj9l2] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
    font-weight: 600;
}

.descripcion-entrada-subnav[b-iujymdj9l2] {
    font: 400 12px/16px var(--font-family);
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .subnav-configuracion[b-iujymdj9l2] {
        transition: none;
    }
}

/* Hasta 1100 px (marco de Design, marco-talveg.js: @media (max-width:1100px) .tvm-cfg) el panel pasa a tira horizontal
   de 52 px bajo la cabecera. Entre 1024 y 1100 px la barra lateral sigue ahí y la tira empieza donde acaba ella
   (left de la regla base); por debajo de 1024 px la barra desaparece y la tira ocupa todo el ancho (bloque siguiente). */
@media (max-width: 1100px) {
    .configuracion-pagina[b-iujymdj9l2] {
        margin-left: 0;
        margin-top: 52px;
    }

    .subnav-configuracion[b-iujymdj9l2] {
        right: 0;
        bottom: auto;
        width: auto;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 16px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .titulo-subnav-configuracion[b-iujymdj9l2],
    .titulo-grupo-subnav[b-iujymdj9l2],
    .descripcion-entrada-subnav[b-iujymdj9l2] {
        display: none;
    }

    .grupo-subnav[b-iujymdj9l2],
    .lista-subnav[b-iujymdj9l2] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .entrada-subnav[b-iujymdj9l2] {
        flex: none;
        white-space: nowrap;
    }
}

/* Sin barra lateral (cajón, cabecera de 56 px): la tira ocupa todo el ancho bajo la cabecera. */
@media (max-width: 1023px) {
    .subnav-configuracion[b-iujymdj9l2],
    html[data-menu-compacto] .subnav-configuracion[b-iujymdj9l2] {
        top: 56px;
        left: 0;
    }
}

.contenido-configuracion[b-iujymdj9l2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.panel-configuracion-host[b-iujymdj9l2] {
    min-width: 0;
}

.migas-configuracion[b-iujymdj9l2] {
    margin: 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.separador-migas[b-iujymdj9l2] {
    color: var(--color-border-strong);
}

.miga-actual[b-iujymdj9l2] {
    color: var(--color-text);
}
/* /Features/Configuracion/Pages/OrdenMenuLateral.razor.rz.scp.css */
/* Mockup «Orden del Menu TALVEG.dc.html». El gris pizarra (--color-info-*) marca el plano de
   plataforma, como en Plataforma.razor. */

.orden-menu[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 1180px;
}

.orden-menu-migas[b-yi5z1dxb2n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.orden-menu-migas > span[aria-hidden="true"][b-yi5z1dxb2n] {
    color: var(--color-border-strong);
}

.orden-menu-miga-actual[b-yi5z1dxb2n] {
    color: var(--color-text);
}

.orden-menu-cabecera[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.orden-menu-cabecera p[b-yi5z1dxb2n] {
    margin: 0;
    color: var(--color-text-muted);
    max-width: 74ch;
    text-wrap: pretty;
}

.orden-menu-ceja[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.orden-menu-global[b-yi5z1dxb2n] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-info-500);
    border-radius: var(--radius-lg);
    background: var(--color-info-50);
}

.orden-menu-global > div[b-yi5z1dxb2n] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.orden-menu-global-icono[b-yi5z1dxb2n] {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-info-500);
}

.orden-menu-global-titulo[b-yi5z1dxb2n] {
    font: var(--font-h4);
}

.orden-menu-global ul[b-yi5z1dxb2n] {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-text-muted);
}

.orden-menu-etiquetas[b-yi5z1dxb2n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.orden-menu-etiquetas span[b-yi5z1dxb2n] {
    font: var(--font-caption);
    padding: 3px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-info-500);
}

.orden-menu-avisos[b-yi5z1dxb2n] {
    display: contents;
}

.orden-menu-aviso[b-yi5z1dxb2n] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
}

.orden-menu-aviso > div[b-yi5z1dxb2n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orden-menu-aviso strong[b-yi5z1dxb2n] {
    font: var(--font-label);
    font-size: 14px;
}

.orden-menu-aviso > div > span[b-yi5z1dxb2n] {
    color: var(--color-text-muted);
}

.orden-menu-aviso-icono[b-yi5z1dxb2n] {
    display: inline-flex;
}

.orden-menu-aviso-exito[b-yi5z1dxb2n] {
    background: var(--color-success-50);
    border: 1px solid var(--color-success-500);
}

.orden-menu-aviso-exito .orden-menu-aviso-icono[b-yi5z1dxb2n] {
    color: var(--color-success-700);
}

.orden-menu-aviso-error[b-yi5z1dxb2n] {
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-500);
}

.orden-menu-aviso-error .orden-menu-aviso-icono[b-yi5z1dxb2n] {
    color: var(--color-danger-700);
}

.orden-menu-aviso-conflicto[b-yi5z1dxb2n] {
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
}

.orden-menu-aviso-conflicto .orden-menu-aviso-icono[b-yi5z1dxb2n] {
    color: var(--color-warning-700);
}

.orden-menu-columnas[b-yi5z1dxb2n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6);
    align-items: start;
}

.orden-menu-tarjeta[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.orden-menu-tarjeta h2[b-yi5z1dxb2n] {
    margin: 0;
    font: var(--font-h4);
}

.orden-menu-tarjeta-cabecera[b-yi5z1dxb2n] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.orden-menu-tarjeta-cabecera h2[b-yi5z1dxb2n] {
    font: var(--font-h3);
}

.orden-menu-recuento-total[b-yi5z1dxb2n],
.orden-menu-ayuda[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.orden-menu-ayuda[b-yi5z1dxb2n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.orden-menu-ayuda kbd[b-yi5z1dxb2n] {
    font: var(--font-caption);
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.orden-menu-cargando[b-yi5z1dxb2n] {
    color: var(--color-text-muted);
}

.orden-menu-grupos[b-yi5z1dxb2n],
.orden-menu-enlaces[b-yi5z1dxb2n] {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.orden-menu-grupos[b-yi5z1dxb2n] {
    padding: 0;
    gap: var(--space-3);
}

.orden-menu-grupo[b-yi5z1dxb2n] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.orden-menu-enlaces[b-yi5z1dxb2n] {
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3) 44px;
}

.orden-menu-fila[b-yi5z1dxb2n] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.orden-menu-fila-grupo[b-yi5z1dxb2n] {
    min-height: 52px;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.orden-menu-fila[data-cogida="true"][b-yi5z1dxb2n] {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
}

.orden-menu-fila[data-arrastrando="true"][b-yi5z1dxb2n] {
    opacity: .45;
}

.orden-menu-fila[data-destino="true"][b-yi5z1dxb2n] {
    border-color: var(--color-primary-500);
    border-style: dashed;
}

.orden-menu-asa[b-yi5z1dxb2n] {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: grab;
}

.orden-menu-asa[aria-pressed="true"][b-yi5z1dxb2n] {
    border-color: var(--color-primario-fondo);
    background: var(--color-primario-fondo);
    color: var(--color-primario-texto);
}

.orden-menu-posicion[b-yi5z1dxb2n] {
    flex: none;
    width: 22px;
    text-align: right;
    font: var(--font-caption);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.orden-menu-nombre-grupo[b-yi5z1dxb2n] {
    flex: 1;
    min-width: 0;
    font: var(--font-label);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.orden-menu-nombre-enlace[b-yi5z1dxb2n] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
}

.orden-menu-icono-enlace[b-yi5z1dxb2n],
.orden-menu-ruta[b-yi5z1dxb2n] {
    color: var(--color-text-muted);
}

.orden-menu-icono-enlace[b-yi5z1dxb2n] {
    display: inline-flex;
}

.orden-menu-ruta[b-yi5z1dxb2n] {
    font: var(--font-caption);
}

.orden-menu-distintivo[b-yi5z1dxb2n] {
    font: var(--font-caption);
    padding: 1px 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.orden-menu-distintivo-nuevo[b-yi5z1dxb2n] {
    border-color: var(--color-primary-100);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.orden-menu-flechas[b-yi5z1dxb2n] {
    flex: none;
    display: flex;
    gap: 2px;
}

.orden-menu-flecha[b-yi5z1dxb2n] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.orden-menu-flecha:disabled[b-yi5z1dxb2n] {
    opacity: .35;
    cursor: not-allowed;
}

.orden-menu-previa[b-yi5z1dxb2n] {
    position: sticky;
    top: 88px;
}

.orden-menu-previa .orden-menu-tarjeta[b-yi5z1dxb2n] {
    gap: var(--space-3);
    padding: var(--space-4);
}

.orden-menu-rol[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: var(--font-label);
}

.orden-menu-rol select[b-yi5z1dxb2n] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font: var(--font-body-md);
    color: var(--color-text);
}

.orden-menu-previa-menu[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
}

.orden-menu-previa-grupo[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-2);
}

.orden-menu-previa-titulo[b-yi5z1dxb2n] {
    padding: 0 var(--space-3) var(--space-1);
    font: var(--font-body-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: .7;
}

.orden-menu-previa-enlace[b-yi5z1dxb2n] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 13px;
}

.orden-menu-previa-texto[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.orden-menu-barra[b-yi5z1dxb2n] {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 -6px 20px rgba(22, 30, 39, .06);
}

.orden-menu-barra-estado[b-yi5z1dxb2n] {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orden-menu-barra-estado strong[b-yi5z1dxb2n] {
    font: var(--font-label);
    font-size: 14px;
}

.orden-menu-barra-estado span[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.orden-menu-boton-texto[b-yi5z1dxb2n] {
    height: 40px;
    border-radius: var(--radius-md);
    font: var(--font-label);
    font-size: 14px;
    cursor: pointer;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-primary-500);
}

.orden-menu-boton-texto:hover[b-yi5z1dxb2n] {
    color: var(--color-primary-600);
}

.orden-menu-boton-texto:disabled[b-yi5z1dxb2n] {
    opacity: .5;
    cursor: not-allowed;
}

.orden-menu-historial[b-yi5z1dxb2n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
}

.orden-menu-historial > div[b-yi5z1dxb2n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}

.orden-menu-historial-etiqueta[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.orden-menu-historial-valor[b-yi5z1dxb2n] {
    font: var(--font-body-lg);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.orden-menu-historial-pista[b-yi5z1dxb2n],
.orden-menu-sin-historial[b-yi5z1dxb2n] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.orden-menu-sin-historial[b-yi5z1dxb2n] {
    margin: 0;
}

.orden-menu-anuncio[b-yi5z1dxb2n] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.orden-menu-velo[b-yi5z1dxb2n] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--color-scrim);
}

.orden-menu-dialogo[b-yi5z1dxb2n] {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
}

.orden-menu-dialogo h2[b-yi5z1dxb2n] {
    margin: 0;
    font: var(--font-h4);
}

.orden-menu-dialogo p[b-yi5z1dxb2n] {
    margin: 0;
    color: var(--color-text-muted);
}

.orden-menu-dialogo-acciones[b-yi5z1dxb2n] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .orden-menu-columnas[b-yi5z1dxb2n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .orden-menu-previa[b-yi5z1dxb2n] {
        position: static;
    }

    .orden-menu-historial[b-yi5z1dxb2n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .orden-menu-enlaces[b-yi5z1dxb2n] {
        padding-left: var(--space-3);
    }

    .orden-menu-ruta[b-yi5z1dxb2n] {
        display: none;
    }
}
/* /Features/Configuracion/Pages/OrganizacionLogo.razor.rz.scp.css */
.organizacion-logo-migas[b-6re6vqiaab] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-bottom: var(--space-3);
}

.organizacion-logo-miga-actual[b-6re6vqiaab] {
    font-weight: 600;
}

.organizacion-logo-cabecera p[b-6re6vqiaab] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    max-width: 640px;
}

.organizacion-logo-tarjeta[b-6re6vqiaab] {
    max-width: 480px;
}

.organizacion-logo-vista[b-6re6vqiaab] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.organizacion-logo-imagen[b-6re6vqiaab] {
    width: 256px;
    height: 256px;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Blanco de marca en los dos temas (mockup #fff), ver tokens.css. */
    background: var(--color-logo-fondo);
}

.organizacion-logo-sin-logo[b-6re6vqiaab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.organizacion-logo-selector[b-6re6vqiaab] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-bottom: var(--space-4);
}

.organizacion-logo-nota[b-6re6vqiaab],
.organizacion-logo-solo-lectura[b-6re6vqiaab] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-2);
}
/* /Features/Configuracion/Pages/SeleccionarClienteLecturaIa.razor.rz.scp.css */
/* Medidas del mockup «Lectura IA TALVEG.dc.html», pantalla A. */

.seleccion-cliente-lectura-ia[b-h5bltp5urw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 640px;
}

.lista-seleccion-cliente[b-h5bltp5urw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-seleccion-cliente[b-h5bltp5urw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-lg);
    font-weight: 600;
    text-decoration: none;
}

.item-seleccion-cliente:hover[b-h5bltp5urw] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-text);
}

.item-seleccion-cliente-flecha[b-h5bltp5urw] {
    color: var(--color-text-muted);
}

.sin-coincidencias-lectura-ia[b-h5bltp5urw] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}
/* /Features/Dashboard/Components/FilaPlataforma.razor.rz.scp.css */
.fila-plataforma[b-w5vtbitp2e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.fila-plataforma:hover[b-w5vtbitp2e] {
    border-color: var(--color-border-strong);
}

.fila-plataforma:focus-visible[b-w5vtbitp2e] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.fila-plataforma-nombre[b-w5vtbitp2e] {
    font: var(--font-label);
    color: var(--color-text);
}

.fila-plataforma-detalle[b-w5vtbitp2e] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.fila-plataforma-separador[b-w5vtbitp2e] {
    margin: 0 var(--space-2);
    color: var(--color-border-strong);
}

.fila-plataforma-rechazadas[b-w5vtbitp2e] {
    color: var(--color-danger-700);
    font-weight: 600;
}

/* Marca y nombre juntos: la fila reparte con space-between y un tercer hijo
   suelto empujaría el nombre al centro. */
.fila-plataforma-identidad[b-w5vtbitp2e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/*
  Tamaños del mockup (Inicio TALVEG): celda de 72px de ancho y 28 de alto.
  object-fit: contain porque los originales no comparten
  proporción —CTAIMA es apaisado 1536x688, Dokify y Nalanda son cuadrados de
  400— y estirarlos deformaría una marca registrada. Caja fija de 72x28 (la celda
  del mockup) alineada a la izquierda: con marcas de anchos distintos, una caja
  variable desalinearía los nombres. No se recolorean ni se deforman.

  Fondo: 15 de las 20 marcas son imágenes con transparencia y en 7 de ellas la
  tinta es mayoritariamente oscura (CTAIMA es 100 % tinta oscura sobre 89 %
  transparente; medido con Pillow el 2026-10-02): sobre
  --color-surface en oscuro se pierden. Mismo criterio que el logo de Tenant
  (#1040): --color-logo-fondo, blanco fijo en los dos temas. El mockup de
  Inicio no pinta fondo propio (solo se ve en claro, donde la superficie ya es
  blanca), así que no contradice nada. La caja blanca crece con box-shadow y no
  con padding para no mover el logo ni la fila: en claro es blanco sobre blanco
  y la fila queda idéntica.
*/
.fila-plataforma-logo[b-w5vtbitp2e] {
    flex: none;
    width: 72px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
    background: var(--color-logo-fondo);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--space-1) var(--color-logo-fondo);
}
/* /Features/Dashboard/Pages/Inicio.razor.rz.scp.css */
/*
  Inicio ("/") Gen 2 — piezas que solo existen en esta pantalla.

  Lo que ya compartía con los otros dos dashboards (.dashboard-subtitulo,
  .dashboard-resumen, .dashboard-pulso, .dashboard-lista-unificada…) se queda
  en wwwroot/css/dashboard.css: es global a propósito, porque
  DashboardEjecutivo y Visión de cartera lo usan y el aislamiento de CSS de
  Blazor no cruza entre componentes. Aquí solo entra lo que nadie más pinta.
*/

/*
  Cabecera: fecha de hoy + hora de la lectura, a la derecha del saludo (mockup
  "Inicio TALVEG"). Va dentro del slot Acciones de CabeceraPagina, que es una
  fila; esto es texto, no botones, así que se alinea al final de esa fila.
*/
.inicio-cabecera-meta[b-eccra7ttdk] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.inicio-fecha[b-eccra7ttdk] {
    white-space: nowrap;
}

.inicio-separador[b-eccra7ttdk] {
    color: var(--color-border-strong);
}

/*
  Indicador de sistema (02 § 3.1): lo que hace la plataforma por su cuenta —
  aquí, cuándo leyó los datos— se marca en cian, no en el azul de las acciones
  del usuario. --color-system-text para el texto (5,38:1 sobre Surface) y
  --color-system-indicator para el punto, que no es texto y le basta 3:1.
*/
.inicio-indicador-sistema[b-eccra7ttdk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    color: var(--color-system-text);
}

.inicio-punto-sistema[b-eccra7ttdk] {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--color-system-indicator);
}

/*
  Cabecera de sección: el <h2> a la izquierda y, a su lado, el recuento que
  explica lo que se está viendo ("5 grupos · 2 bloquean acceso") o la salida al
  listado completo. El margen superior sale del propio .dashboard-subtitulo, que
  sigue siendo quien separa las secciones; este contenedor solo los pone en la
  misma línea. Alineación por la línea base para que el título y el recuento se
  apoyen en la misma, pese a tener tamaños distintos.
*/
.inicio-seccion-cabecera[b-eccra7ttdk] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.inicio-seccion-meta[b-eccra7ttdk] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.inicio-seccion-enlace[b-eccra7ttdk] {
    margin-left: auto;
    font: var(--font-label-md);
    font-size: 0.8125rem;
}

/*
  Cierre de "Requiere atención": la única buena noticia de la pantalla. Tarjeta
  de una fila con marca de éxito y salida al Calendario (mockup), en vez del
  párrafo suelto que llevaba — el mismo ritmo de fila que .fila-plataforma.
*/
.inicio-cierre[b-eccra7ttdk] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5) var(--space-5);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.inicio-cierre-marca[b-eccra7ttdk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-success-50);
    border: 1px solid var(--color-success-500);
    color: var(--color-success-700);
}

.inicio-cierre-texto[b-eccra7ttdk] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font: var(--font-body-lg);
    color: var(--color-text);
}

.inicio-cierre-enlace[b-eccra7ttdk] {
    margin-left: auto;
    font: var(--font-label-md);
    font-size: 0.8125rem;
}
/* /Features/DashboardEjecutivo/Pages/DashboardEjecutivo.razor.rz.scp.css */
/* Espaciado propio de esta página (aislado por Blazor CSS scoping) — sin
   Tarjeta envolviendo ya el "Personalizar", hace falta separar la cabecera
   colapsable del bloque de KPIs siguiente. */
[b-awsv86vnpa] .seccion-colapsable {
    margin-bottom: var(--space-5);
}

.rejilla-categorias-kpi[b-awsv86vnpa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.categoria-kpi-titulo[b-awsv86vnpa] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.checkbox-kpi[b-awsv86vnpa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    cursor: pointer;
}

/* Resumen "N de M KPI mostrados" en la cabecera del colapsable, y el aviso de
   que lo marcado todavía no está guardado junto al botón que lo guarda: es ahí
   donde se decide pulsarlo. */
.resumen-seleccion[b-awsv86vnpa] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.acciones-personalizar[b-awsv86vnpa] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Sección de tiles: título a la izquierda, periodo y alcance a la derecha. */
.seccion-kpis[b-awsv86vnpa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.cabecera-seccion-kpis[b-awsv86vnpa] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.titulo-seccion-kpis[b-awsv86vnpa] {
    margin: 0;
    font: var(--font-heading-md);
}

.periodo-texto[b-awsv86vnpa] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

/* Descripción del KPI, a la derecha de su título dentro de la tarjeta. Vive en
   .tarjeta-acciones, que pinta Tarjeta.razor, pero el <span> es de esta página
   y por tanto lleva su atributo de ámbito: la regla sí casa. */
.descripcion-kpi[b-awsv86vnpa] {
    display: inline-block;
    max-width: 32rem;
    text-align: right;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.tarjeta-kpi[b-awsv86vnpa] {
    margin-bottom: var(--space-5);
}

/* Alcance distinto del resto del panel: la consulta que alimenta este KPI no
   recorre las demás organizaciones. */
.aviso-alcance-kpi[b-awsv86vnpa] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ donut */

.grafico-donut[b-awsv86vnpa] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.donut[b-awsv86vnpa] {
    width: 180px;
    height: 180px;
    flex: none;
}

.donut-fondo[b-awsv86vnpa] {
    fill: none;
    stroke: var(--color-border);
}

.donut-arco[b-awsv86vnpa] {
    fill: none;
}

.donut-total[b-awsv86vnpa] {
    fill: var(--color-text);
    font-size: 26px;
    font-weight: 700;
}

.leyenda-donut[b-awsv86vnpa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 14rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.leyenda-donut-item[b-awsv86vnpa] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    font: var(--font-body-md);
}

.leyenda-donut-punto[b-awsv86vnpa] {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 2px;
}

.leyenda-donut-etiqueta[b-awsv86vnpa] {
    flex: 1;
}

.leyenda-donut-valor[b-awsv86vnpa] {
    font-weight: 600;
}

.grafico-total[b-awsv86vnpa] {
    margin: var(--space-3) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ barras */

.barras-kpi[b-awsv86vnpa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.barra-kpi[b-awsv86vnpa] {
    display: grid;
    grid-template-columns: minmax(0, 18rem) 1fr auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 32px;
}

.barra-kpi-etiqueta[b-awsv86vnpa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.barra-kpi-carril[b-awsv86vnpa] {
    display: block;
    height: 18px;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    overflow: hidden;
}

.barra-kpi-relleno[b-awsv86vnpa] {
    display: block;
    height: 100%;
    border-radius: var(--radius-sm);
}

.barra-kpi-valor[b-awsv86vnpa] {
    font: var(--font-body-md);
    font-weight: 600;
    text-align: right;
    min-width: 3.5rem;
}

/* Sin barra y con motivo: un 0% dibujado sería indistinguible de una ausencia. */
.barra-kpi-sin-dato[b-awsv86vnpa] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-align: right;
}

/* Tonos compartidos por los arcos del donut (stroke) y los rellenos de las
   barras (background): el mismo semáforo documental del resto del producto. */
.donut-arco.segmento-exito[b-awsv86vnpa] {
    stroke: var(--color-success-500);
}

.donut-arco.segmento-advertencia[b-awsv86vnpa] {
    stroke: var(--color-warning-500);
}

.donut-arco.segmento-advertencia-fuerte[b-awsv86vnpa] {
    stroke: var(--color-warning-700);
}

.donut-arco.segmento-peligro[b-awsv86vnpa] {
    stroke: var(--color-danger-500);
}

.donut-arco.segmento-neutro[b-awsv86vnpa] {
    stroke: var(--color-primary-500);
}

.leyenda-donut-punto.segmento-exito[b-awsv86vnpa],
.barra-kpi-relleno.segmento-exito[b-awsv86vnpa] {
    background-color: var(--color-success-500);
}

.leyenda-donut-punto.segmento-advertencia[b-awsv86vnpa],
.barra-kpi-relleno.segmento-advertencia[b-awsv86vnpa] {
    background-color: var(--color-warning-500);
}

.leyenda-donut-punto.segmento-advertencia-fuerte[b-awsv86vnpa],
.barra-kpi-relleno.segmento-advertencia-fuerte[b-awsv86vnpa] {
    background-color: var(--color-warning-700);
}

.leyenda-donut-punto.segmento-peligro[b-awsv86vnpa],
.barra-kpi-relleno.segmento-peligro[b-awsv86vnpa] {
    background-color: var(--color-danger-500);
}

.leyenda-donut-punto.segmento-neutro[b-awsv86vnpa],
.barra-kpi-relleno.segmento-neutro[b-awsv86vnpa] {
    background-color: var(--color-primary-500);
}

/* ------------------------------------------------------------------ tablas */

.nombre-empresa-riesgo[b-awsv86vnpa] {
    font-weight: 600;
    color: var(--color-text);
}

.nombre-empresa-riesgo:hover[b-awsv86vnpa],
.nombre-empresa-riesgo:focus-visible[b-awsv86vnpa] {
    color: var(--color-primary-500);
}

.reparto-horas[b-awsv86vnpa] {
    font-weight: 600;
}

/*
  Barra comparativa "gestiones automáticas vs manuales" — dos segmentos
  proporcionales al %, sin librería de gráficos. Migrada desde el Dashboard
  actual: el aislamiento de CSS de Blazor no cruza entre componentes, así que
  el estilo viaja con el markup.
*/
.barra-comparativa[b-awsv86vnpa] {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background-color: var(--color-surface-subtle);
}

.barra-comparativa-segmento[b-awsv86vnpa] {
    height: 100%;
    transition: width var(--transition-slow) ease-out;
}

/*
  Regla de agencia (02 § 3.1, DDL-009): "automáticas" es Hydra actuando (IA
  verificando sin intervención humana) → cian, no el slate de "manuales" que
  llevaba antes. --color-system-indicator porque es un indicador no textual
  (segmento de barra + punto de leyenda), no texto de sistema.
  "Manuales" es el usuario actuando → azul, correcto desde antes.
*/
.barra-comparativa-automatica[b-awsv86vnpa] {
    background-color: var(--color-system-indicator);
}

.barra-comparativa-manual[b-awsv86vnpa] {
    background-color: var(--color-primary-500);
}

.barra-comparativa-leyenda[b-awsv86vnpa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.barra-comparativa-item[b-awsv86vnpa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.barra-comparativa-punto[b-awsv86vnpa] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ pulso */

.pulso-negocio[b-awsv86vnpa] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pulso-negocio-titular[b-awsv86vnpa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pulso-negocio-kicker[b-awsv86vnpa] {
    font: var(--font-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.pulso-negocio-frase[b-awsv86vnpa] {
    font: var(--font-heading-sm);
}

.pulso-negocio-cifras[b-awsv86vnpa] {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
}

.pulso-negocio-cifra[b-awsv86vnpa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pulso-negocio-etiqueta[b-awsv86vnpa] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.pulso-negocio-valor[b-awsv86vnpa] {
    font: var(--font-heading-sm);
}

.enlace-facturacion[b-awsv86vnpa] {
    margin-left: auto;
    font: var(--font-label);
}

/* Selector de periodo: en línea con la cabecera en escritorio, apilado en móvil.
   Los campos no crecen — un selector de fechas ancho no gana nada. */
.dashboard-periodo[b-awsv86vnpa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dashboard-periodo > *[b-awsv86vnpa] {
    min-width: 10rem;
    flex: 0 1 auto;
}
/* /Features/Delegaciones/OperadoresCaeExternosPanel.razor.rz.scp.css */
.operadores-cae[b-ptx1uszwod] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.operadores-cae-cabecera[b-ptx1uszwod] {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
}

.operadores-cae-titulo[b-ptx1uszwod] {
    font: var(--font-heading-sm);
    margin: 0;
}

.operadores-cae-nota[b-ptx1uszwod] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0;
}

.operadores-cae-lista[b-ptx1uszwod] {
    display: grid;
    gap: var(--space-3);
}

.operadores-cae-fila[b-ptx1uszwod] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.operadores-cae-nombre[b-ptx1uszwod] {
    font: var(--font-heading-sm);
    margin: 0;
}

.operadores-cae-error[b-ptx1uszwod] {
    color: var(--color-danger-700);
    font: var(--font-body-sm);
    margin: 0;
}

/* El enlace de activación, legible entero: se parte por cualquier carácter porque el token no lleva espacios. */
.operadores-cae-enlace[b-ptx1uszwod] {
    background: var(--color-surface-subtle);
    border-radius: var(--radius-sm);
    font: var(--font-body-sm);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    word-break: break-all;
}

.operadores-cae-acciones[b-ptx1uszwod] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Features/Delegaciones/Pages/Delegaciones.razor.rz.scp.css */
.delegaciones-pantalla[b-ejr3ad9d0k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.delegaciones-aviso-ajeno[b-ejr3ad9d0k] {
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    color: var(--color-warning-700);
    font: var(--font-body-md);
    padding: var(--space-3) var(--space-4);
}

.delegaciones-lista[b-ejr3ad9d0k] {
    display: grid;
    gap: var(--space-4);
}

.delegaciones-tarjeta[b-ejr3ad9d0k] {
    margin: 0;
    overflow: hidden;
}

.delegaciones-tarjeta-cabecera[b-ejr3ad9d0k] {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-5);
}

.delegaciones-etiquetas[b-ejr3ad9d0k],
.delegaciones-acciones[b-ejr3ad9d0k] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.delegaciones-titulo[b-ejr3ad9d0k],
.accesos-soporte-talveg-titulo[b-ejr3ad9d0k] {
    font: var(--font-heading-sm);
    margin: var(--space-3) 0 var(--space-1);
}

.delegaciones-fecha[b-ejr3ad9d0k],
.delegaciones-nota[b-ejr3ad9d0k],
.delegaciones-sin-personas[b-ejr3ad9d0k],
.delegaciones-actividad-cabecera[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: 0;
}

.delegaciones-ventana[b-ejr3ad9d0k] {
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    color: var(--color-warning-700);
    display: flex;
    flex-direction: column;
    font: var(--font-body-sm);
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}

.delegaciones-motivo[b-ejr3ad9d0k],
.delegaciones-nota[b-ejr3ad9d0k],
.delegaciones-sin-personas[b-ejr3ad9d0k] {
    margin: 0 var(--space-5) var(--space-4);
}

.delegaciones-motivo[b-ejr3ad9d0k] {
    border-left: 3px solid var(--color-primary-500);
    color: var(--color-text);
    font: var(--font-body-md);
    padding-left: var(--space-3);
}

.delegaciones-tabla-marco[b-ejr3ad9d0k] {
    overflow-x: auto;
}

.delegaciones-tabla[b-ejr3ad9d0k],
.accesos-soporte-talveg-tabla[b-ejr3ad9d0k] {
    margin: 0;
    width: 100%;
}

.delegaciones-persona-no-resuelta[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
}

.delegaciones-pie[b-ejr3ad9d0k] {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
}

@media (max-width: 640px) {
    .delegaciones-tarjeta-cabecera[b-ejr3ad9d0k] {
        padding: var(--space-4);
    }

    .delegaciones-pie[b-ejr3ad9d0k] {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-3) var(--space-4);
    }

    .delegaciones-acciones[b-ejr3ad9d0k] {
        justify-content: flex-end;
    }
}

.delegaciones-autorizas-tu[b-ejr3ad9d0k] {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font: var(--font-body-sm);
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
}

.delegaciones-autorizas-tu strong[b-ejr3ad9d0k] {
    font: var(--font-body-md);
    font-weight: 600;
}

.delegaciones-sugerencia[b-ejr3ad9d0k],
.delegaciones-nota-modal[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: var(--space-3) 0 0;
}

.delegaciones-sugerencia[b-ejr3ad9d0k] {
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.delegaciones-candidatos[b-ejr3ad9d0k] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    overflow: hidden;
}

.delegaciones-candidato[b-ejr3ad9d0k] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font: var(--font-body-md);
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    width: 100%;
}

.delegaciones-candidato:hover[b-ejr3ad9d0k] {
    background: var(--color-surface-hover);
}

.delegaciones-candidato-seleccionado[b-ejr3ad9d0k] {
    background: var(--color-primary-50);
    font-weight: 600;
}

.accesos-soporte-talveg[b-ejr3ad9d0k] {
    margin-top: var(--space-6);
}

.accesos-soporte-talveg-descripcion[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
}
/* /Features/Documentos/Components/BadgesAcreditacion.razor.rz.scp.css */
.badges-acreditacion[b-7ymggqbztz] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
/* /Features/Documentos/Components/DocumentoWorkspacePanel.razor.rz.scp.css */
.cabecera-documento-360[b-5uhg0gqdp2] { display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-3); }
.icono-documento-360[b-5uhg0gqdp2] { width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-primary-100); border-radius:var(--radius-md); background:var(--color-primary-50); color:var(--color-primary-500); }
.texto-cabecera-documento-360[b-5uhg0gqdp2] { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kicker-documento-360[b-5uhg0gqdp2] { font:var(--font-caption); color:var(--color-text-muted); letter-spacing:.08em; text-transform:uppercase; }
.titulo-documento-360[b-5uhg0gqdp2] { font:var(--font-heading-md); text-wrap:pretty; }
.meta-documento-360[b-5uhg0gqdp2] { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:2px; font:var(--font-caption); color:var(--color-text-muted); }
.rejilla-info-documento-360[b-5uhg0gqdp2] { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-4); padding:var(--space-4); border:var(--border-default); border-radius:var(--radius-lg); background:var(--color-surface-subtle); }
.celda-info-documento-360[b-5uhg0gqdp2] { display:flex; flex-direction:column; gap:2px; min-width:0; }
.celda-info-documento-360-ancha[b-5uhg0gqdp2] { grid-column:1 / -1; }
.celda-info-documento-360 > span[b-5uhg0gqdp2] { font:var(--font-caption); color:var(--color-text-muted); }
.celda-info-documento-360 strong[b-5uhg0gqdp2], .celda-info-documento-360 a[b-5uhg0gqdp2] { font:var(--font-body-md); font-weight:600; overflow-wrap:anywhere; }
.acciones-documento-360[b-5uhg0gqdp2] { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.formulario-documento-360[b-5uhg0gqdp2] { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-4); }
.firmas-documento-360[b-5uhg0gqdp2] { overflow:hidden; border:var(--border-default); border-radius:var(--radius-lg); }
.firma-documento-360[b-5uhg0gqdp2] { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-top:var(--border-default); font:var(--font-caption); color:var(--color-text-muted); }
.firma-documento-360:first-child[b-5uhg0gqdp2] { border-top:0; }
.firma-documento-360 strong[b-5uhg0gqdp2] { color:var(--color-text); }
@media (max-width:480px) { .rejilla-info-documento-360[b-5uhg0gqdp2] { grid-template-columns:1fr; } }
.aviso-historial-documento-360[b-5uhg0gqdp2] { margin-bottom:var(--space-3); padding:var(--space-3) var(--space-4); border:var(--border-default); border-radius:var(--radius-md); background:var(--color-surface-subtle); font:var(--font-body-md); }
.aviso-historial-documento-360 a[b-5uhg0gqdp2] { margin-left:var(--space-1); font-weight:600; }
/* /Features/Documentos/Components/LineaPlataformaYReclamacion.razor.rz.scp.css */
/* Segunda línea bajo el nombre del documento: mismo peso visual que el detalle de FilaRelacion (caption, apagado).
   La celda del nombre no parte línea y recorta con elipsis; esta sí parte: en una columna estrecha la elipsis se
   comía justo la reclamación, que es el dato que se viene a leer. */
.linea-plataforma-reclamacion[b-bn6uqb48uf] {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Un rechazo en la plataforma es lo único que esta línea destaca: mismo tono que PlataformaTab. */
.linea-plataforma-reclamacion--rechazada[b-bn6uqb48uf] {
    color: var(--color-danger-700);
}
/* /Features/Documentos/Components/LineasIncidenciasDocumentales.razor.rz.scp.css */
/* Una incidencia: pastilla del estado, nombre del Tipo y, al final, la fecha. */
.motivo-incidencias-linea[b-mgf06nvcyu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.motivo-incidencias-tipo[b-mgf06nvcyu] {
    min-width: 0;
    white-space: normal;
}

.motivo-incidencias-fecha[b-mgf06nvcyu] {
    margin-left: auto;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Features/Documentos/Components/MotivoIncidenciasDocumentales.razor.rz.scp.css */
/*
  El motivo ocupa UNA línea dentro de la columna de estado (200 px): lo que no cabe se recorta con puntos
  suspensivos y se lee entero en la ventana. El recorte va en el texto del disparador y no en el contenedor:
  el panel de la ventana sale de la caja, y recortado en el contenedor no se vería (por eso EstadoFila,
  que recorta su motivo, deja de hacerlo cuando el motivo lleva una ventana: ver EstadoFila.razor.css).
*/
.motivo-incidencias[b-yy8uy95cll] {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.motivo-incidencias[b-yy8uy95cll]  .ventana-contexto,
.motivo-incidencias[b-yy8uy95cll]  .ventana-contexto-disparador {
    min-width: 0;
    max-width: 100%;
}

.motivo-incidencias-texto[b-yy8uy95cll] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las líneas del desglose llevan su estilo en LineasIncidenciasDocumentales.razor.css. */
/* /Features/Documentos/Components/PlantillasTab.razor.rz.scp.css */
/*
  Catálogo de plantillas (Plantillas TALVEG.dc.html).

  Sigue siendo una <table>: aquí la fila no se despliega (a diferencia de
  Empresas), así que la semántica de tabla es la correcta y un lector de
  pantalla puede recorrerla por celdas. Lo que se traslada del mockup es el
  marco: una tarjeta con desplazamiento horizontal propio, para que en una
  ventana estrecha se desplace la lista y no la página entera.
*/
.marco-lista-plantillas[b-7eilhly9fo] {
    overflow-x: auto;
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

/* El borde y el radio los pone el marco: la tabla dentro no los repite. */
.marco-lista-plantillas .tabla-datos[b-7eilhly9fo] {
    min-width: 880px;
    border: 0;
    border-radius: 0;
}

/* Densidad del mockup: cabecera de 40 px y filas de 44-48 px. */
.marco-lista-plantillas .tabla-datos th[b-7eilhly9fo] {
    padding: var(--space-3) var(--space-5);
}

.marco-lista-plantillas .tabla-datos td[b-7eilhly9fo] {
    padding: var(--space-2) var(--space-5);
}

.nombre-plantilla[b-7eilhly9fo] {
    font-weight: 600;
}

.acciones-plantilla[b-7eilhly9fo] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Features/Documentos/Components/PlataformaTab.razor.rz.scp.css */
.plataforma-tab[b-vossc4z42p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.plataforma-proveedor[b-vossc4z42p] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.plataforma-proveedor-cabecera[b-vossc4z42p] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-hover);
    border-bottom: var(--border-default);
}

.plataforma-proveedor-nombre[b-vossc4z42p] {
    font: var(--font-heading-sm);
}

.plataforma-proveedor-resumen[b-vossc4z42p] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

/* D-23: acciones en bloque a la derecha de la cabecera del proveedor. */
.plataforma-vigencia-bloque[b-vossc4z42p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.plataforma-separador[b-vossc4z42p] {
    margin: 0 var(--space-2);
    color: var(--color-border-strong);
}

.plataforma-rechazados[b-vossc4z42p] {
    color: var(--color-danger-700);
    font-weight: 600;
}

.plataforma-cliente-cabecera[b-vossc4z42p] {
    padding: var(--space-2) var(--space-5) var(--space-1);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-top: var(--border-default);
}

.plataforma-fila-documento[b-vossc4z42p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + var(--space-3));
    border-top: var(--border-default);
    flex-wrap: wrap;
}

.plataforma-documento-propietario[b-vossc4z42p] {
    flex: none;
    width: 180px;
    font: var(--font-body-md);
    font-weight: 600;
}

.plataforma-documento-tipo[b-vossc4z42p] {
    flex: 1;
    min-width: 140px;
    font: var(--font-body-md);
}

.plataforma-documento-estado[b-vossc4z42p] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.plataforma-motivo-rechazo[b-vossc4z42p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    cursor: help;
}

/* Estado de la vigencia en la plataforma, junto al botón que lo corrige. Es
   texto secundario: lo que se acciona es el botón, esto solo dice qué hay. */
.plataforma-vigencia[b-vossc4z42p] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.plataforma-documento-acciones[b-vossc4z42p] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Fila a la que lleva ?acreditacionId= (P0-9b): se distingue sin depender
   del color de estado, que ya usa el badge. */
.plataforma-fila-documento--destacada[b-vossc4z42p] {
    background: var(--color-primary-50);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.plataforma-fila-documento--destacada:focus[b-vossc4z42p] {
    outline: none;
}

.plataforma-fila-documento--destacada:focus-visible[b-vossc4z42p] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.plataforma-aviso-destino[b-vossc4z42p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    color: var(--color-text-muted);
}
/* /Features/Documentos/Components/RevisionIaTab.razor.rz.scp.css */
.revision-ia[b-5fgxkd1q0v]{display:flex;flex-direction:column;gap:var(--space-5)}.revision-ia-introduccion[b-5fgxkd1q0v],.revision-ia-acciones[b-5fgxkd1q0v],.revision-ia-cola[b-5fgxkd1q0v],.revision-ia-detalle[b-5fgxkd1q0v]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.revision-ia-introduccion[b-5fgxkd1q0v]{padding:var(--space-4) var(--space-5);display:flex;gap:var(--space-5);align-items:center;justify-content:space-between}.revision-ia-introduccion p[b-5fgxkd1q0v]{margin:0;max-width:70ch;color:var(--color-text-muted)}.revision-ia-reglas[b-5fgxkd1q0v]{display:flex;flex-direction:column;gap:6px;color:var(--color-system-text);font:var(--font-caption)}.revision-ia-acciones[b-5fgxkd1q0v]{padding:var(--space-3) var(--space-4);display:flex;justify-content:space-between;align-items:center}.revision-ia-contenido[b-5fgxkd1q0v]{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:var(--space-5);align-items:start}.revision-ia-cola[b-5fgxkd1q0v]{overflow:hidden}.revision-ia-cola>header[b-5fgxkd1q0v],.revision-ia-detalle-cabecera[b-5fgxkd1q0v]{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-hover);border-bottom:1px solid var(--color-border)}.revision-ia-cola>header span[b-5fgxkd1q0v]{font:var(--font-caption);color:var(--color-text-muted)}.revision-ia-filtros[b-5fgxkd1q0v]{display:flex;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}.revision-ia-filtro[b-5fgxkd1q0v]{min-height:32px;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:0 12px;background:var(--color-surface);color:var(--color-text-muted);font:var(--font-caption);cursor:pointer}.revision-ia-filtro.activo[b-5fgxkd1q0v]{background:var(--color-primary-50);border-color:var(--color-primary-500);color:var(--color-primary-700)}.revision-ia-fila[b-5fgxkd1q0v]{display:flex;flex-direction:column;gap:6px;width:100%;padding:var(--space-3) var(--space-4);border:0;border-bottom:1px solid var(--color-border);border-left:3px solid transparent;background:var(--color-surface);text-align:left;color:var(--color-text-muted);cursor:pointer;font:var(--font-body-md)}.revision-ia-fila.activa[b-5fgxkd1q0v]{border-left-color:var(--color-primary-500);background:var(--color-primary-50);color:var(--color-text)}.revision-ia-fila-cabecera[b-5fgxkd1q0v],.revision-ia-confianza[b-5fgxkd1q0v]{display:flex;align-items:center;gap:var(--space-2)}.revision-ia-fila-cabecera strong[b-5fgxkd1q0v]{flex:1;color:var(--color-text)}.revision-ia-fila-cabecera em[b-5fgxkd1q0v]{font:var(--font-caption);font-style:normal;padding:2px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.revision-ia-confianza[b-5fgxkd1q0v]{font:var(--font-caption);color:var(--color-system-text)}.revision-ia-confianza-barra[b-5fgxkd1q0v]{height:6px;flex:1;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden}.revision-ia-confianza-relleno[b-5fgxkd1q0v]{display:block;height:100%}.revision-ia-confianza-relleno-exito[b-5fgxkd1q0v]{background:var(--color-success-500)}.revision-ia-confianza-relleno-advertencia[b-5fgxkd1q0v]{background:var(--color-warning-500)}.revision-ia-confianza-relleno-peligro[b-5fgxkd1q0v]{background:var(--color-danger-500)}.revision-ia-confianza small[b-5fgxkd1q0v]{color:var(--color-text-muted)}.revision-ia-detalle[b-5fgxkd1q0v]{overflow:hidden}.revision-ia-detalle-cabecera h2[b-5fgxkd1q0v]{margin:0;font:var(--font-h3)}.revision-ia-detalle-cabecera p[b-5fgxkd1q0v]{margin:4px 0 0;color:var(--color-text-muted)}.revision-ia-estado[b-5fgxkd1q0v]{height:max-content;border-radius:var(--radius-full);padding:3px 10px;font:var(--font-caption)}.revision-ia-estado-exito[b-5fgxkd1q0v]{background:var(--color-success-50);color:var(--color-success-700)}.revision-ia-estado-advertencia[b-5fgxkd1q0v]{background:var(--color-warning-50);color:var(--color-warning-700)}.revision-ia-estado-peligro[b-5fgxkd1q0v]{background:var(--color-danger-50);color:var(--color-danger-700)}.revision-ia-detalle-cuerpo[b-5fgxkd1q0v]{display:grid;grid-template-columns:minmax(220px,270px) 1fr;gap:var(--space-5);padding:var(--space-5)}.revision-ia-vista-documento[b-5fgxkd1q0v]{display:flex;flex-direction:column;gap:var(--space-3)}.previsualizacion-documento[b-5fgxkd1q0v]{width:100%;min-height:420px;border:1px solid var(--color-border);border-radius:var(--radius-md)}.revision-ia-lectura[b-5fgxkd1q0v]{display:flex;flex-direction:column;gap:var(--space-4)}.revision-ia-motivo[b-5fgxkd1q0v],.revision-ia-consecuencia[b-5fgxkd1q0v]{margin:0;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-subtle)}.revision-ia-motivo h3[b-5fgxkd1q0v]{margin:0 0 var(--space-2);font:var(--font-label)}.revision-ia-motivo p[b-5fgxkd1q0v]{margin:0}.revision-ia-lectura dl[b-5fgxkd1q0v]{margin:0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.revision-ia-lectura dl div[b-5fgxkd1q0v]{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3);padding:var(--space-3);border-bottom:1px solid var(--color-border)}.revision-ia-lectura dl div:last-child[b-5fgxkd1q0v]{border-bottom:0}.revision-ia-lectura dt[b-5fgxkd1q0v]{font:var(--font-label)}.revision-ia-lectura dd[b-5fgxkd1q0v]{margin:0;color:var(--color-text-muted)}.revision-ia-acciones-detalle[b-5fgxkd1q0v]{display:flex;gap:var(--space-2);flex-wrap:wrap}@media(max-width:768px){.revision-ia-introduccion[b-5fgxkd1q0v],.revision-ia-acciones[b-5fgxkd1q0v]{align-items:flex-start;flex-direction:column}.revision-ia-contenido[b-5fgxkd1q0v],.revision-ia-detalle-cuerpo[b-5fgxkd1q0v]{grid-template-columns:1fr}.revision-ia-lectura dl div[b-5fgxkd1q0v]{grid-template-columns:1fr}.previsualizacion-documento[b-5fgxkd1q0v]{min-height:300px}}
.revision-ia-seleccion[b-5fgxkd1q0v]{display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap}.revision-ia-ayuda-seleccion[b-5fgxkd1q0v]{margin:0;max-width:70ch;color:var(--color-text-muted);font:var(--font-caption)}.revision-ia-fila-selector[b-5fgxkd1q0v]{display:flex;align-items:stretch}.revision-ia-fila-selector .revision-ia-fila[b-5fgxkd1q0v]{flex:1;min-width:0}.revision-ia-casilla[b-5fgxkd1q0v]{flex:none;align-self:center;margin:0 var(--space-3);accent-color:var(--color-primary-500);width:1.1rem;height:1.1rem}.revision-ia-resultado[b-5fgxkd1q0v]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-left:3px solid var(--color-warning-500);border-radius:var(--radius-lg)}.revision-ia-resultado ul[b-5fgxkd1q0v]{margin:0;padding-left:var(--space-5)}
/* /Features/Documentos/Components/SubcajaIncidenciasDocumentales.razor.rz.scp.css */
.subcaja-incidencias[b-ljc7l5t5a6] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-subtle);
}

.incidencia-corregir[b-ljc7l5t5a6],
.incidencia-lectura[b-ljc7l5t5a6] {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) 0;
    color: var(--color-text);
    font: var(--font-body-sm);
    text-align: start;
}

.incidencia-corregir[b-ljc7l5t5a6] {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.incidencia-tipo[b-ljc7l5t5a6] {
    font-weight: 600;
}

.incidencia-fecha[b-ljc7l5t5a6] {
    color: var(--color-text-muted);
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
}

.incidencia-motivo[b-ljc7l5t5a6] {
    color: var(--color-text-muted);
}

.coincidencia-incidencia[b-ljc7l5t5a6] {
    background: var(--color-resaltado-busqueda);
}

.subfila-incidencia + .subfila-incidencia[b-ljc7l5t5a6] {
    border-top: 1px solid var(--color-border);
}
/* /Features/Documentos/Components/VisorDocumento.razor.rz.scp.css */
.visor-documento-iframe[b-87eedhpv8w] {
    width: 100%;
    height: 70vh;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}
/* /Features/Documentos/Pages/Documentos.razor.rz.scp.css */
.documentos-propietario[b-8dpxz6d8q1] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
}

.documentos-ambito[b-8dpxz6d8q1] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.documentos-vigencia[b-8dpxz6d8q1] {
    white-space: nowrap;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.documentos-opciones-orden[b-8dpxz6d8q1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.documentos-opciones-orden button[b-8dpxz6d8q1] {
    border: 0;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.documentos-opciones-orden button:hover[b-8dpxz6d8q1] {
    background: var(--color-surface-hover);
}

/* Última celda de la fila: la acción rápida («Renovar» / «Subir») y el icono 360 del tipo. */
.documentos-acciones-fila[b-8dpxz6d8q1] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/*
  La tabla desplaza en horizontal dentro de su propio envoltorio, no con la página. Sus siete columnas
  (ocho con la casilla de «Selección múltiple») no caben en el hueco a los anchos de escritorio
  habituales, y lo que sobraba lo desplazaba .contenido: se iban con la tabla la cabecera de la página,
  las pestañas y los filtros. No hay ancho de corte: si la tabla cabe, el envoltorio no desplaza; si
  deja de caber porque crece una columna, sigue desplazando él.

  Precio, decidido el 2026-10-09: un contenedor que desplaza en horizontal también lo hace en vertical
  (overflow-y pasa a auto), así que la cabecera de la tabla (.tabla-datos thead th, position: sticky en
  list-page.css) ya no se pega a .contenido al bajar por la lista.

  De 767 px para abajo no se aplica: ahí la propia tabla es el contenedor (regla de móvil de
  list-page.css). El envoltorio lleva tabindex para que el desplazamiento se alcance con el teclado
  (flechas izquierda y derecha con el foco en él); por eso tiene su anillo de foco.
  Lo fija DocumentosTablaDesplazableE2ETests.

  Por lo mismo, tampoco se pega la sombra que la cabecera gana al desplazar (list-page.css), y lo que
  sobresale por debajo de la tabla desplaza el envoltorio en vertical. Tres casos:
    · la entrada escalonada de las filas (revelar-escalonado, list-page.css) las baja 6 px mientras
      dura, y sin sitio debajo asomaba una barra vertical durante la animación: de ahí el relleno
      inferior de 6 px (medido: 5 px de desplazamiento vertical sin él, 0 con él). Sin animación
      (prefers-reduced-motion) no hace falta y no se pone;
    · la ventana «Estado en plataformas» se abre hacia abajo solo en las seis primeras filas de la
      página y hacia arriba en las demás (ColocacionVentanaPlataformas, Documentos.razor.cs). En una
      página de pocas filas todavía puede sobresalir por debajo: se alcanza desplazando el envoltorio;
    · las opciones de una cabecera de columna de QuickGrid (.col-options), igual, en una página de
      una o dos filas.

  El envoltorio lleva tabindex, role y nombre también cuando no tiene nada que desplazar (la tabla
  cabe, o por debajo de 768 px): es una parada de tabulación de más.
*/
@media (min-width: 768px) {
    .documentos-tabla-desplazable[b-8dpxz6d8q1] {
        overflow-x: auto;
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .documentos-tabla-desplazable[b-8dpxz6d8q1] {
        padding-bottom: 6px;
    }
}

.documentos-tabla-desplazable:focus-visible[b-8dpxz6d8q1] {
    outline: var(--border-focus);
    outline-offset: -2px;
}
/* /Features/Documentos/Pages/RevisionIa.razor.rz.scp.css */
.titulo-pagina[b-tqnqjrvoay] { margin-bottom: var(--space-2); }
.revision-ia-kicker[b-tqnqjrvoay] { margin: 0 0 var(--space-2); color: var(--color-text-muted); font: var(--font-caption); letter-spacing: .08em; text-transform: uppercase; }
/* /Features/Documentos/Pages/SubidaMasiva.razor.rz.scp.css */
.subida-masiva[b-kccytzsytw] { display: flex; flex-direction: column; gap: var(--space-5); max-width: 1320px; }
.miga-subida-masiva[b-kccytzsytw] { display: flex; gap: var(--space-2); color: var(--color-text-muted); font: var(--font-caption); }
.miga-subida-masiva a[b-kccytzsytw] { font-weight: 600; }
.zona-subida-masiva[b-kccytzsytw] { align-items: center; background: var(--color-primary-50); border: 2px dashed var(--color-primary-500); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); text-align: center; }
.zona-subida-masiva h2[b-kccytzsytw] { font: var(--font-h4); margin: 0; }
.zona-subida-masiva p[b-kccytzsytw], .aviso-memoria-subida[b-kccytzsytw] { color: var(--color-text-muted); font: var(--font-body-md); margin: 0; }
.aviso-memoria-subida[b-kccytzsytw] { font: var(--font-caption); }
.progreso-subida-masiva[b-kccytzsytw] { display: flex; flex-direction: column; gap: var(--space-3); }
.progreso-subida-masiva-cabecera[b-kccytzsytw], .resumen-subida-masiva[b-kccytzsytw] { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.progreso-subida-masiva-cabecera span[b-kccytzsytw], .ayuda-solo-propone[b-kccytzsytw] { color: var(--color-text-muted); font: var(--font-caption); }
.progreso-subida-masiva-cabecera span[b-kccytzsytw] { margin-left: auto; }
.barra-progreso-subida[b-kccytzsytw] { background: var(--color-surface-subtle); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
.barra-progreso-subida span[b-kccytzsytw] { background: var(--color-primary-500); display: block; height: 100%; transition: width .2s ease; }
.ayuda-solo-propone[b-kccytzsytw] { flex: 1 1 18rem; }
.panel-lote-subida-masiva[b-kccytzsytw] { background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.panel-lote-subida-masiva > header[b-kccytzsytw] { align-items: center; background: var(--color-surface-hover); border-bottom: var(--border-default); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); }
.panel-lote-subida-masiva > header > span[b-kccytzsytw] { color: var(--color-text-muted); flex: 1; font: var(--font-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.filtro-lote[b-kccytzsytw] { background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer; font: var(--font-caption); min-height: 32px; padding: 0 12px; }
.filtro-lote.activo[b-kccytzsytw] { background: var(--color-primary-50); border-color: var(--color-primary-500); color: var(--color-primary-500); }
.lista-items-subida-masiva[b-kccytzsytw] { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.item-subida-masiva[b-kccytzsytw] { border-bottom: var(--border-default); padding: var(--space-4) var(--space-5); }
.item-subida-masiva:last-child[b-kccytzsytw] { border-bottom: 0; }
.item-subida-masiva-fila[b-kccytzsytw] { align-items: center; display: flex; gap: var(--space-3); }
.miniatura-subida-masiva[b-kccytzsytw] { border: var(--border-default); border-radius: var(--radius-sm); flex: 0 0 auto; height: 56px; object-fit: cover; width: 44px; }
.miniatura-subida-masiva-vacia[b-kccytzsytw] { align-items: center; background: var(--color-surface-hover); color: var(--color-text-muted); display: flex; justify-content: center; }
.item-subida-masiva-info[b-kccytzsytw] { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.item-subida-masiva-nombre[b-kccytzsytw] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-subida-masiva-badges[b-kccytzsytw], .item-subida-masiva-acciones[b-kccytzsytw] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.item-subida-masiva-acciones[b-kccytzsytw] { flex: 0 0 auto; }
.item-subida-masiva-propuesta[b-kccytzsytw], .ayuda-fecha-subida[b-kccytzsytw] { color: var(--color-text-muted); font: var(--font-caption); }
.item-subida-masiva-error[b-kccytzsytw] { color: var(--color-danger-700); font: var(--font-caption); }
.item-subida-masiva-confirmacion[b-kccytzsytw] { border-top: var(--border-default); display: grid; gap: var(--space-4); grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr); margin-top: var(--space-4); padding-top: var(--space-4); }
.previsualizacion-documento[b-kccytzsytw] { border: var(--border-default); border-radius: var(--radius-md); height: 360px; width: 100%; }
.item-subida-masiva-formulario[b-kccytzsytw] { display: flex; flex-direction: column; gap: var(--space-3); }
.acciones-formulario[b-kccytzsytw] { display: flex; justify-content: flex-end; }
.estado-vacio-lote[b-kccytzsytw], .esqueleto-lote-subida-masiva[b-kccytzsytw] { align-items: center; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); text-align: center; }
.estado-vacio-lote h2[b-kccytzsytw], .estado-vacio-lote p[b-kccytzsytw] { margin: 0; }
.estado-vacio-lote p[b-kccytzsytw] { color: var(--color-text-muted); }
.esqueleto-lote-subida-masiva[b-kccytzsytw] { align-items: stretch; background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-lg); }
.esqueleto-lote-subida-masiva > span[b-kccytzsytw] { color: var(--color-text-muted); font: var(--font-caption); }
.esqueleto-lote-subida-masiva > div[b-kccytzsytw] { background: linear-gradient(90deg, var(--color-surface-subtle), var(--color-border), var(--color-surface-subtle)); border-radius: var(--radius-sm); height: 48px; }
@media (max-width: 720px) { .zona-subida-masiva[b-kccytzsytw], .item-subida-masiva[b-kccytzsytw] { padding: var(--space-4); } .item-subida-masiva-fila[b-kccytzsytw] { align-items: flex-start; flex-wrap: wrap; } .item-subida-masiva-acciones[b-kccytzsytw] { width: 100%; } .item-subida-masiva-confirmacion[b-kccytzsytw] { grid-template-columns: 1fr; } .progreso-subida-masiva-cabecera span[b-kccytzsytw] { margin-left: 0; width: 100%; } }
/* /Features/Documentos/Pages/TipoDocumentoDetalle.razor.rz.scp.css */
/*
    Tipo de documento 360 — lo propio de esta página. La maquetación compartida
    de las páginas 360 (cabecera de identidad, banda, contadores, fila con
    pastilla en columna fija, cuerpo con lateral) vive en Components/DesignSystem;
    aquí solo lo que no tiene primitiva.
*/

/* Segunda línea de la meta: la frase que hace evidente la regla de recuento. */
.tipo360-regla[b-s6u8enr48q] {
    flex-basis: 100%;
}

/* Buscador de la lista, sobre los contadores de estado. */
.tipo360-buscador[b-s6u8enr48q] {
    margin-bottom: var(--space-3);
}

/* Las dos líneas secundarias de la fila: identificador y empresa; vigencia y Centro. */
.tipo360-linea[b-s6u8enr48q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-1);
}

.tipo360-nota[b-s6u8enr48q] {
    margin: var(--space-2) 0 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/*
    Estado por Centro (desplegable de la fila): identidad | pastilla | acción.
    La columna de la pastilla mide lo mismo que la de la fila (FilaRelacion), para
    que las pastillas del desplegable caigan en vertical bajo la de su fila.
*/
.tipo360-subfila[b-s6u8enr48q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 152px 160px;
    align-items: center;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-fila-divisor);
    transition: background-color 120ms;
}

/* La subfila responde al cursor como la fila (FilaRelacion): el resaltado
   sobresale lo que mide su relleno lateral y el texto no se mueve. */
.tipo360-subfila:hover[b-s6u8enr48q] {
    background-color: var(--color-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .tipo360-subfila[b-s6u8enr48q] {
        transition: none;
    }
}

.tipo360-subfila:first-child[b-s6u8enr48q] {
    border-top: 0;
}

.tipo360-subfila-identidad[b-s6u8enr48q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tipo360-subfila-identidad small[b-s6u8enr48q] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.tipo360-subfila-accion[b-s6u8enr48q] {
    display: flex;
    justify-content: flex-end;
}

/* El identificador es su propio botón de copia (BotonCopiar EnLinea, el `.copia` de la maqueta:
   seminegrita y 0 2px): se lee como dato de la línea, no como un botón aparte. */
.tipo360-linea[b-s6u8enr48q]  .boton-copiar {
    height: auto;
}

.tipo360-filtros-pagina[b-s6u8enr48q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    border: 0;
    padding: 0;
    margin: var(--space-3) 0;
}

.tipo360-filtros-pagina legend[b-s6u8enr48q] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.tipo360-grupo-empresa[b-s6u8enr48q] {
    list-style: none;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-hover);
    font: var(--font-label-md);
    font-size: inherit;
    line-height: inherit;
}
/* /Features/Empresas/Components/CabeceraGestorCae.razor.rz.scp.css */
/*
  Dato de cabecera «Gestor CAE»: UNA línea junto al título, separada por una raya.

  No envuelve nunca. Lo que cede cuando falta sitio son los nombres (.cabecera-gestor-cae-nombre), que
  se recortan con puntos suspensivos; el rótulo, los avatares, las pastillas y «+N» conservan su ancho.
  Para que el recorte llegue hasta el nombre, cada caja intermedia tiene que poder encoger
  (min-width: 0): sin eso, una caja flexible no baja del ancho de su contenido.

  white-space no se fija en el contenedor: se hereda, y este componente no debe decidir cómo envuelve
  lo que cuelgue de él.
*/
.cabecera-gestor-cae[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: var(--space-2);
    min-width: 0;
    margin-left: var(--space-2);
    padding-left: var(--space-3);
    border-left: var(--border-default);
    font: var(--font-body-sm);
    color: var(--color-text);
}

.cabecera-gestor-cae-rotulo[b-fuchme3ab5] {
    flex: none;
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* La parte que encoge. Recorta como último recurso: la ventana de «+N» va fuera de esta caja para
   que su panel no quede recortado. */
.cabecera-gestor-cae-personas[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
}

.cabecera-gestor-cae-persona[b-fuchme3ab5],
.cabecera-gestor-cae-operador[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: var(--space-1);
    min-width: 0;
}

.cabecera-gestor-cae-nombre[b-fuchme3ab5] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El nombre del principal, en <strong>, pesa 600 (el 700 por defecto de <strong> no es el de Design). */
strong.cabecera-gestor-cae-nombre[b-fuchme3ab5] {
    font-weight: 600;
}

.cabecera-gestor-cae-persona[b-fuchme3ab5]  .avatar-usuario {
    flex: none;
}

.cabecera-gestor-cae-separador[b-fuchme3ab5],
.cabecera-gestor-cae-sin-dato[b-fuchme3ab5] {
    flex: none;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* «Sin principal» y «Otra Asignación de Operación, sin principal»: pastilla de aviso (ámbar), para que no
   se lea como un dato más. Punto de aviso + texto: el color no es el único portador (02 § 8). Un aviso
   largo también cede antes de desbordar. */
.cabecera-gestor-cae-pastilla-aviso[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: var(--space-2);
    min-width: 0;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabecera-gestor-cae-punto-aviso[b-fuchme3ab5] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-warning-500);
}

.cabecera-gestor-cae-pastilla[b-fuchme3ab5] {
    flex: none;
    padding: 1px var(--space-2);
    border: var(--border-default);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    white-space: nowrap;
}

/* Pastilla «Principal» de 18 px (revisión de Design: padding 1/8, sin borde, 700 12/16): con el borde de 1 px de la
   pastilla de apoyo medía 20. */
.cabecera-gestor-cae-principal[b-fuchme3ab5] {
    border: 0;
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font: 700 0.75rem/1rem var(--font-family);
}

/* «+N»: las personas que no caben en la línea. Es un botón de verdad (el disparador de VentanaContexto
   interactiva): borde de control (3:1), hover, foco visible (el de VentanaContexto) y aria-expanded, que
   mantiene ventana-contexto.js. Abre la ventana con la cartera entera. */
.cabecera-gestor-cae-mas[b-fuchme3ab5] {
    font-variant-numeric: tabular-nums;
}

.cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto {
    flex: none;
}

.cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto-disparador {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    cursor: pointer;
}

.cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto-disparador:hover,
.cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto-disparador[aria-expanded="true"] {
    border-color: var(--color-primary-500);
    background-color: var(--color-surface-hover);
}

/* El número de personas fuera de la línea depende del ancho: en escritorio cuenta las que no caben junto
   al título (hay dos a la vista) y en móvil las que hay además de la primera. */
.cabecera-gestor-cae-mas-movil[b-fuchme3ab5] {
    display: none;
}

/* Con exactamente dos personas no hay nada que agrupar en escritorio: el botón solo existe en móvil. */
.cabecera-gestor-cae[b-fuchme3ab5]  .cabecera-gestor-cae-mas-solo-movil {
    display: none;
}

/* ---- Ventana «+N» ---- */

/* Valores literales de la revisión de Design (Revision Interfaz sin Maqueta, §C, ventana de escritorio): el panel no
   lleva relleno propio (VentanaContexto, interactiva), así que el título, los rótulos «PRINCIPAL»/«APOYO», las filas
   y el pie llevan cada uno sus 16 px laterales. En la hoja de móvil, el panel ya pone esos 16 px y aquí valen 0. */
.cabecera-gestor-cae-seccion[b-fuchme3ab5] {
    display: block;
    padding: 0 16px 4px;
    color: var(--color-text-muted);
    font: 600 11px/16px var(--font-family);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* El rótulo que sigue a una fila (Apoyo tras Principal) se separa con una raya. */
.cabecera-gestor-cae-fila + .cabecera-gestor-cae-seccion[b-fuchme3ab5] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

/* Fila de 40 px: avatar de 24 + 8 arriba y 8 abajo, hueco de 10 entre avatar, nombre y rótulo. */
.cabecera-gestor-cae-fila[b-fuchme3ab5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 16px;
}

.cabecera-gestor-cae-fila-operador[b-fuchme3ab5] {
    display: block;
}

/* Nombre: regular en los de apoyo y 600 en el principal (<strong>), con puntos suspensivos. */
.cabecera-gestor-cae-fila-nombre[b-fuchme3ab5] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--font-body-md);
}

strong.cabecera-gestor-cae-fila-nombre[b-fuchme3ab5] {
    font-weight: 600;
}

/* El rótulo va alineado a la derecha, tras el nombre. */
.cabecera-gestor-cae-fila-rotulo[b-fuchme3ab5] {
    flex: none;
    margin-left: auto;
    color: var(--color-text-muted);
    font: var(--font-caption);
    white-space: nowrap;
}

.cabecera-gestor-cae-fila-rotulo-principal[b-fuchme3ab5] {
    color: var(--color-primary-700);
}

/* Pie: dónde se da o se quita acceso. Escritorio, texto con enlace; en móvil, botón de 44 px. Mismo estilo que
   .ventana-contexto-pie de la ventana interactiva (VentanaContexto.razor.css): margen 4, relleno 12/16 y raya arriba. */
.cabecera-gestor-cae-pie[b-fuchme3ab5] {
    display: block;
    margin-top: var(--space-1);
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font: var(--font-caption);
}

.cabecera-gestor-cae-pie-enlace[b-fuchme3ab5] {
    font: 600 12px/16px var(--font-family);
    white-space: nowrap;
}

/* El texto del enlace de móvil («…en la ficha») solo existe en la hoja inferior. */
.cabecera-gestor-cae-pie-enlace-movil[b-fuchme3ab5] {
    display: none;
}

/* ---- Cargando y error ---- */

/* Invisible los primeros 200 ms (como Esqueleto y EstadoCargando): una carga corta no debe destellar. */
.cabecera-gestor-cae-cargando[b-fuchme3ab5] {
    animation: cabecera-gestor-cae-aparece-b-fuchme3ab5 0s linear 200ms both;
}

@keyframes cabecera-gestor-cae-aparece-b-fuchme3ab5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cabecera-gestor-cae-esqueleto[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cabecera-gestor-cae-esqueleto-redondo[b-fuchme3ab5],
.cabecera-gestor-cae-esqueleto-linea[b-fuchme3ab5] {
    display: block;
    flex: none;
    background: linear-gradient(90deg, var(--color-esqueleto-base) 25%, var(--color-esqueleto-brillo) 37%, var(--color-esqueleto-base) 63%);
    background-size: 400% 100%;
    animation: cabecera-gestor-cae-brillo-b-fuchme3ab5 1.4s var(--ease-fluid) infinite;
}

.cabecera-gestor-cae-esqueleto-redondo[b-fuchme3ab5] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
}

.cabecera-gestor-cae-esqueleto-linea[b-fuchme3ab5] {
    height: 10px;
    border-radius: 6px;
}

.cabecera-gestor-cae-esqueleto-larga[b-fuchme3ab5] {
    width: 96px;
}

.cabecera-gestor-cae-esqueleto-corta[b-fuchme3ab5] {
    width: 72px;
}

@keyframes cabecera-gestor-cae-brillo-b-fuchme3ab5 {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabecera-gestor-cae-esqueleto-redondo[b-fuchme3ab5],
    .cabecera-gestor-cae-esqueleto-linea[b-fuchme3ab5] {
        animation: none;
    }
}

.cabecera-gestor-cae-error[b-fuchme3ab5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cabecera-gestor-cae-reintentar[b-fuchme3ab5] {
    height: 28px;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-primary-500);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    cursor: pointer;
}

.cabecera-gestor-cae-reintentar:hover[b-fuchme3ab5] {
    background-color: var(--color-surface-hover);
    border-radius: var(--radius-md);
}

.cabecera-gestor-cae-reintentar:focus-visible[b-fuchme3ab5] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ---- Escritorio: ancho de la ventana ---- */
@media (min-width: 768px) {
    .cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto-panel {
        width: 360px;
        max-width: 360px;
    }
}

/* ---- Móvil ---- */
@media (max-width: 767px) {
    /* La línea baja bajo el título (ocupa el ancho entero del renglón) y deja una persona a la vista. */
    .cabecera-gestor-cae[b-fuchme3ab5] {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .cabecera-gestor-cae-secundaria[b-fuchme3ab5],
    .cabecera-gestor-cae-esqueleto-secundaria[b-fuchme3ab5] {
        display: none;
    }

    .cabecera-gestor-cae-mas-escritorio[b-fuchme3ab5] {
        display: none;
    }

    .cabecera-gestor-cae-mas-movil[b-fuchme3ab5] {
        display: inline;
    }

    /* «+N» solo existe en móvil cuando la línea de escritorio no lo necesita: aquí sí se ve. */
    .cabecera-gestor-cae[b-fuchme3ab5]  .cabecera-gestor-cae-mas-solo-movil {
        display: inline-flex;
    }

    /* Táctil: 44 px de ancho mínimo y 32 de alto. */
    .cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto-disparador {
        min-width: 44px;
        height: 32px;
        justify-content: center;
    }

    .cabecera-gestor-cae-reintentar[b-fuchme3ab5] {
        min-height: 44px;
    }

    /* En la hoja (el panel ya pone 16 px a los lados): rótulos de sección sin raya, avatares de 32 y filas de 48 px. */
    .cabecera-gestor-cae-seccion[b-fuchme3ab5] {
        padding: 4px 0;
    }

    .cabecera-gestor-cae-fila + .cabecera-gestor-cae-seccion[b-fuchme3ab5] {
        margin-top: 0;
        padding: 10px 0 4px;
        border-top: 0;
    }

    .cabecera-gestor-cae-fila[b-fuchme3ab5] {
        min-height: 48px;
        padding: 0;
    }

    .cabecera-gestor-cae-fila[b-fuchme3ab5]  .avatar-usuario {
        --avatar-usuario-lado: 32px;
    }

    /* Principal y apoyos: el rótulo («Coordinador CAE principal», «Apoyo») va BAJO el nombre, no a la derecha. */
    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="principal"][b-fuchme3ab5],
    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="apoyo"][b-fuchme3ab5] {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 10px;
        align-content: center;
        align-items: center;
    }

    .cabecera-gestor-cae-fila[data-gestor-cae-detalle][b-fuchme3ab5]  .avatar-usuario {
        grid-row: 1 / span 2;
    }

    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="principal"] .cabecera-gestor-cae-fila-nombre[b-fuchme3ab5],
    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="apoyo"] .cabecera-gestor-cae-fila-nombre[b-fuchme3ab5] {
        grid-column: 2;
        flex: none;
    }

    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="principal"] .cabecera-gestor-cae-fila-rotulo[b-fuchme3ab5],
    .cabecera-gestor-cae-fila[data-gestor-cae-detalle="apoyo"] .cabecera-gestor-cae-fila-rotulo[b-fuchme3ab5] {
        grid-column: 2;
        margin-left: 0;
        white-space: normal;
    }

    /* Pie de la hoja: solo el botón de 44 px («Dar acceso o desasignarte en la ficha»), sin el texto de escritorio. */
    .cabecera-gestor-cae-pie[b-fuchme3ab5] {
        margin-top: var(--space-3);
        padding: 0;
        border-top: 0;
    }

    .cabecera-gestor-cae-pie-ayuda[b-fuchme3ab5],
    .cabecera-gestor-cae-pie-enlace-escritorio[b-fuchme3ab5] {
        display: none;
    }

    .cabecera-gestor-cae-pie-enlace-movil[b-fuchme3ab5] {
        display: inline;
    }

    .cabecera-gestor-cae-pie-enlace[b-fuchme3ab5] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 1px solid var(--color-border-control);
        border-radius: var(--radius-md);
        color: var(--color-text);
        font: var(--font-label);
        white-space: normal;
    }
}
/* /Features/Empresas/Components/EmpresaPreviewDrawer.razor.rz.scp.css */
/*
    Mismo criterio que ClientePreviewDrawer.razor.css (Features/Clientes/
    Components/) — apilamiento sin scrim, ancho 400px, mismo patrón visual
    generalizado a Empresas.
*/
.drawer-preview-empresa[b-0xuxfx0q0t] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: preview-empresa-entrar-b-0xuxfx0q0t var(--motion-transition) var(--ease-fluid);
}

@keyframes preview-empresa-entrar-b-0xuxfx0q0t {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-preview-empresa[b-0xuxfx0q0t] {
        animation: none;
    }
}

.cabecera-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.texto-cabecera-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.etiqueta-cabecera-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-cabecera-preview-empresa[b-0xuxfx0q0t] {
    font: var(--font-heading-md);
}

.boton-cerrar-preview-empresa[b-0xuxfx0q0t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    flex-shrink: 0;
}

.boton-cerrar-preview-empresa:hover[b-0xuxfx0q0t] {
    color: var(--color-text);
}

.boton-cerrar-preview-empresa:focus-visible[b-0xuxfx0q0t] {
    outline: var(--border-focus);
}

.cuerpo-preview-empresa[b-0xuxfx0q0t] {
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.rejilla-info-preview-empresa[b-0xuxfx0q0t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.celda-info-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.celda-info-preview-empresa span[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.celda-info-preview-empresa strong[b-0xuxfx0q0t] {
    font-size: 14px;
    font-weight: 600;
}

.tarjeta-contacto-preview-empresa[b-0xuxfx0q0t] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: 13px;
}

.titulo-tarjeta-contacto-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detalle-contacto-preview-empresa[b-0xuxfx0q0t] {
    color: var(--color-text-muted);
}

.vacio-preview-empresa[b-0xuxfx0q0t] {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.enlace-ver-todo-preview-empresa[b-0xuxfx0q0t] {
    margin-top: var(--space-3);
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.enlace-ver-todo-preview-empresa:hover[b-0xuxfx0q0t] {
    color: var(--color-primary-600);
}

.pie-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

.nota-pie-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .drawer-preview-empresa[b-0xuxfx0q0t] {
        max-width: 100%;
    }
}
/* /Features/Empresas/Components/EmpresaWorkspacePanel.razor.rz.scp.css */
.cabecera-empresa-360[b-t78bmxc6a2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.icono-empresa-360[b-t78bmxc6a2] {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary-500);
}

.texto-cabecera-empresa-360[b-t78bmxc6a2] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.kicker-empresa-360[b-t78bmxc6a2],
.recuentos-empresa-360[b-t78bmxc6a2] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.kicker-empresa-360[b-t78bmxc6a2] {
    letter-spacing: .08em;
    text-transform: uppercase;
}

.titulo-empresa-360[b-t78bmxc6a2] {
    font: var(--font-heading-md);
    text-wrap: pretty;
}

.rejilla-info-empresa-360[b-t78bmxc6a2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.acciones-empresa-360[b-t78bmxc6a2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (max-width: 480px) {
    .rejilla-info-empresa-360[b-t78bmxc6a2] { grid-template-columns: 1fr; }
}
/* /Features/Empresas/Pages/DeteccionTrabajadores.razor.rz.scp.css */
/* Detección de personal, Gen 2 («Deteccion Trabajadores TALVEG.dc.html»). Solo tokens de tokens.css. */

.deteccion-migas[b-2tkq8ch025] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.deteccion-volver[b-2tkq8ch025] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--font-label);
    color: var(--color-primary-500);
    text-decoration: none;
}

.deteccion-volver:hover[b-2tkq8ch025] {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.deteccion-ruta[b-2tkq8ch025] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.deteccion-panel[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.deteccion-panel-kicker[b-2tkq8ch025] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label);
    color: var(--color-system-text);
}

.deteccion-punto-sistema[b-2tkq8ch025] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-system-indicator);
}

.deteccion-procedencia[b-2tkq8ch025] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.deteccion-procedencia div[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deteccion-procedencia dt[b-2tkq8ch025] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.deteccion-procedencia dd[b-2tkq8ch025] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

.deteccion-panel-nota[b-2tkq8ch025] {
    margin: 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.deteccion-panel-titulo[b-2tkq8ch025] {
    margin: 0;
    font: var(--font-h4);
}

.deteccion-reglas[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.deteccion-reglas li[b-2tkq8ch025] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
}

.deteccion-reglas li div[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deteccion-reglas strong[b-2tkq8ch025] {
    font: var(--font-body-md);
    font-weight: 600;
}

.deteccion-reglas span[b-2tkq8ch025] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.deteccion-reglas .deteccion-regla-icono[b-2tkq8ch025] {
    display: inline-flex;
    flex: none;
    margin-top: 2px;
}

.deteccion-reglas .deteccion-regla-exito[b-2tkq8ch025] {
    color: var(--color-success-700);
}

.deteccion-reglas .deteccion-regla-aviso[b-2tkq8ch025] {
    color: var(--color-warning-700);
}

.deteccion-reglas .deteccion-regla-sistema[b-2tkq8ch025] {
    color: var(--color-system-text);
}

.deteccion-enlaces-configuracion[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label);
}

.deteccion-lista[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.deteccion-lista[aria-busy="true"][b-2tkq8ch025] {
    opacity: 0.7;
}

.deteccion-seccion[b-2tkq8ch025] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.deteccion-seccion .texto-descriptivo[b-2tkq8ch025] {
    margin: 0;
}

.deteccion-seccion-cabecera[b-2tkq8ch025] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}

.deteccion-seccion-titulo[b-2tkq8ch025] {
    margin: 0;
    font: var(--font-h3);
}

.deteccion-tabla-marco[b-2tkq8ch025] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.deteccion-tabla[b-2tkq8ch025] {
    min-width: 760px;
}

.deteccion-tabla td[b-2tkq8ch025] {
    vertical-align: middle;
}

.deteccion-nombre[b-2tkq8ch025] {
    font-weight: 600;
}

.deteccion-dni[b-2tkq8ch025] {
    margin-right: var(--space-2);
    color: var(--color-text-muted);
}

.deteccion-col-dni[b-2tkq8ch025] {
    width: 220px;
}

.deteccion-col-comprobacion[b-2tkq8ch025] {
    width: 240px;
}

.deteccion-col-impacto[b-2tkq8ch025] {
    width: 220px;
}

.deteccion-impacto[b-2tkq8ch025] {
    color: var(--color-text-muted);
}

.deteccion-col-acciones[b-2tkq8ch025] {
    width: 280px;
}

.deteccion-acciones-fila[b-2tkq8ch025] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.deteccion-solo-lectores[b-2tkq8ch025] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/Empresas/Pages/EmpresaDetalle.razor.rz.scp.css */
/*
    Empresa 360 — lo propio de esta página. La maquetación compartida de las
    páginas 360 (cuerpo con lateral, tarjetas, filas de relación) vive en
    Components/DesignSystem; aquí solo lo que no tiene primitiva.
*/

.empresa360-seccion[b-ynjomznyc3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Buscador de la pestaña Trabajadores, sobre los chips de estado. */
.empresa360-buscador[b-ynjomznyc3] {
    margin-bottom: var(--space-3);
}

.empresa360-chips[b-ynjomznyc3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.empresa360-chip[b-ynjomznyc3] {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-caption);
    cursor: pointer;
}

.empresa360-chip:hover[b-ynjomznyc3] {
    color: var(--color-text);
}

.empresa360-chip[aria-pressed="true"][b-ynjomznyc3] {
    border-color: var(--color-primary-500);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.empresa360-chip:focus-visible[b-ynjomznyc3] {
    outline: var(--border-focus);
    outline-offset: 1px;
}

.empresa360-pie[b-ynjomznyc3],
.empresa360-apoyo[b-ynjomznyc3] {
    margin: 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.empresa360-vacio-filtrado[b-ynjomznyc3] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}
/* /Features/Empresas/Pages/Empresas.razor.rz.scp.css */
/*
  Lista de Empresas (Empresas TALVEG.dc.html).

  NO se usa QuickGrid, y no es un olvido: la fila de Empresas se despliega para
  mostrar los Clientes empresariales a los que presta servicio, y QuickGrid no
  soporta filas expandibles — la misma razón, y con el mismo comentario, que ya
  llevaba Subcontratas. El mockup pide «una rejilla con cabecera, como Clientes
  y Trabajadores», pero esas dos NO tienen fila desplegable, así que la
  comparación no se traslada: lo que se traslada es la CABECERA y las columnas
  alineadas, que sí se pueden hacer con grid sobre las celdas que la fila ya
  pinta.

  Va en CSS aislado y no en list-page.css porque .tarjeta-fila-acordeon-cabecera
  es compartida con Subcontratas y Centros: cambiarla allí a grid movería tres
  pantallas en un incremento que solo ha verificado una.
*/
.conteo-empresas[b-1377p2cnp1] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.rejilla-empresas[b-1377p2cnp1] {
    /*
      chevron · empresa (razón social y CIF) · detecciones · cumplimiento · estado documental · acciones
      (orden de la maqueta aprobada)

      Ninguna pista se resuelve por contenido. La cabecera y cada fila son rejillas DISTINTAS que solo
      comparten esta definición: con la última pista en «auto», la fila la medía por su disparador «⋯»
      (44 px) y la cabecera, cuya celda está vacía, la dejaba en 0, así que la pista elástica de la
      cabecera era 44 px más ancha y los rótulos de las columnas quedaban 44 px a la derecha de sus
      celdas (medido a 1280 px, 2026-10-09). 44 px es lo que mide hoy el disparador «⋯»
      de MenuAcciones; si ese ancho cambia, las columnas siguen alineadas y solo cambia el aire de la
      última. Lo fija EmpresasCabeceraAlineadaE2ETests.

      La columna de estado mide 200 px, como «col-estado» de list-page.css en los listados con tabla: es
      el ancho que necesita el motivo bajo la pastilla.
    */
    display: grid;
    grid-template-columns: 24px minmax(200px, 2fr) minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(170px, 1.3fr) 40px;
    gap: var(--space-4);
    align-items: center;
}

/* Con selección múltiple entra una casilla delante y las columnas se corren. */
.rejilla-empresas-seleccion[b-1377p2cnp1] {
    grid-template-columns: 28px 24px minmax(200px, 2fr) minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(170px, 1.3fr) 40px;
}

/* La celda de estado no desborda su pista: el motivo se recorta dentro (MotivoIncidenciasDocumentales). */
.celda-estado-empresa[b-1377p2cnp1] {
    min-width: 0;
}

/*
  Cabecera de la página en UNA línea en escritorio: el dato «Gestor CAE» encoge (CabeceraGestorCae recorta
  sus nombres y agrupa en «+N» a quien no cabe) en vez de empujar los botones a otra fila. Solo en esta
  pantalla y por ::deep: la caja .cabecera-pagina es de CabeceraPagina y la comparten todas las demás, que
  no llevan un dato largo junto al título. Por debajo de 1024 px la cabecera vuelve a partirse, como siempre.
*/
@media (min-width: 1024px) {
    .contenedor-pagina[b-1377p2cnp1]  .cabecera-pagina {
        flex-wrap: nowrap;
    }

    .contenedor-pagina[b-1377p2cnp1]  .cabecera-pagina-texto {
        flex: 1 1 auto;
    }

    .contenedor-pagina[b-1377p2cnp1]  .cabecera-pagina-titular {
        flex-wrap: nowrap;
    }

    .contenedor-pagina[b-1377p2cnp1]  .cabecera-pagina-titular .titulo-pagina,
    .contenedor-pagina[b-1377p2cnp1]  .acciones-cabecera {
        flex: none;
        white-space: nowrap;
    }
}

/*
  Marco de la lista (mockup): una tarjeta con la cabecera de columnas en una
  banda blanca y las filas pegadas, separadas por una línea. Las reglas de
  .tarjeta-fila-acordeon* de list-page.css las comparten Subcontratas y
  Centros; aquí solo se anulan DENTRO del marco, con el atributo de ámbito de
  esta página. Sin overflow: ver el comentario del marco en Empresas.razor.
*/
.marco-lista-empresas[b-1377p2cnp1] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.cabecera-columnas-empresas[b-1377p2cnp1] {
    align-items: end;
    padding: 14px var(--space-4) 10px;
    background: var(--color-surface);
    border-bottom: 1.5px solid var(--color-text);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font: 600 12px/16px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.marco-lista-empresas .lista-filas-acordeon[b-1377p2cnp1] {
    gap: 0;
}

.marco-lista-empresas .tarjeta-fila-acordeon[b-1377p2cnp1] {
    border: 0;
    border-bottom: 1px solid var(--color-fila-divisor);
    border-radius: 0;
}

.marco-lista-empresas .tarjeta-fila-acordeon:last-child[b-1377p2cnp1] {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.marco-lista-empresas .tarjeta-fila-acordeon-cabecera[b-1377p2cnp1] {
    min-height: 0;
    padding: 12px var(--space-4);
    transition: background-color .12s ease, box-shadow .12s ease;
    border-bottom: 0;
    border-radius: 0;
}

.marco-lista-empresas .tarjeta-fila-acordeon-cabecera:hover[b-1377p2cnp1] {
    background-color: var(--color-primary-50);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.marco-lista-empresas .tarjeta-fila-acordeon-contenido[b-1377p2cnp1] {
    border-top: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-surface-subtle) 60%, var(--color-surface));
    padding: 4px var(--space-4) 4px 56px;
}

/* Cada celda recorta por su cuenta: sin esto, una razón social larga estira su
   columna y desalinea la fila respecto a la cabecera. */
.celda-empresa[b-1377p2cnp1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Celda «Empresa»: razón social encima y CIF debajo (maqueta aprobada). */
.celda-identidad-empresa[b-1377p2cnp1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* La columna de detecciones se reserva aunque no haya ninguna — es lo que
   mantiene la rejilla cuadrada de fila en fila. */
.celda-identidad-empresa .tarjeta-fila-acordeon-meta[b-1377p2cnp1] { font: var(--font-body-sm); color: var(--color-text-muted); letter-spacing: .02em; }

.celda-sin-deteccion[b-1377p2cnp1] {
    color: var(--color-text-muted);
}

/* La fila cuya vista previa está abierta se marca, como en el mockup. */
.marco-lista-empresas .fila-empresa-en-vista-previa[b-1377p2cnp1] {
    background: var(--color-primary-50);
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

/* Fila desplegada: los documentos que piden trabajo, cada uno con su «Gestionar» (maqueta de Empresas). */
.documentos-pendientes-empresa[b-1377p2cnp1] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.documento-pendiente-empresa[b-1377p2cnp1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.documento-pendiente-empresa:first-child[b-1377p2cnp1] {
    border-top-color: transparent;
}

.documento-pendiente-nombre[b-1377p2cnp1] {
    flex: none;
    width: 220px;
    font: 600 13px/18px var(--font-family);
}

.documento-pendiente-detalle[b-1377p2cnp1] {
    flex: 1;
    min-width: 120px;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.documento-pendiente-gestionar[b-1377p2cnp1] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary-500);
    font: var(--font-label);
    cursor: pointer;
}

.documento-pendiente-gestionar:hover[b-1377p2cnp1] {
    text-decoration: underline;
}

.documento-pendiente-gestionar:focus-visible[b-1377p2cnp1] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Título de cada grupo «Por Cliente» (maqueta de Empresas): nombre del Cliente en mayúsculas y recuento. */
.cabecera-grupo-empresas[b-1377p2cnp1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-fila-divisor);
    font: 600 12px/16px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
}

.cabecera-grupo-empresas-recuento[b-1377p2cnp1] {
    color: var(--color-text-muted);
}
/* /Features/EncargoDeAdministracion/AvisoAdministraPorEncargo.razor.rz.scp.css */
.aviso-por-encargo[b-xkuvq92rdy] {
    align-items: flex-start;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font: var(--font-body-sm);
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.aviso-por-encargo strong[b-xkuvq92rdy] {
    font: var(--font-body-md);
    font-weight: 600;
}
/* /Features/EncargoDeAdministracion/EncargoAdministracionPanel.razor.rz.scp.css */
.encargo-administracion[b-zxd7orennl] {
    display: grid;
    gap: var(--space-3);
}

.encargo-administracion-nota[b-zxd7orennl] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: 0 0 var(--space-3);
}

.encargo-administracion-error[b-zxd7orennl] {
    color: var(--color-danger-700);
    font: var(--font-body-sm);
    margin: 0;
}

.encargo-administracion-fila[b-zxd7orennl] {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}

.encargo-administracion-cabecera[b-zxd7orennl] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.encargo-administracion-operador[b-zxd7orennl] {
    color: var(--color-text);
    flex: 1 1 auto;
    font: var(--font-body-md);
}
/* /Features/Extension/Pages/ConectarExtension.razor.rz.scp.css */
.acciones-extension[b-3g6427ktb0] { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.aviso-error[b-3g6427ktb0] { color: var(--color-danger-700); font: var(--font-body-md); margin: var(--space-3) 0 0; }

.instalar-extension[b-3g6427ktb0] { margin-top: var(--space-6); }
/* /Features/Facturacion/Pages/Facturacion.razor.rz.scp.css */
/* Franja del cliente (mockup Gen 2): selector y, con cliente elegido, el
   estimado del mes en curso y los conceptos tarificados. */
.franja-cliente[b-sxls8o06j1] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.bloque-selector-cliente[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 0 1 320px;
    min-width: 240px;
}

.dato-cliente[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--space-5);
    border-left: var(--border-default);
}

.dato-cliente-etiqueta[b-sxls8o06j1] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dato-cliente-valor[b-sxls8o06j1] {
    font: var(--font-h3);
    font-variant-numeric: tabular-nums;
}

.dato-cliente-pista[b-sxls8o06j1] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .dato-cliente[b-sxls8o06j1] {
        padding-left: 0;
        border-left: none;
    }
}

/* Controles que no pueden ser CampoTexto/CampoSelect: el selector de cliente
   necesita su id, y los numéricos usan @bind (cultura invariante, que es la
   que manda <input type="number">). Mismo aspecto que .campo-input. Antes
   llevaban campo-texto/etiqueta-campo, clases que no declara ningún CSS: se
   pintaban con el estilo nativo del navegador. */
.etiqueta-facturacion[b-sxls8o06j1] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.control-facturacion[b-sxls8o06j1] {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.control-facturacion:focus[b-sxls8o06j1] {
    outline: var(--border-focus);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

@media (max-width: 767px) {
    .control-facturacion[b-sxls8o06j1] {
        font-size: 1rem;
    }
}

.control-precio[b-sxls8o06j1] {
    max-width: 140px;
    text-align: right;
}

.control-moneda[b-sxls8o06j1] {
    max-width: 72px;
    text-align: center;
    text-transform: uppercase;
}

.control-anyo[b-sxls8o06j1] {
    width: 120px;
}

.mensaje-error-campo[b-sxls8o06j1] {
    display: block;
    margin-top: var(--space-1);
    font: var(--font-body-sm);
    color: var(--color-danger-700);
}

/* Secciones y tablas */
.seccion-facturacion[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tabla-desplazable[b-sxls8o06j1] {
    overflow-x: auto;
}

.col-numero[b-sxls8o06j1] {
    text-align: right;
}

.cifra[b-sxls8o06j1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.texto-atenuado[b-sxls8o06j1] {
    color: var(--color-text-muted);
}

.tabla-facturacion .col-numero[b-sxls8o06j1] {
    width: 160px;
}

.tabla-facturacion .col-moneda[b-sxls8o06j1] {
    width: 96px;
    text-align: center;
}

.tabla-facturacion .col-acciones[b-sxls8o06j1] {
    width: 200px;
    text-align: right;
}

.acciones-fila[b-sxls8o06j1] {
    display: inline-flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.concepto-nombre[b-sxls8o06j1] {
    display: block;
    font-weight: 600;
}

.concepto-unidad[b-sxls8o06j1] {
    display: block;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.fila-edicion td[b-sxls8o06j1] {
    background: var(--color-primary-50);
    vertical-align: top;
}

/* Formulario nueva tarifa */
.rejilla-formulario[b-sxls8o06j1] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
    .rejilla-formulario[b-sxls8o06j1] {
        grid-template-columns: 1fr;
    }

    /* Guardar/Cancelar a todo el ancho y apilados (Guardar arriba, ya es el
       primero en el marcado) — más fácil de alcanzar con el pulgar que dos
       botones lado a lado. */
    .acciones-formulario[b-sxls8o06j1] {
        flex-direction: column;
    }

    .acciones-formulario .boton[b-sxls8o06j1] {
        width: 100%;
    }
}

.campo-formulario[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.acciones-formulario[b-sxls8o06j1] {
    display: flex;
    gap: var(--space-2);
}

.acciones-seccion[b-sxls8o06j1] {
    display: flex;
}

/* Filtros resumen mensual */
.filtros-resumen[b-sxls8o06j1] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.campo-mes[b-sxls8o06j1] {
    min-width: 160px;
}

/* Reparto del importe: una barra por línea, relativa al subtotal mayor. El
   texto de cada fila es el dato; la barra, solo su lectura rápida. */
.reparto-importe[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.reparto-importe-titulo[b-sxls8o06j1] {
    font: var(--font-label);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.reparto-importe-lista[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.reparto-importe-fila[b-sxls8o06j1] {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) minmax(6rem, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    font: var(--font-body-sm);
}

.reparto-importe-concepto[b-sxls8o06j1] {
    color: var(--color-text-muted);
}

.reparto-importe-pista[b-sxls8o06j1] {
    height: 16px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
    overflow: hidden;
}

.reparto-importe-barra[b-sxls8o06j1] {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-500);
}

.reparto-importe-valor[b-sxls8o06j1] {
    font-weight: 600;
    text-align: right;
}

@media (max-width: 640px) {
    .reparto-importe-fila[b-sxls8o06j1] {
        grid-template-columns: 1fr auto;
    }

    .reparto-importe-pista[b-sxls8o06j1] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Tabla resumen mensual */
.tabla-resumen .col-numero[b-sxls8o06j1] {
    width: 160px;
}

.subtotal-importe[b-sxls8o06j1] {
    font-weight: 600;
}

.fila-total td[b-sxls8o06j1] {
    font-weight: 600;
    border-top: 2px solid var(--color-border);
    background: var(--color-surface-hover);
}

.total-importe[b-sxls8o06j1] {
    font: var(--font-body-lg);
    font-weight: 600;
}

.nota-facturacion[b-sxls8o06j1] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* Acciones de fila */
/* --color-peligro y --color-peligro-hover mapean a danger-500 y danger-700,
   pero como FOREGROUND el -500 incumple el 4.5:1 (3.76:1 sobre Surface), asi
   que el estado de reposo ya usa -700: no hay un tercer tono de la escala
   del semaforo con el que oscurecer el texto en hover sin inventarlo. La
   afordancia de hover es por FONDO en su lugar (ODM-12, resuelto), igual
   que el item destructivo de MenuAcciones: el texto se queda en -700 fijo,
   el fondo neutro es lo que responde al hover. */
.enlace-accion[b-sxls8o06j1] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font: var(--font-label-md);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.enlace-accion:hover[b-sxls8o06j1] {
    background-color: var(--color-surface-hover);
}

.enlace-peligro[b-sxls8o06j1] {
    color: var(--color-danger-700);
}

.aviso-error[b-sxls8o06j1] {
    color: var(--color-danger-700);
    font: var(--font-body-md);
    margin: 0;
}
/* /Features/Gestiones/Pages/Gestiones.razor.rz.scp.css */
/*
    Gestiones Gen 2 (Gestiones TALVEG.dc.html). Solo lo que pinta esta
    página: la rejilla, los chips y los estados vacíos son del catálogo o de
    list-page.css (global).
*/

/*
    Vista rápida. Mismo criterio de apilamiento que las vistas previas de
    Vehículos y Subcontratas: sin scrim (role="complementary"), se puede
    seguir trabajando con la lista detrás. 380px según el mockup.
*/
.vista-rapida-gestion[b-q950h3u6vm] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 380px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: vista-rapida-gestion-entrar-b-q950h3u6vm var(--motion-transition) var(--ease-fluid);
}

@keyframes vista-rapida-gestion-entrar-b-q950h3u6vm {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vista-rapida-gestion[b-q950h3u6vm] {
        animation: none;
    }
}

.cabecera-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.texto-cabecera-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.etiqueta-vista-rapida-gestion[b-q950h3u6vm] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-vista-rapida-gestion[b-q950h3u6vm] {
    font: var(--font-h3);
}

.meta-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.boton-cerrar-vista-rapida-gestion[b-q950h3u6vm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.boton-cerrar-vista-rapida-gestion:hover[b-q950h3u6vm] {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.boton-cerrar-vista-rapida-gestion:focus-visible[b-q950h3u6vm] {
    outline: var(--border-focus);
}

.cuerpo-vista-rapida-gestion[b-q950h3u6vm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rejilla-vista-rapida-gestion[b-q950h3u6vm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.celda-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.celda-vista-rapida-gestion span[b-q950h3u6vm] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.celda-vista-rapida-gestion strong[b-q950h3u6vm] {
    font: var(--font-body-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.enlaces-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.enlace-vista-rapida-gestion[b-q950h3u6vm] {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font: var(--font-label);
    cursor: pointer;
}

.enlace-vista-rapida-gestion:hover[b-q950h3u6vm] {
    color: var(--color-primary-600);
}

.enlace-vista-rapida-gestion:focus-visible[b-q950h3u6vm] {
    outline: var(--border-focus);
}

.pie-vista-rapida-gestion[b-q950h3u6vm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .vista-rapida-gestion[b-q950h3u6vm] {
        max-width: 100%;
    }
}

.gestion-trabajador-centro[b-q950h3u6vm] { display: flex; flex-direction: column; gap: var(--space-1); }
.gestion-centro[b-q950h3u6vm] { font: var(--font-caption); color: var(--color-text-muted); }
.gestion-completar[b-q950h3u6vm], .gestion-reabrir[b-q950h3u6vm] { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-2); padding: var(--space-1) var(--space-2); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: var(--font-label); cursor: pointer; }
.gestion-completar:hover[b-q950h3u6vm], .gestion-reabrir:hover[b-q950h3u6vm] { border-color: var(--color-border-strong); }
.gestion-completar:focus-visible[b-q950h3u6vm], .gestion-reabrir:focus-visible[b-q950h3u6vm], .gestiones-opciones-orden button:focus-visible[b-q950h3u6vm] { outline: var(--border-focus); }
.gestion-completar:disabled[b-q950h3u6vm], .gestion-reabrir:disabled[b-q950h3u6vm] { opacity: .5; cursor: default; }
.gestiones-opciones-orden[b-q950h3u6vm] { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
.gestiones-opciones-orden button[b-q950h3u6vm] { border: var(--border-default); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); padding: var(--space-2); font: var(--font-label); cursor: pointer; text-align: left; white-space: nowrap; }
/* /Features/GestionRoles/Pages/Roles.razor.rz.scp.css */
/* Pestañas propias y no <Pestanas> del catálogo: la de «Pendientes de
   asignar» lleva un Badge con el recuento, y PestanaDefinicion solo admite
   texto e icono. Métrica del mockup Gen 2: 40px de alto, 14/20 a peso 600. */
.pestanas-roles[b-mh215rmgii] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    border-bottom: var(--border-default);
    margin-bottom: var(--space-5);
}

.pestana-rol[b-mh215rmgii] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
    height: 2.5rem;
    padding: 0 var(--space-3);
    margin-bottom: -1px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.pestana-rol:hover[b-mh215rmgii] {
    color: var(--color-text);
}

.pestana-rol-activa[b-mh215rmgii] {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

.panel-roles[b-mh215rmgii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* El gap del panel ya separa: el margen propio de .texto-descriptivo se
   sumaría a él. */
.panel-roles > .texto-descriptivo[b-mh215rmgii] {
    margin: 0;
}

.rejilla-roles[b-mh215rmgii] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: var(--space-4);
}

/* La tarjeta del rol es una columna: título, descripción que crece y pie
   con el recuento, alineado abajo en toda la fila. Tarjeta pinta su propio
   markup, así que se alcanza con ::deep desde la rejilla. */
.rejilla-roles[b-mh215rmgii]  .tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rejilla-roles[b-mh215rmgii]  .tarjeta-header {
    padding: var(--space-5) var(--space-5) 0;
    border-bottom: none;
}

.rejilla-roles[b-mh215rmgii]  .tarjeta-titulo {
    margin: 0;
    font: var(--font-heading-sm);
}

.rejilla-roles[b-mh215rmgii]  .tarjeta-contenido {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.descripcion-rol[b-mh215rmgii] {
    flex: 1;
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.contador-usuarios[b-mh215rmgii] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-top: var(--space-3);
    border-top: var(--border-default);
    font: var(--font-label-md);
    color: var(--color-text);
}

.contador-usuarios[b-mh215rmgii]  .icono {
    color: var(--color-text-muted);
}

.otros-planos-autoridad[b-mh215rmgii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 47.5rem;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.otros-planos-titulo[b-mh215rmgii] {
    margin: 0;
    font: var(--font-label-md);
    color: var(--color-text);
}

.otros-planos-texto[b-mh215rmgii] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.otros-planos-texto a[b-mh215rmgii],
.panel-roles > .texto-descriptivo a[b-mh215rmgii] {
    font-weight: 600;
}

/* En pantallas estrechas la tabla se desplaza dentro de su caja, no la página. */
.tabla-pendientes[b-mh215rmgii] {
    overflow-x: auto;
}

.celda-nombre[b-mh215rmgii] {
    font-weight: 600;
}

.celda-solicitado[b-mh215rmgii] {
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.celda-accion[b-mh215rmgii] {
    text-align: right;
}

/* Nombre accesible sin ocupar sitio: el encabezado vacío de la columna de
   acciones y la etiqueta del selector de rol de cada fila. */
.texto-solo-lector[b-mh215rmgii],
.celda-rol[b-mh215rmgii]  label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/Importacion/ArbolPlanImportacion.razor.rz.scp.css */
/* Árbol del plan de la Combinada, medidas del mockup «Importar Combinado». */
.arbol-plan-importacion[b-9puaihz6vj] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.arbol-plan-vacio[b-9puaihz6vj] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.arbol-plan-lista[b-9puaihz6vj],
.arbol-plan-sublista[b-9puaihz6vj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.arbol-plan-sublista[b-9puaihz6vj] {
    margin-left: var(--space-3);
}

.arbol-plan-rama[b-9puaihz6vj] {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-4);
}

.arbol-plan-rama-nueva[b-9puaihz6vj] {
    border-left-color: var(--color-success-500);
}

.arbol-plan-fila[b-9puaihz6vj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    flex-wrap: wrap;
}

.arbol-plan-icono[b-9puaihz6vj] {
    display: inline-flex;
    color: var(--color-text-muted);
}

.arbol-plan-nombre-cliente[b-9puaihz6vj] {
    font: var(--font-body-lg);
    font-weight: 700;
}

.arbol-plan-nombre-empresa[b-9puaihz6vj] {
    font: var(--font-body-md);
    font-weight: 600;
}

.arbol-plan-nombre-hijo[b-9puaihz6vj] {
    font: var(--font-body-md);
}

.arbol-plan-meta[b-9puaihz6vj] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Importacion/Pages/Importacion.razor.rz.scp.css */
/* Vuelta a Clientes y ruta: solo cuando se llega desde Clientes
   (?plantilla=clientes), como en el mockup «Importar Clientes». */
.ruta-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.enlace-volver-importacion[b-0rxf3xpxue] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font: var(--font-label-md);
    color: var(--color-primary-500);
    text-decoration: none;
}

.enlace-volver-importacion:hover[b-0rxf3xpxue] {
    color: var(--color-primary-600);
}

.miga-importacion[b-0rxf3xpxue] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.miga-importacion-flecha[b-0rxf3xpxue] {
    color: var(--color-border-strong);
}

.miga-importacion-actual[b-0rxf3xpxue] {
    color: var(--color-text);
}

.pasos-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.paso-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.paso-importacion:disabled[b-0rxf3xpxue] {
    cursor: not-allowed;
    opacity: .6;
}

.paso-importacion:not(:disabled)[b-0rxf3xpxue] {
    cursor: pointer;
}

.paso-importacion-marca[b-0rxf3xpxue] {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

/* El circulo del paso mide 18px: el icono de 16 lo llenaria de borde a borde,
   asi que dentro de esta marca se pinta a 12. ::deep porque el svg lo
   renderiza <Icono>, un componente hijo sin el scope de esta pagina. */
.paso-importacion-marca[b-0rxf3xpxue]  .icono {
    width: 12px;
    height: 12px;
}

.paso-importacion-actual[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-500);
    color: var(--color-surface);
}

.paso-importacion-actual .paso-importacion-marca[b-0rxf3xpxue] {
    background-color: rgba(255, 255, 255, .2);
    color: var(--color-surface);
}

.paso-importacion-completado:not(.paso-importacion-actual)[b-0rxf3xpxue] {
    color: var(--color-text);
}

.paso-importacion-completado:not(.paso-importacion-actual) .paso-importacion-marca[b-0rxf3xpxue] {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.paso-importacion-flecha[b-0rxf3xpxue] {
    color: var(--color-border-strong);
    font-size: 12px;
}

.titulo-seccion-importacion[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-heading-md);
}

.rejilla-paso1[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-6);
}

@media (max-width: 1150px) {
    .rejilla-paso1[b-0rxf3xpxue] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.columna-plantillas[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rejilla-plantillas[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

/* La tarjeta es el marco; el radio (.opcion-tarjeta-plantilla) ocupa todo lo
   que no es la franja del enlace de la plantilla en blanco, que va fuera del
   radio para seguir siendo un enlace accesible. */
.tarjeta-plantilla[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.opcion-tarjeta-plantilla[b-0rxf3xpxue] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.opcion-tarjeta-plantilla:focus-visible[b-0rxf3xpxue] {
    outline-offset: -4px;
}

.tarjeta-plantilla:hover[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
}

.tarjeta-plantilla-seleccionada[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.cabecera-tarjeta-plantilla[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.icono-tarjeta-plantilla[b-0rxf3xpxue] {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.titulo-tarjeta-plantilla[b-0rxf3xpxue] {
    font: var(--font-heading-sm);
}

.descripcion-tarjeta-plantilla[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.limite-tarjeta-plantilla[b-0rxf3xpxue] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.enlace-plantilla-blanco[b-0rxf3xpxue] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 600;
    margin: 0 var(--space-5) var(--space-5);
}

.acciones-formulario[b-0rxf3xpxue] {
    margin-top: var(--space-4);
}

.acciones-derecha[b-0rxf3xpxue] {
    display: flex;
    justify-content: flex-end;
}

.acciones-entre[b-0rxf3xpxue] {
    display: flex;
    justify-content: space-between;
}

.panel-historial-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabecera-panel-historial[b-0rxf3xpxue] {
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.vacio-historial-importacion[b-0rxf3xpxue] {
    padding: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0;
}

.item-historial-importacion[b-0rxf3xpxue] {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-historial-importacion:last-child[b-0rxf3xpxue] {
    border-bottom: none;
}

.fila-item-historial[b-0rxf3xpxue] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.plantilla-item-historial[b-0rxf3xpxue] {
    font-size: 14px;
    font-weight: 600;
}

.fecha-item-historial[b-0rxf3xpxue] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.detalle-item-historial[b-0rxf3xpxue] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.resultado-exito-historial[b-0rxf3xpxue] {
    color: var(--color-success-700);
}

.resultado-fallo-historial[b-0rxf3xpxue] {
    color: var(--color-danger-700);
}

.columna-paso-ancho[b-0rxf3xpxue] {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.columna-paso-estrecho[b-0rxf3xpxue] {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.cabecera-revision-plan[b-0rxf3xpxue] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.detalle-revision-plan[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.badges-resumen-plan[b-0rxf3xpxue] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tabla-plan-importacion-envoltorio[b-0rxf3xpxue] {
    overflow-x: auto;
}

/* Vistas del plan de la Combinada (paso 3): árbol o lista plana. */
.vistas-plan-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.vista-plan-importacion[b-0rxf3xpxue] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-label-md);
    cursor: pointer;
}

.vista-plan-importacion-activa[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.titulo-items-plan[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-heading-sm);
}

/* Las cuatro hojas de la Combinada (paso 2, solo esa plantilla). */
.hojas-combinada-importacion[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.titulo-hojas-combinada[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-heading-sm);
}

.rejilla-hojas-combinada[b-0rxf3xpxue] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.tarjeta-hoja-combinada[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cabecera-hoja-combinada[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.numero-hoja-combinada[b-0rxf3xpxue] {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.nombre-hoja-combinada[b-0rxf3xpxue] {
    font: var(--font-label-md);
    font-size: 14px;
}

.columnas-hoja-combinada[b-0rxf3xpxue],
.regla-hoja-combinada[b-0rxf3xpxue],
.nota-hojas-combinada[b-0rxf3xpxue] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.nota-hojas-combinada[b-0rxf3xpxue] {
    margin: 0;
}

/* Alcance de «Reemplazar» (paso 4, solo con la casilla marcada). */
.aviso-reemplazar-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background-color: var(--color-danger-50);
    border: 1px solid var(--color-danger-500);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.icono-aviso-reemplazar[b-0rxf3xpxue] {
    flex: none;
    display: inline-flex;
    color: var(--color-danger-700);
}

.texto-aviso-reemplazar[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

/* Columnas de la hoja «Clientes» (paso 2, solo esa plantilla). */
.columnas-plantilla-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabecera-columnas-plantilla[b-0rxf3xpxue] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-hover);
    border-bottom: 1px solid var(--color-border);
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.tabla-columnas-plantilla-envoltorio[b-0rxf3xpxue] {
    overflow-x: auto;
}

.nombre-columna-plantilla[b-0rxf3xpxue] {
    font-weight: 600;
}

.ejemplo-columna-plantilla[b-0rxf3xpxue] {
    color: var(--color-text-muted);
}

.nota-columnas-plantilla[b-0rxf3xpxue] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* Altas del plan que la escritura no hará (paso 3). */
.aviso-altas-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.icono-aviso-altas[b-0rxf3xpxue] {
    flex: none;
    display: inline-flex;
    color: var(--color-warning-700);
}

.titulo-aviso-altas[b-0rxf3xpxue] {
    margin: 0 0 var(--space-1);
    font: var(--font-label-md);
    color: var(--color-warning-700);
}

.detalle-aviso-altas[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

.tarjeta-confirmacion-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aviso-confirmacion-importacion[b-0rxf3xpxue] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.punto-aviso-confirmacion[b-0rxf3xpxue] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-danger-500);
    margin-top: 6px;
}

.titulo-aviso-confirmacion[b-0rxf3xpxue] {
    margin: 0 0 4px;
    font: var(--font-heading-sm);
}

.detalle-aviso-confirmacion[b-0rxf3xpxue] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.casilla-confirmacion-importacion[b-0rxf3xpxue],
.opcion-reemplazar-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font: var(--font-body-md);
}

.casilla-confirmacion-importacion input[b-0rxf3xpxue],
.opcion-reemplazar-importacion input[b-0rxf3xpxue] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
}

.tarjeta-reporte-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cabecera-reporte-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.icono-exito-reporte[b-0rxf3xpxue] {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-success-50);
    border: 1px solid var(--color-success-500);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-reporte-importacion[b-0rxf3xpxue] {
    font: var(--font-heading-sm);
}

.rejilla-reporte-importacion[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.nota-reporte-importacion[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* El título de cada paso recibe el foco al cambiar de paso (tabindex="-1",
   solo por código): es un punto de lectura, no un control, y no se marca. */
.titulo-seccion-importacion:focus[b-0rxf3xpxue] {
  outline: none;
}

.acciones-contexto-documentos[b-0rxf3xpxue] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin: calc(var(--space-4) * -1) 0 var(--space-5);
    font: var(--font-body-sm);
    font-weight: 600;
}

.contexto-plantilla-documentos[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contexto-plantilla-documentos h3[b-0rxf3xpxue],
.tarjeta-alcance-documentos h3[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-heading-sm);
}

.contexto-plantilla-documentos p[b-0rxf3xpxue] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
}

.contexto-plantilla-documentos a[b-0rxf3xpxue] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.rejilla-alcance-documentos[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.tarjeta-alcance-documentos[b-0rxf3xpxue] {
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tarjeta-alcance-documentos h3[b-0rxf3xpxue] { color: var(--color-success-700); }
.tarjeta-alcance-documentos-limitacion h3[b-0rxf3xpxue] { color: var(--color-text-muted); }

.tarjeta-alcance-documentos ul[b-0rxf3xpxue] {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
}

@media (max-width: 700px) {
    .acciones-contexto-documentos[b-0rxf3xpxue] { justify-content: flex-start; margin-top: 0; }
    .rejilla-alcance-documentos[b-0rxf3xpxue] { grid-template-columns: 1fr; }
}

/* Flujo documental (mockup «Importar Documentos»): estados de la hoja,
   filtros del plan y siguiente paso con los PDF en el reporte. */
.estado-hoja-documentos[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.estado-hoja-documentos > div[b-0rxf3xpxue] {
    flex: 1 1 240px;
}

.estado-hoja-documentos-error[b-0rxf3xpxue] {
    background-color: var(--color-danger-50);
    border-color: var(--color-danger-500);
}

.icono-estado-hoja-documentos[b-0rxf3xpxue] {
    flex: none;
    display: inline-flex;
    color: var(--color-text-muted);
}

.estado-hoja-documentos-error .icono-estado-hoja-documentos[b-0rxf3xpxue],
.estado-hoja-documentos-error .titulo-estado-hoja-documentos[b-0rxf3xpxue] {
    color: var(--color-danger-700);
}

.titulo-estado-hoja-documentos[b-0rxf3xpxue] {
    margin: 0 0 var(--space-1);
    font: var(--font-label-md);
    color: var(--color-text);
}

.detalle-estado-hoja-documentos[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

.filtros-plan-importacion[b-0rxf3xpxue] {
    display: inline-flex;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

.filtro-plan-importacion[b-0rxf3xpxue] {
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    cursor: pointer;
}

.filtro-plan-importacion-activo[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.siguiente-paso-pdf[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.titulo-siguiente-paso-pdf[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-label-md);
}

.texto-siguiente-paso-pdf[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.enlace-siguiente-paso-pdf[b-0rxf3xpxue] {
    align-self: flex-start;
    font: var(--font-body-sm);
    font-weight: 600;
}

@media (max-width: 700px) {
    .filtros-plan-importacion[b-0rxf3xpxue] { margin-left: 0; }
}

/* Filtro del plan sin filas que enseñar: se dice, no se deja la tabla muda. */
.fila-plan-filtro-vacio td[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4);
}
/* /Features/Incidencias/Pages/Incidencias.razor.rz.scp.css */
/* Incidencias TALVEG.dc.html: Tipo y Gravedad comparten fila en el formulario. */
.campos-en-par[b-z1lwyqe86c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* Recuento de la lista, junto a «Selección múltiple». */
.recuento-incidencias[b-z1lwyqe86c] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* Recordatorio de los atajos de AtajosListaTeclado, a la derecha de la barra. */
.atajos-incidencias[b-z1lwyqe86c] {
    margin-left: auto;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.atajos-incidencias kbd[b-z1lwyqe86c] {
    font: var(--font-body-sm);
    font-weight: 700;
    color: var(--color-text);
}
/* /Features/IncorporacionCartera/Components/DialogoSolicitarIncorporacion.razor.rz.scp.css */
.dialogo-solicitud-campos[b-z17p6xf0cm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dialogo-solicitud-estado[b-z17p6xf0cm] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.dialogo-solicitud-aviso[b-z17p6xf0cm] {
    margin: 0;
    color: var(--color-text);
    font: var(--font-body-sm);
    font-weight: 600;
}

.dialogo-solicitud-contador[b-z17p6xf0cm] {
    margin: calc(-1 * var(--space-2)) 0 0;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-align: end;
}

.dialogo-solicitud-contador-excedido[b-z17p6xf0cm] {
    color: var(--color-danger-700);
    font-weight: 600;
}
/* /Features/IncorporacionCartera/Components/PanelDarAcceso.razor.rz.scp.css */
.dar-acceso-descripcion[b-58yxn6m575],
.dar-acceso-intro[b-58yxn6m575] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.dar-acceso-lista[b-58yxn6m575] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dar-acceso-fila[b-58yxn6m575] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: var(--border-default);
}

.dar-acceso-fila:first-child[b-58yxn6m575] {
    border-top: 0;
}

.dar-acceso-empresa[b-58yxn6m575] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    color: var(--color-text);
    font: var(--font-body-md);
    overflow-wrap: anywhere;
}

.dar-acceso-nota[b-58yxn6m575] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.dar-acceso-propuesta[b-58yxn6m575] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
/* /Features/IncorporacionCartera/Components/PanelOperacionesSinPrincipal.razor.rz.scp.css */
.sin-principal-intro[b-d99pig2p8p] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.sin-principal-acciones[b-d99pig2p8p] {
    text-align: end;
}

.sin-principal-solo-lectores[b-d99pig2p8p] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Features/IncorporacionCartera/Components/PropuestaApoyoAceptada.razor.rz.scp.css */
/* Dentro del panel de la campana: el texto arriba y la acción debajo. No es un enlace, así que no
   lleva el cursor ni el realce de los avisos que navegan. */
.propuesta-aceptada[b-6k6zrsnzjl] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    font: var(--font-body-md);
    overflow-wrap: anywhere;
}

.propuesta-aceptada-acciones[b-6k6zrsnzjl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
}
/* /Features/IncorporacionCartera/Pages/SolicitudesCartera.razor.rz.scp.css */
.solicitudes-vacio[b-hhp8b9hyi8] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.solicitudes-mensaje[b-hhp8b9hyi8] {
    max-width: 32rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.solicitudes-acciones[b-hhp8b9hyi8] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.solicitudes-nota[b-hhp8b9hyi8] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.solicitudes-solo-lectores[b-hhp8b9hyi8] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/Integraciones/Pages/ConectoresCae.razor.rz.scp.css */
.aviso-error[b-ch9szuexu8] { color: var(--color-danger-700); font: var(--font-body-md); margin: 0 0 var(--space-3); }
/* /Features/Integraciones/Pages/Conexiones.razor.rz.scp.css */
.seccion-conexiones[b-7qsj89xf4t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.seccion-lineas-whatsapp[b-7qsj89xf4t] {
    border-top: var(--border-default);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
}

.titulo-bloque-conexiones[b-7qsj89xf4t] { font: var(--font-h3); margin: 0; }

.acciones-conexion-buzon[b-7qsj89xf4t] { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.acciones-conexion-buzon[b-7qsj89xf4t]  .campo { flex: 1 1 16rem; }
.acciones-lineas-whatsapp[b-7qsj89xf4t] { display: flex; }

.enlace-conectar-microsoft[b-7qsj89xf4t] {
    align-items: center; background: var(--color-primario-fondo); border: 1px solid var(--color-primario-fondo);
    border-radius: var(--radius-md); color: var(--color-primario-texto); display: inline-flex; font: var(--font-label);
    gap: var(--space-2); justify-content: center; min-height: 2.5rem; padding: 0 var(--space-4); text-decoration: none;
}
.enlace-conectar-microsoft:hover[b-7qsj89xf4t] { background: var(--color-primario-fondo-hover); border-color: var(--color-primario-fondo-hover); color: var(--color-primario-texto); }
.solo-lector[b-7qsj89xf4t] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.texto-secundario[b-7qsj89xf4t] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.texto-error[b-7qsj89xf4t] {
    display: block;
    color: var(--color-danger-700);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    max-width: 22rem;
}

.acciones-conexion[b-7qsj89xf4t] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.opcion-pool-linea[b-7qsj89xf4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-weight: normal;
}
/* /Features/Notificaciones/CampanaAvisos.razor.rz.scp.css */
/* Contador: letra casi negra (la misma #1a1206 de los avisos ámbar) sobre danger-500, que no cambia de
   tema: el blanco sobre ese rojo da 3,76:1 y a 10 px no llega. */
.campana-contador[b-qg874waq4x] {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background-color: var(--color-danger-500);
    color: #1a1206;
    font: var(--font-body-sm);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.campana-cabecera[b-qg874waq4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-default);
    margin-bottom: var(--space-1);
    color: var(--color-text);
    font: var(--font-body-md);
}

.campana-marcar[b-qg874waq4x] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-700);
    font: var(--font-body-sm);
    cursor: pointer;
}

.campana-marcar:hover[b-qg874waq4x] {
    text-decoration: underline;
}

.campana-marcar:focus-visible[b-qg874waq4x] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.campana-vacio[b-qg874waq4x] {
    margin: 0;
    padding: var(--space-4) var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.campana-lista[b-qg874waq4x] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
}

.campana-item[b-qg874waq4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: var(--font-body-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.campana-item:hover[b-qg874waq4x] {
    background-color: var(--color-surface-hover);
}

.campana-item:focus-visible[b-qg874waq4x] {
    outline: var(--border-focus);
    outline-offset: -2px;
}

.campana-item-texto[b-qg874waq4x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.campana-item-texto small[b-qg874waq4x] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.campana-nuevo[b-qg874waq4x] {
    flex-shrink: 0;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-avatar-fondo);
    color: var(--color-avatar-texto);
    font: var(--font-body-sm);
    font-weight: 600;
}

.campana-item-con-acciones[b-qg874waq4x] {
    cursor: default;
}

a.campana-item-texto[b-qg874waq4x] {
    color: inherit;
    text-decoration: none;
}

a.campana-item-texto:hover strong[b-qg874waq4x] {
    text-decoration: underline;
}

a.campana-item-texto:focus-visible[b-qg874waq4x] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

.campana-acciones[b-qg874waq4x] {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
}

.campana-pie[b-qg874waq4x] {
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-default);
}

.campana-ver-todas[b-qg874waq4x] {
    color: var(--color-primary-700);
    font: var(--font-body-sm);
}

.campana-ver-todas:focus-visible[b-qg874waq4x] {
    outline: var(--border-focus);
    outline-offset: 2px;
}
/* /Features/Plantillas/Components/DocumentosGeneradosPanel.razor.rz.scp.css */
/*
  Documentos generados (Documentos Generados TALVEG.dc.html).

  Sigue siendo una <table>: la fila no se despliega, así que la semántica de
  tabla es la correcta y un lector de pantalla puede recorrerla por celdas. Del
  mockup se traslada el marco: una tarjeta con desplazamiento horizontal
  propio, para que en una ventana estrecha se desplace la lista y no la página.
*/
/* La barra de filtros compartida tiene ancho máximo y no envuelve: el resumen
   va a su lado, dentro de un contenedor propio que sí envuelve. */
.filtros-generados[b-prcx9cortv] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: var(--space-4);
}

.resumen-generados[b-prcx9cortv] {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.marco-lista-generados[b-prcx9cortv] {
    overflow-x: auto;
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

/* El borde y el radio los pone el marco: la tabla dentro no los repite. */
.marco-lista-generados .tabla-datos[b-prcx9cortv] {
    min-width: 940px;
    border: 0;
    border-radius: 0;
}

/* Densidad del mockup: cabecera de 40 px y filas de 52 px. */
.marco-lista-generados .tabla-datos th[b-prcx9cortv] {
    padding: var(--space-3) var(--space-5);
}

.marco-lista-generados .tabla-datos td[b-prcx9cortv] {
    padding: var(--space-2) var(--space-5);
}

.nombre-generado[b-prcx9cortv] {
    font-weight: 600;
}

.dato-generado[b-prcx9cortv] {
    color: var(--color-text-muted);
}

.acciones-generado[b-prcx9cortv] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font: var(--font-label-md);
}

.separador-acciones-generado[b-prcx9cortv] {
    color: var(--color-border-strong);
}

/* Aviso en línea bajo la lista: qué significa «Generado con avisos». */
.aviso-generados-con-avisos[b-prcx9cortv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-lg);
    color: var(--color-warning-700);
    font: var(--font-body-md);
    max-width: 100%;
}

.aviso-generados-con-avisos > span[b-prcx9cortv] {
    max-width: 90ch;
}

.aviso-generados-con-avisos[b-prcx9cortv]  .icono {
    flex: none;
}

/* Rótulo de la columna de acciones: lo leen los lectores de pantalla y no
   ocupa sitio. No se reutiliza .solo-lectores de TiposDocumento: es CSS
   aislado de aquel componente y el trinquete prohíbe usarlo desde otro. */
.encabezado-acciones-generados[b-prcx9cortv] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/Plantillas/Pages/ConfigurarPlantilla.razor.rz.scp.css */
.editor-plantilla-alta[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 520px;
}

/* Editor Plantilla TALVEG.dc.html: lienzo a la izquierda, columna de 380px a
   la derecha, 24px entre ambos. En pantallas angostas la columna baja. */
.editor-plantilla-layout[b-spjvhegj8b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1024px) {
    .editor-plantilla-layout[b-spjvhegj8b] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.editor-plantilla-marco-lienzo[b-spjvhegj8b] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.editor-plantilla-lienzo-cabecera[b-spjvhegj8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.editor-plantilla-lienzo-paginas[b-spjvhegj8b] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.editor-plantilla-lienzo-pista[b-spjvhegj8b] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* 1 punto PDF = 1 píxel CSS a propósito (ver editorPlantilla.js) — el
   scroll nativo sustituye a cualquier cálculo de escala responsive. */
.editor-plantilla-lienzo[b-spjvhegj8b] {
    max-height: 80vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
}

.editor-plantilla-pagina[b-spjvhegj8b] {
    position: relative;
    flex-shrink: 0;
    background-color: var(--color-neutral-0, #fff);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-overlay);
}

/* El mockup pinta las cajas con fondo de superficie opaco porque su página es
   un marcador vacío. Sobre el PDF real un fondo opaco taparía el texto que la
   caja tiene que rellenar: se conserva translúcido.

   Los colores son de PAPEL (--color-papel-caja-*, tokens.css), no de superficie:
   la página del PDF es blanca en los dos temas y, con --color-surface al 55 % y
   --color-text-muted, en oscuro la etiqueta quedaba ~1,1:1 sobre un gris medio. */
.editor-plantilla-caja[b-spjvhegj8b] {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed var(--color-papel-caja-borde);
    border-radius: var(--radius-sm);
    background: var(--color-papel-caja-fondo);
    color: var(--color-papel-caja-texto);
    cursor: move;
    touch-action: none;
    display: flex;
    gap: var(--space-1);
    /* Alineado arriba, no centrado: el PDF final ancla el texto al borde
       superior de la caja (XStringFormats.TopLeft en RellenadorPlantillaPdfService),
       así que el editor debe mostrar lo mismo que se va a estampar. */
    align-items: flex-start;
    overflow: hidden;
}

.editor-plantilla-caja:hover[b-spjvhegj8b] {
    border-color: var(--color-papel-caja-realce);
}

.editor-plantilla-caja:focus-visible[b-spjvhegj8b] {
    outline: 2px solid var(--color-papel-caja-realce);
    outline-offset: 2px;
}

.editor-plantilla-caja-firma[b-spjvhegj8b] {
    background: var(--color-papel-caja-firma-fondo);
}

.editor-plantilla-caja-seleccionada[b-spjvhegj8b] {
    border: 2px solid var(--color-papel-caja-realce);
    background: var(--color-papel-caja-seleccionada-fondo);
    color: var(--color-papel-caja-seleccionada-texto);
}

.editor-plantilla-caja-etiqueta[b-spjvhegj8b] {
    flex: 1;
    min-width: 0;
    pointer-events: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-plantilla-caja-obligatorio[b-spjvhegj8b] {
    flex: none;
    pointer-events: none;
    padding: 2px 4px 0 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-papel-caja-obligatorio);
}

/* 10px y no los 7px del mockup: es el área que se agarra para redimensionar. */
.editor-plantilla-handle[b-spjvhegj8b] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-papel-caja-realce);
    cursor: nwse-resize;
    touch-action: none;
}

.editor-plantilla-columna[b-spjvhegj8b] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-4);
}

.editor-plantilla-panel[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.editor-plantilla-panel-campo[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.editor-plantilla-grupo-campo[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.editor-plantilla-aviso-campo[b-spjvhegj8b] {
    margin: 0;
    font: var(--font-caption);
    color: var(--color-danger-700);
}

.editor-plantilla-ayuda-campo[b-spjvhegj8b] {
    margin: 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.editor-plantilla-casilla[b-spjvhegj8b] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
    font: var(--font-body-md);
}

.editor-plantilla-casilla input[b-spjvhegj8b] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--color-primary-500);
}

.editor-plantilla-sin-seleccion[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.editor-plantilla-sin-seleccion p[b-spjvhegj8b] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.editor-plantilla-sin-seleccion-icono[b-spjvhegj8b] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
}

.editor-plantilla-acciones[b-spjvhegj8b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    border-top: var(--border-default);
    padding-top: var(--space-4);
}

.editor-plantilla-modo-generacion[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.editor-plantilla-texto-atenuado[b-spjvhegj8b] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.editor-plantilla-lista-trabajadores[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
    border: var(--border-default);
    border-radius: var(--radius-md);
}

.editor-plantilla-seccion[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: var(--border-default);
    padding-top: var(--space-4);
}

.editor-plantilla-enlace-resultado[b-spjvhegj8b] {
    font: var(--font-label);
}

/* DEC-5 (2026-09-02) y DEC-32: los avisos de la generación se quedan en
   pantalla junto al enlace al PDF — el toast se va solo y el aviso tiene que
   poder leerse después de generar. */
.editor-plantilla-avisos[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

.editor-plantilla-avisos p[b-spjvhegj8b] {
    margin: 0;
    text-wrap: pretty;
}

.editor-plantilla-progreso-lote[b-spjvhegj8b] {
    gap: var(--space-2);
}

.editor-plantilla-progreso-lote p[b-spjvhegj8b] {
    margin: 0;
}

.editor-plantilla-progreso-item[b-spjvhegj8b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    border-top: var(--border-default);
}

.editor-plantilla-ficha[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.editor-plantilla-ficha-fila[b-spjvhegj8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
}

.editor-plantilla-ficha-fila + .editor-plantilla-ficha-fila[b-spjvhegj8b] {
    border-top: var(--border-default);
}

.editor-plantilla-ficha-fila dt[b-spjvhegj8b] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.editor-plantilla-ficha-fila dd[b-spjvhegj8b] {
    margin: 0;
    font: var(--font-body-md);
    text-align: right;
    min-width: 0;
}
/* /Features/Plataforma/Pages/Plataforma.razor.rz.scp.css */
.administracion-global[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 1180px;
}

.enlace-volver-configuracion[b-didwshwgte] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label);
}

.administracion-global-cabecera[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.administracion-global-ceja[b-didwshwgte] {
    color: var(--color-text-muted);
    font: var(--font-caption);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.administracion-global-cabecera .titulo-pagina[b-didwshwgte],
.administracion-global-contexto h2[b-didwshwgte],
.administracion-global-seccion > h2[b-didwshwgte],
.administracion-global-tarjeta h3[b-didwshwgte] {
    margin: 0;
}

.administracion-global-contexto[b-didwshwgte],
.administracion-global-tarjeta[b-didwshwgte],
.administracion-global-sesion[b-didwshwgte],
.administracion-global-registro[b-didwshwgte],
.administracion-global-error[b-didwshwgte] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.administracion-global-contexto[b-didwshwgte] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    border-left: 3px solid var(--color-info-500);
    background: var(--color-info-50);
}

.administracion-global-contexto p[b-didwshwgte],
.administracion-global-tarjeta p[b-didwshwgte] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    max-width: 80ch;
}

.administracion-global-contexto-icono[b-didwshwgte] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-info-500);
}

.administracion-global-etiquetas[b-didwshwgte],
.administracion-global-acciones[b-didwshwgte] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.administracion-global-etiquetas span[b-didwshwgte] {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    background: var(--color-surface);
    color: var(--color-info-500);
    font: var(--font-caption);
}

.administracion-global-seccion[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.administracion-global-seccion > h2[b-didwshwgte] {
    font: var(--font-h3);
}

.administracion-global-tarjeta[b-didwshwgte],
.administracion-global-sesion[b-didwshwgte] {
    padding: var(--space-5);
}

.administracion-global-tarjeta-cuerpo[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.administracion-global-consecuencias[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    margin: var(--space-3) 0 0;
    list-style: none;
}

.administracion-global-consecuencias li[b-didwshwgte],
.administracion-global-advertencia[b-didwshwgte],
.administracion-global-exito[b-didwshwgte],
.administracion-global-estado-consumido[b-didwshwgte] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.administracion-global-consecuencias[b-didwshwgte]  .icono {
    color: var(--color-info-500);
}

.administracion-global-advertencia[b-didwshwgte] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    color: var(--color-warning-700) !important;
}

.administracion-global-acciones[b-didwshwgte] {
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.administracion-global-acciones span[b-didwshwgte] {
    color: var(--color-text-muted);
    font: var(--font-caption);
}

.administracion-global-error[b-didwshwgte] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: var(--color-danger-500);
}

.administracion-global-error[b-didwshwgte] >  .icono {
    color: var(--color-danger-700);
}

.administracion-global-error div[b-didwshwgte] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.administracion-global-error span[b-didwshwgte] {
    color: var(--color-text-muted);
}

.administracion-global-error-comando[b-didwshwgte] {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-danger-500);
    border-radius: var(--radius-md);
    background: var(--color-danger-50);
    color: var(--color-danger-700) !important;
}

.administracion-global-sesion[b-didwshwgte] {
    border-left: 3px solid var(--color-info-500);
}

.administracion-global-sesion > p[b-didwshwgte] {
    margin-top: 0;
    max-width: 80ch;
}

.administracion-global-detalle-sesion[b-didwshwgte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
    margin: var(--space-4) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.administracion-global-detalle-sesion div[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.administracion-global-detalle-sesion dt[b-didwshwgte] {
    color: var(--color-text-muted);
    font: var(--font-caption);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.administracion-global-detalle-sesion dd[b-didwshwgte] {
    margin: 0;
}

.administracion-global-exito[b-didwshwgte] {
    align-items: center;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-success-500);
    border-radius: var(--radius-lg);
    background: var(--color-success-50);
    color: var(--color-success-700);
    font: var(--font-body-lg);
    font-weight: 600;
}

.administracion-global-registro[b-didwshwgte] {
    overflow: hidden;
}

.administracion-global-registro div[b-didwshwgte] {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.administracion-global-registro div:first-child[b-didwshwgte] {
    border-top: 0;
}

.administracion-global-registro strong[b-didwshwgte] {
    color: var(--color-text-muted);
    font: var(--font-label);
}

.administracion-global-enlace-auditoria[b-didwshwgte] {
    align-self: flex-start;
    font: var(--font-label);
}

.administracion-global-enlaces[b-didwshwgte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.administracion-global-enlaces a[b-didwshwgte] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
}

.administracion-global-enlaces a:hover[b-didwshwgte] {
    border-color: var(--color-primary-500);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.administracion-global-enlaces > a[b-didwshwgte] >  .icono {
    color: var(--color-info-500);
}

.administracion-global-enlaces span[b-didwshwgte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.administracion-global-enlaces small[b-didwshwgte] {
    color: var(--color-text-muted);
    font: var(--font-caption);
}

.administracion-global-confirmacion[b-didwshwgte] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    cursor: pointer;
}

.administracion-global-confirmacion input[b-didwshwgte] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--color-primary-500);
}

@media (max-width: 768px) {
    .administracion-global-enlaces[b-didwshwgte],
    .administracion-global-detalle-sesion[b-didwshwgte] {
        grid-template-columns: 1fr;
    }

    .administracion-global-registro div[b-didwshwgte] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Features/Proyectos/Pages/ProyectoDetalle.razor.rz.scp.css */
/*
    Proyecto 360 — lo propio de esta página. La maquetación compartida de las
    páginas 360 (cabecera, cuerpo con lateral, tarjetas, filas de relación) vive
    en Components/DesignSystem; aquí solo lo que no tiene primitiva.
*/

.proyecto360-acciones[b-3al8gegaz6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.proyecto360-meta[b-3al8gegaz6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.proyecto360-enlace[b-3al8gegaz6] {
    font-weight: 600;
    color: var(--color-primary-500);
    text-decoration: none;
    white-space: nowrap;
}

.proyecto360-enlace:hover[b-3al8gegaz6] {
    color: var(--color-primary-600);
}

.proyecto360-enlace:focus-visible[b-3al8gegaz6] {
    outline: var(--border-focus);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

/* Grupo «De baja · N» bajo los técnicos activos. */
.proyecto360-grupo[b-3al8gegaz6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) 0 var(--space-1);
    font: var(--font-label-md);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Plazo: aparte del cumplimiento, en azul sobre la pista del anillo. */
.proyecto360-plazo-barra[b-3al8gegaz6] {
    display: block;
    height: calc(var(--space-3) / 2);
    margin: var(--space-2) 0 calc(var(--space-3) / 2);
    border-radius: var(--radius-full);
    background: var(--color-anillo-pista);
    overflow: hidden;
}

.proyecto360-plazo-avance[b-3al8gegaz6] {
    display: block;
    height: 100%;
    background: var(--color-primary-500);
}

.proyecto360-plazo-titulo[b-3al8gegaz6] {
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
}

.proyecto360-plazo-detalle[b-3al8gegaz6] {
    margin: calc(var(--space-1) / 2) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.proyecto360-nota[b-3al8gegaz6] {
    margin: var(--space-2) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Proyectos/Pages/Proyectos.razor.rz.scp.css */
/* El desplazamiento horizontal solo hace falta en pantallas estrechas. En las anchas el
   contenedor no recorta: `overflow-x: auto` obliga también a recortar en vertical, y la
   ventana de contexto del recuento de técnicos (que se abre hacia abajo) quedaba cortada
   en una lista de pocas filas. */
@media (max-width: 767px) {
    .contenedor-tabla-proyectos[b-xdresx1702] {
        overflow-x: auto;
    }
}

.acciones-seccion[b-xdresx1702] {
    margin: var(--space-4) 0 var(--space-2);
}

/* Tabla de proyectos. La última celda lleva el icono 360 y, en el proyecto cerrado y para quien
   puede escribir, la acción rápida «Reabrir»: el ancho es el de las dos piezas, para que el icono
   caiga en el mismo sitio en todas las filas. */
.tabla-proyectos .col-acciones[b-xdresx1702] {
    width: 148px;
    text-align: right;
    white-space: nowrap;
}

.proyectos-acciones-fila[b-xdresx1702] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Retraso de un proyecto abierto, bajo sus fechas. El texto es el de la ficha 360, que lo escribe
   tras un «·» y por eso empieza en minúscula: aquí abre línea. */
.proyecto-fin-superado[b-xdresx1702] {
    display: block;
    margin-top: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.proyecto-fin-superado[b-xdresx1702]::first-letter {
    text-transform: uppercase;
}

/* 132 px es el hueco del cumplimiento en los demás listados; el rótulo no parte en dos líneas. */
.tabla-proyectos .col-plazo-transcurrido[b-xdresx1702] {
    width: 132px;
    white-space: nowrap;
}

.nombre-proyecto[b-xdresx1702] {
    font-weight: 600;
    color: var(--color-text);
}

.celda-fecha-proyecto[b-xdresx1702] {
    font-variant-numeric: tabular-nums;
}

/* «inicio → fin» va en una línea donde la tabla tiene ancho para ello; por debajo, parte tras la flecha
   para no estrechar la columna del nombre. */
@media (min-width: 1400px) {
    .celda-fecha-proyecto .proyecto-plazo[b-xdresx1702] {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

.fin-indefinido[b-xdresx1702] {
    color: var(--color-text-muted);
}

.fila-seleccionada td[b-xdresx1702] {
    background-color: var(--color-primary-50);
}

.texto-solo-lectores[b-xdresx1702] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
    Panel lateral de detalle. Mismo apilamiento que los PreviewDrawer de
    Clientes/Empresas (ClientePreviewDrawer.razor.css):
    sin scrim —role="complementary", la lista sigue usable detrás— y 400px de
    ancho según el mockup. Las reglas se repiten aquí porque el CSS aislado no
    viaja entre componentes.
*/
.panel-proyecto[b-xdresx1702] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: panel-proyecto-entrar-b-xdresx1702 var(--motion-transition) var(--ease-fluid);
}

@keyframes panel-proyecto-entrar-b-xdresx1702 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-proyecto[b-xdresx1702] {
        animation: none;
    }
}

@media (max-width: 767px) {
    .panel-proyecto[b-xdresx1702] {
        max-width: 100%;
    }
}

.cabecera-panel-proyecto[b-xdresx1702] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

/* El texto ocupa lo que dejan el lápiz, el icono 360 y la X, que quedan juntos a la derecha. */
.texto-cabecera-panel-proyecto[b-xdresx1702] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.etiqueta-cabecera-panel-proyecto[b-xdresx1702] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-cabecera-panel-proyecto[b-xdresx1702] {
    font: var(--font-heading-md);
}

.meta-cabecera-panel-proyecto[b-xdresx1702] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.cerrar-panel-proyecto[b-xdresx1702] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    flex-shrink: 0;
}

.cerrar-panel-proyecto:hover[b-xdresx1702] {
    color: var(--color-text);
}

.cerrar-panel-proyecto:focus-visible[b-xdresx1702] {
    outline: var(--border-focus);
}

.cuerpo-panel-proyecto[b-xdresx1702] {
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.rejilla-info-proyecto[b-xdresx1702] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.notas-proyecto[b-xdresx1702] {
    margin-top: var(--space-4);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.titulo-notas-proyecto[b-xdresx1702] {
    font: var(--font-label-md);
}

.texto-notas-proyecto[b-xdresx1702] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.lista-tecnicos-proyecto[b-xdresx1702] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.fila-tecnico-proyecto[b-xdresx1702] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
}

.fila-tecnico-proyecto + .fila-tecnico-proyecto[b-xdresx1702] {
    border-top: var(--border-default);
}

.datos-tecnico-proyecto[b-xdresx1702] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.nombre-tecnico-proyecto[b-xdresx1702] {
    font: var(--font-body-md);
    font-weight: 600;
}

.meta-tecnico-proyecto[b-xdresx1702] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* Dar de baja no borra la asignación (rellena FechaBaja), pero la quita de los
   técnicos activos: tono destructivo, -700 por contraste (ver .aviso-error). */
.baja-tecnico-proyecto[b-xdresx1702] {
    border: 0;
    background: none;
    padding: 0;
    font: var(--font-label-md);
    color: var(--color-danger-700);
    cursor: pointer;
}

.baja-tecnico-proyecto:focus-visible[b-xdresx1702] {
    outline: var(--border-focus);
}

.enlace-documentos-proyecto[b-xdresx1702] {
    font: var(--font-label-md);
}

.pie-panel-proyecto[b-xdresx1702] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

/* Formularios del panel (edición, alta de técnico): una columna, el panel mide 400px. */
.rejilla-formulario[b-xdresx1702] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.acciones-formulario[b-xdresx1702] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

@media (max-width: 640px) {
    /* Guardar/Cancelar a todo el ancho y apilados (Guardar arriba, ya es el
       primero en el marcado) — más fácil de alcanzar con el pulgar que dos
       botones lado a lado. */
    .acciones-formulario[b-xdresx1702] {
        flex-direction: column;
    }

    .acciones-formulario .boton[b-xdresx1702] {
        width: 100%;
    }
}

/* --color-peligro y --color-peligro-hover mapean a danger-500 y danger-700,
   pero como FOREGROUND el -500 incumple el 4.5:1 (3.76:1 sobre Surface), asi
   que el texto de error sube a -700. */
.aviso-error[b-xdresx1702] {
    color: var(--color-danger-700);
    font: var(--font-body-md);
    margin-bottom: var(--space-4);
}

.proyecto-nombre-centro[b-xdresx1702] { display: flex; flex-direction: column; gap: var(--space-1); }
.proyecto-centro[b-xdresx1702] { font: var(--font-caption); color: var(--color-text-muted); }
.proyecto-plazo[b-xdresx1702] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Recuento de técnicos: el cero no abre nada y se lee como dato de apoyo. */
.celda-sin-recuento[b-xdresx1702] {
    color: var(--color-text-muted);
}
/* /Features/Reportes/Pages/Reportes.razor.rz.scp.css */
.rejilla-reportes[b-c4xfr06n1d] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 1150px) {
    .rejilla-reportes[b-c4xfr06n1d] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.columna-reportes-filtros[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tarjeta-biblioteca[b-c4xfr06n1d] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.titulo-biblioteca[b-c4xfr06n1d] {
    font: var(--font-label);
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lista-informes[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
}

.item-informe:hover[b-c4xfr06n1d] {
    border-color: var(--color-primary-500);
}

.item-informe-seleccionado[b-c4xfr06n1d] {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.radio-informe[b-c4xfr06n1d] {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-control);
    background-color: var(--color-surface);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-informe-seleccionado .radio-informe[b-c4xfr06n1d] {
    border: 2px solid var(--color-primary-500);
}

.punto-radio-informe[b-c4xfr06n1d] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-500);
}

.texto-item-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.titulo-item-informe[b-c4xfr06n1d] {
    font: var(--font-body-md);
    font-weight: 600;
}

.descripcion-item-informe[b-c4xfr06n1d] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.filtros-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.campo-cliente-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.quitar-filtro-cliente[b-c4xfr06n1d] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-text-muted);
    font: var(--font-caption);
    cursor: pointer;
}

.quitar-filtro-cliente:hover[b-c4xfr06n1d] {
    color: var(--color-text);
}

.opcion-checkbox-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.opcion-checkbox-informe input[b-c4xfr06n1d] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--color-primary-500);
}

.texto-opcion-checkbox-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font: var(--font-body-md);
}

.detalle-opcion-checkbox-informe[b-c4xfr06n1d] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.acciones-exportar-informe[b-c4xfr06n1d] {
    display: flex;
    gap: var(--space-2);
}

.boton-exportar-informe[b-c4xfr06n1d] {
    flex: 1;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-primary-500);
    font: var(--font-label);
    font-size: 14px;
    text-decoration: none;
}

a.boton-exportar-informe:hover[b-c4xfr06n1d] {
    border-color: var(--color-primary-500);
    background-color: var(--color-surface-hover);
}

.boton-exportar-informe-deshabilitado[b-c4xfr06n1d] {
    opacity: .5;
    cursor: not-allowed;
}

.pista-descarga-informe[b-c4xfr06n1d] {
    margin: 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.enlace-secundario-informe[b-c4xfr06n1d] {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font: var(--font-label);
    cursor: pointer;
}

.enlace-secundario-informe:hover:not(:disabled)[b-c4xfr06n1d] {
    color: var(--color-primary-600);
}

.enlace-secundario-informe:disabled[b-c4xfr06n1d] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.tarjeta-historial-informes[b-c4xfr06n1d] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabecera-historial-informes[b-c4xfr06n1d] {
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-hover);
    border-bottom: 1px solid var(--color-border);
    font: var(--font-label);
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vacio-historial-informes[b-c4xfr06n1d],
.aviso-historial-informes[b-c4xfr06n1d] {
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0;
}

.aviso-historial-informes[b-c4xfr06n1d] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-warning-700);
    background-color: var(--color-warning-50);
}

.error-historial-informes[b-c4xfr06n1d] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.item-historial-informes[b-c4xfr06n1d] {
    padding: 10px var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-historial-informes:last-child[b-c4xfr06n1d] {
    border-bottom: none;
}

.fila-item-historial-informes[b-c4xfr06n1d] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.nombre-item-historial-informes[b-c4xfr06n1d] {
    font: var(--font-body-md);
    font-weight: 600;
}

.fecha-item-historial-informes[b-c4xfr06n1d] {
    margin-left: auto;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.detalle-item-historial-informes[b-c4xfr06n1d] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.columna-reportes-vista[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* D-25: la tabla del informe ocupa todo el ancho de la hoja y el nombre del
   trabajador no se parte en tres líneas dentro de una columna de 90 px. */
.tabla-hoja-informe[b-c4xfr06n1d] {
    width: 100%;
}

.tabla-hoja-informe th:first-child[b-c4xfr06n1d],
.tabla-hoja-informe td:first-child[b-c4xfr06n1d] {
    min-width: 9rem;
}

.tabla-hoja-informe td:last-child[b-c4xfr06n1d] {
    white-space: nowrap;
}

/* La región de estado del progreso vive siempre en el DOM (ver Reportes.razor):
   vacía, su margen negativo anula el hueco de la columna que si no dejaría. La
   clase la pone la página según _generando: un :has(.progreso-carga) apuntaría
   a un elemento de otro componente, fuera del alcance de este CSS aislado. */
.region-progreso-informe-vacia[b-c4xfr06n1d] {
    margin-bottom: calc(-1 * var(--space-4));
}

.aviso-sin-cliente-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-warning-700);
    font: var(--font-body-md);
    font-weight: 600;
    text-wrap: pretty;
}

/* La vista previa del mockup: una hoja sobre una mesa atenuada. */
.mesa-vista-previa-informe[b-c4xfr06n1d] {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.hoja-informe[b-c4xfr06n1d] {
    width: 100%;
    max-width: 680px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 2px;
    padding: var(--space-12) 56px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .hoja-informe[b-c4xfr06n1d] {
        padding: var(--space-6) var(--space-4);
    }
}

.cabecera-hoja-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 2px solid var(--color-text);
    padding-bottom: var(--space-4);
}

.titulo-hoja-informe[b-c4xfr06n1d] {
    margin: 0 0 var(--space-1);
    font: var(--font-h3);
}

.metadato-hoja-informe[b-c4xfr06n1d] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.vacio-hoja-informe[b-c4xfr06n1d] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.tabla-vista-previa-envoltorio[b-c4xfr06n1d] {
    overflow-x: auto;
}

.celda-trabajador-informe[b-c4xfr06n1d] {
    font-weight: 600;
}

.celda-vence-informe[b-c4xfr06n1d] {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.nota-vista-previa-informe[b-c4xfr06n1d] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}
/* /Features/Retencion/Pages/Retencion.razor.rz.scp.css */
/* Tira «la máquina propone → la persona dispone»: resume en una línea el
   reparto que la entradilla explica, para que se lea antes que la tabla. */
.flujo-retencion[b-jobsqkck1w] {
    display: flex;
    align-items: stretch;
    max-width: 53.75rem;
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.flujo-retencion-paso[b-jobsqkck1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    font: var(--font-body-md);
    color: var(--color-text);
}

.flujo-retencion-maquina[b-jobsqkck1w] {
    flex: 1;
    background: var(--color-surface-subtle);
}

.flujo-retencion-persona[b-jobsqkck1w] {
    flex: 2;
}

.flujo-retencion-flecha[b-jobsqkck1w] {
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
    background: var(--color-surface-subtle);
    color: var(--color-border-strong);
}

.flujo-retencion-rotulo[b-jobsqkck1w] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Sin política activa: el porqué del botón deshabilitado y, dentro, el
   diagnóstico que la pantalla antes mencionaba sin ofrecer. */
.aviso-politica-retencion[b-jobsqkck1w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 53.75rem;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-md);
}

.aviso-politica-retencion-cabecera[b-jobsqkck1w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.aviso-politica-retencion-titulo[b-jobsqkck1w] {
    font: var(--font-label);
    color: var(--color-warning-700);
}

.aviso-politica-retencion-texto[b-jobsqkck1w] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text);
}

.diagnostico-retencion[b-jobsqkck1w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.diagnostico-retencion-cabecera[b-jobsqkck1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.diagnostico-retencion-titulo[b-jobsqkck1w] {
    font: var(--font-label);
}

.diagnostico-retencion-cifras[b-jobsqkck1w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.diagnostico-retencion-cifra[b-jobsqkck1w] {
    display: flex;
    flex-direction: column;
}

.diagnostico-retencion-valor[b-jobsqkck1w] {
    font: var(--font-heading-sm);
    font-variant-numeric: tabular-nums;
}

.diagnostico-retencion-total[b-jobsqkck1w] {
    color: var(--color-warning-700);
}

.diagnostico-retencion-rotulo[b-jobsqkck1w],
.diagnostico-retencion-nota[b-jobsqkck1w] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.diagnostico-retencion-nota[b-jobsqkck1w] {
    margin: 0;
}

/* Tabla de propuestas. */
.purga-tipo[b-jobsqkck1w] {
    font-weight: 600;
}

.purga-numero[b-jobsqkck1w] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.purga-fecha[b-jobsqkck1w] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.purga-acciones[b-jobsqkck1w] {
    text-align: right;
}

.acciones-purga[b-jobsqkck1w] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* Lo ya ejecutado o descartado se conserva como registro, pero no compite
   visualmente con lo que sigue pendiente de decidir. */
.fila-resuelta[b-jobsqkck1w] {
    opacity: .55;
}

.fila-resuelta td[b-jobsqkck1w] {
    background: var(--color-surface-subtle);
}

.sin-acciones[b-jobsqkck1w] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.aviso-purga[b-jobsqkck1w] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}
/* /Features/Subcontratas/Components/SubcontrataWorkspacePanel.razor.rz.scp.css */
/*
    Subcontrata 360 contra «Subcontrata 360 TALVEG.dc.html». El aside de
    520 px, su cabecera de navegación (volver, copiar enlace, cerrar) y el
    apilado los pone ContextWorkspace.razor, común a los siete paneles; aquí
    solo va lo propio de esta ficha. Todo con tokens declarados en tokens.css.
*/

.cabecera-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.icono-subcontrata-360[b-s18v638ezc] {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    color: var(--color-primary-500);
}

.texto-cabecera-subcontrata-360[b-s18v638ezc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kicker-subcontrata-360[b-s18v638ezc] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.titulo-subcontrata-360[b-s18v638ezc] {
    font: var(--font-heading-md);
    text-wrap: pretty;
}

.meta-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 2px;
}

.recuentos-subcontrata-360[b-s18v638ezc],
.resumen-subcontrata-360[b-s18v638ezc] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.resumen-subcontrata-360[b-s18v638ezc] {
    margin: 0 0 var(--space-2);
}

.acciones-subcontrata-360 .resumen-subcontrata-360[b-s18v638ezc] {
    margin: 0;
}

/* Rejilla de Información: la isla interna del mockup, dos columnas. */
.rejilla-info-subcontrata-360[b-s18v638ezc],
.rejilla-acceso-subcontrata-360[b-s18v638ezc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.rejilla-info-subcontrata-360[b-s18v638ezc] {
    background-color: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.celda-info-subcontrata-360[b-s18v638ezc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.celda-info-subcontrata-360-ancha[b-s18v638ezc] {
    grid-column: 1 / -1;
}

.celda-info-subcontrata-360 > span[b-s18v638ezc] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.celda-info-subcontrata-360 strong[b-s18v638ezc] {
    font: var(--font-body-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.valor-con-copia-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.contrasena-subcontrata-360[b-s18v638ezc] {
    letter-spacing: .18em;
}

.tarjeta-acceso-subcontrata-360[b-s18v638ezc] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.cabecera-tarjeta-acceso-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    background-color: var(--color-surface-hover);
    border-bottom: var(--border-default);
}

.titulo-tarjeta-acceso-subcontrata-360[b-s18v638ezc] {
    font: var(--font-label);
}

.cuerpo-tarjeta-acceso-subcontrata-360[b-s18v638ezc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.cuerpo-tarjeta-acceso-subcontrata-360 p[b-s18v638ezc] {
    margin: 0;
}

.acciones-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.texto-supervision-subcontrata-360[b-s18v638ezc] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.centro-supervision-subcontrata-360[b-s18v638ezc] {
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-4) var(--space-2);
    margin-bottom: var(--space-3);
}

.lista-supervision-subcontrata-360[b-s18v638ezc] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.workspace-subtitulo-seccion[b-s18v638ezc] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.texto-secundario[b-s18v638ezc] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.fila-supervision[b-s18v638ezc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.fila-supervision:last-child[b-s18v638ezc] {
    border-bottom: none;
}

.fila-supervision-principal[b-s18v638ezc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fila-supervision-detalle[b-s18v638ezc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .rejilla-info-subcontrata-360[b-s18v638ezc],
    .rejilla-acceso-subcontrata-360[b-s18v638ezc] {
        grid-template-columns: 1fr;
    }
}

/* Pestaña «Documentación»: incidencias de sus trabajadores (las de «Vencidos» y «Próximos»
   de la fila del listado), que antes enseñaba la vista previa de la lista. */
.lista-incidencias-subcontrata-360[b-s18v638ezc] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.fila-incidencia-subcontrata-360[b-s18v638ezc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-1) var(--space-4);
}

.fila-incidencia-subcontrata-360 + .fila-incidencia-subcontrata-360[b-s18v638ezc] {
    border-top: var(--border-default);
}

.texto-incidencia-subcontrata-360[b-s18v638ezc] {
    flex: 1;
    min-width: 0;
    font: var(--font-body-md);
}
/* /Features/Subcontratas/Pages/SubcontrataDetalle.razor.rz.scp.css */
/*
    Subcontrata 360 — lo propio de esta página. Cabecera de identidad, banda,
    contadores de estado y filas en rejilla viven en Components/DesignSystem;
    aquí solo lo que no tiene primitiva.
*/

.subcontrata360-seccion[b-tvw8q3z94c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.subcontrata360-nota[b-tvw8q3z94c] {
    margin: var(--space-2) 0 0;
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* .linea del mockup: la explicación a la izquierda y la acción a la derecha. */
.subcontrata360-linea[b-tvw8q3z94c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.subcontrata360-linea > span:first-child[b-tvw8q3z94c] {
    flex: 1;
    min-width: 0;
}

/* .grupo del mockup: rótulo del Centro sobre sus tipos de documento. */
.subcontrata360-grupo[b-tvw8q3z94c] {
    list-style: none;
    padding: var(--space-3) 0 var(--space-1);
    font: var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.subcontrata360-grupo span[b-tvw8q3z94c] {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

/* .sub .fila del mockup: documento | pastilla en columna fija | acción. */
.subcontrata360-subfilas[b-tvw8q3z94c] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subcontrata360-subfila[b-tvw8q3z94c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 152px 160px;
    align-items: center;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-fila-divisor);
    font: var(--font-small);
    transition: background-color 120ms;
}

/* La subfila responde al cursor como la fila (FilaRelacion): el resaltado
   sobresale lo que mide su relleno lateral y el texto no se mueve. */
.subcontrata360-subfila:hover[b-tvw8q3z94c] {
    background-color: var(--color-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .subcontrata360-subfila[b-tvw8q3z94c] {
        transition: none;
    }
}

.subcontrata360-subfila:first-child[b-tvw8q3z94c] {
    border-top-color: transparent;
}

.subcontrata360-subfila-texto[b-tvw8q3z94c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.subcontrata360-subfila-detalle[b-tvw8q3z94c] {
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}

.subcontrata360-subfila-accion[b-tvw8q3z94c] {
    display: flex;
    justify-content: flex-end;
}

.subcontrata360-enlace[b-tvw8q3z94c] {
    font: var(--font-caption);
    color: var(--color-primary-600);
}

/* .copia del mockup: el propio valor es lo que se copia, sin botón al lado. El aspecto
   (seminegrita, 0 2px, sin subrayado) lo pone BotonCopiar EnLinea; aquí solo el corte de línea. */
.subcontrata360-copia[b-tvw8q3z94c]  .boton-copiar {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.subcontrata360-pastilla-tarjeta[b-tvw8q3z94c] {
    margin: 0 0 var(--space-2);
}

/* .mini del mockup: aviso de la tarjeta de credenciales con su acción a la derecha. */
.subcontrata360-aviso[b-tvw8q3z94c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    font: var(--font-caption);
    font-weight: 400;
    color: var(--color-text-muted);
}

.subcontrata360-aviso > :last-child[b-tvw8q3z94c] {
    margin-left: auto;
}

.subcontrata360-botones[b-tvw8q3z94c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Pantalla estrecha: la pastilla y la acción bajan bajo el nombre del documento. */
@media (max-width: 767px) {
    .subcontrata360-subfila[b-tvw8q3z94c] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .subcontrata360-subfila-texto[b-tvw8q3z94c] {
        grid-column: 1 / -1;
    }
}
/* /Features/Subcontratas/Pages/Subcontratas.razor.rz.scp.css */
/*
  Cabecera de columnas y rejilla de la lista de Subcontratas (Subcontratas
  TALVEG.dc.html). Mismo planteamiento que Empresas.razor.css, y en CSS
  aislado por la misma razón: .tarjeta-fila-acordeon-cabecera es compartida
  con Centros, y cambiarla a grid en list-page.css movería pantallas que este
  incremento no verifica.

  Sin QuickGrid: la fila se despliega en el acordeón de trabajadores, y
  QuickGrid no soporta filas expandibles.
*/

.rejilla-subcontratas[b-v2sukpgjqy] {
    /*
      chevron · subcontrata · nivel de servicio · cumplimiento · estado documental · icono 360.
      Todas las columnas menos la identidad tienen ancho fijo: la cabecera y las filas son rejillas
      distintas, y una columna «auto» mide lo que tenga dentro (0 px en la cabecera, 30 px del icono
      en la fila), con lo que la identidad cambiaba de ancho y las cabeceras quedaban 31 px a la
      derecha de sus celdas (medido el 2026-10-09). 264 px de estado: lo que ocupa el motivo más
      largo, «N vencidos · M por vencer · K sin confirmar».
    */
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 120px 132px 264px 44px;
    gap: var(--space-2);
    align-items: center;
}

/* Con selección múltiple entra una casilla delante y las columnas se corren. */
.rejilla-subcontratas-seleccion[b-v2sukpgjqy] {
    grid-template-columns: 24px 28px minmax(0, 1fr) 120px 132px 264px 44px;
}

/* La casilla mide lo mismo en todos los navegadores, para que su hueco de la cabecera coincida. */
.rejilla-subcontratas-seleccion > input[type="checkbox"][b-v2sukpgjqy] {
    width: 16px;
    height: 16px;
    margin: 0;
    justify-self: start;
}

.cabecera-columnas-subcontratas[b-v2sukpgjqy] {
    min-height: 40px;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-fila-divisor);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font: var(--font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

/* Identidad con razón social, CIF y trabajadores; recorta con elipsis: sin
   esto, una razón social larga estira su columna y desalinea la fila. */
.celda-identidad-subcontrata[b-v2sukpgjqy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.celda-identidad-subcontrata > *[b-v2sukpgjqy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.celda-identidad-subcontrata > .enlace-nombre-fila[b-v2sukpgjqy] {
    font-weight: 600;
}

/* La ventana de trabajadores debe poder salir de la caja de identidad. */
.celda-identidad-subcontrata > .meta-trabajadores-subcontrata[b-v2sukpgjqy] {
    overflow: visible;
}

/*
  El motivo de EstadoFila recorta lo que no cabe (una línea con puntos suspensivos). Aquí contiene las
  ventanas de contexto de las incidencias, cuyo panel sale de la caja: recortado no se vería.
*/
.celda-estado-subcontrata[b-v2sukpgjqy] {
    min-width: 0;
}

.celda-estado-subcontrata[b-v2sukpgjqy]  .estado-fila-motivo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    overflow: visible;
}

/* El color no es el único portador: el texto ya dice «vencidos» o «por vencer». */
.motivo-subcontrata[b-v2sukpgjqy] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.motivo-subcontrata-vencidos[b-v2sukpgjqy] {
    color: var(--color-danger-700);
}

.motivo-subcontrata-proximos[b-v2sukpgjqy] {
    color: var(--color-warning-700);
}

/* El desglose de cada cifra se abre hacia abajo, igual que en la zona de
   indicadores de Centros: hacia arriba lo recortaba la cabecera de
   columnas en la primera fila. ::deep porque el panel lo pinta VentanaContexto. */
.celda-estado-subcontrata[b-v2sukpgjqy]  .ventana-contexto-panel {
    bottom: auto;
    top: calc(100% + var(--space-1));
}

/* En pantallas estrechas el estado baja a una segunda línea, sangrado hasta el nombre. */
@media (max-width: 767px) {
    .rejilla-subcontratas[b-v2sukpgjqy],
    .rejilla-subcontratas-seleccion[b-v2sukpgjqy] {
        grid-template-columns: 28px minmax(0, 1fr) auto 48px 44px;
    }

    .rejilla-subcontratas-seleccion[b-v2sukpgjqy] {
        grid-template-columns: 24px 28px minmax(0, 1fr) auto 48px 44px;
    }

    .cabecera-columnas-subcontratas[b-v2sukpgjqy] {
        display: none;
    }

    .tarjeta-fila-acordeon-cabecera > .celda-estado-subcontrata[b-v2sukpgjqy] {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .rejilla-subcontratas-seleccion > .celda-estado-subcontrata[b-v2sukpgjqy] {
        grid-column: 3 / -1;
    }
}

.conteo-subcontratas[b-v2sukpgjqy] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* La fila cuya vista previa está abierta se marca, para no perder de vista
   a qué fila corresponde el panel de la derecha. */
.fila-en-vista-previa[b-v2sukpgjqy] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}
/* /Features/TiposDocumento/Pages/TiposDocumento.razor.rz.scp.css */
/* Tipos de documento, Gen 2 («Tipos Documento TALVEG.dc.html»). */

/* Barra de filtros en tarjeta y a todo lo ancho: la global .barra-filtros
   se limita a 480px, donde cuatro controles no caben. */
.barra-filtros-tipos[b-95jotm1ben] {
    max-width: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.barra-filtros-tipos[b-95jotm1ben]  .campo {
    flex: 1 1 11.25rem;
    min-width: 11.25rem;
}

.barra-filtros-tipos[b-95jotm1ben]  .campo:first-child {
    flex: 2 1 16.25rem;
    min-width: 16.25rem;
}

/* Tabla: diez columnas no caben en el panel de Configuración, así que el
   marco se desplaza en horizontal en vez de estrujar el nombre. */
.tabla-tipos-marco[b-95jotm1ben] {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tabla-tipos-marco[aria-busy="true"][b-95jotm1ben] {
    opacity: .6;
    transition: opacity .15s ease;
}

.tabla-tipos[b-95jotm1ben] {
    min-width: 93.75rem;
    table-layout: fixed;
    border: none;
    border-radius: 0;
}

.tabla-tipos th[b-95jotm1ben] {
    padding: var(--space-3);
    line-height: 1.2;
}

.tabla-tipos td[b-95jotm1ben] {
    padding: .625rem var(--space-3);
    vertical-align: top;
}

.col-orden[b-95jotm1ben] { width: 4rem; }
.col-ambito[b-95jotm1ben] { width: 6.5rem; }
.col-vigencia[b-95jotm1ben] { width: 5.75rem; }
.col-vencimiento[b-95jotm1ben] { width: 7rem; }
.col-exigencia[b-95jotm1ben] { width: 9.75rem; }
.col-lectura[b-95jotm1ben] { width: 7.75rem; }
.col-deteccion[b-95jotm1ben] { width: 8.25rem; }
.col-verificacion[b-95jotm1ben] { width: 7.75rem; }
.col-oficial[b-95jotm1ben] { width: 9rem; }
.col-acciones[b-95jotm1ben] { width: 4.75rem; }

.nombre-tipo[b-95jotm1ben] {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}

.alias-tipo[b-95jotm1ben] {
    display: block;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.celda-orden[b-95jotm1ben],
.celda-sin-valor[b-95jotm1ben] {
    color: var(--color-text-muted);
}

.celda-vigencia[b-95jotm1ben] {
    white-space: nowrap;
}

.celda-no-aplica[b-95jotm1ben] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    opacity: .7;
}

.celda-acciones[b-95jotm1ben] {
    text-align: right;
}

/* Interruptor: una casilla nativa con aspecto de interruptor (ver
   CeldaInterruptor en TiposDocumento.razor para el porqué). */
.celda-interruptor[b-95jotm1ben] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 1.5rem;
    cursor: pointer;
}

.interruptor-tipo[b-95jotm1ben] {
    appearance: none;
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    border-radius: var(--radius-full);
    background: var(--color-border-control);
    cursor: pointer;
    transition: background-color .15s ease;
}

.interruptor-tipo[b-95jotm1ben]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    transition: left .15s ease;
}

.interruptor-tipo:checked[b-95jotm1ben] {
    background: var(--color-primary-500);
}

.interruptor-tipo:checked[b-95jotm1ben]::before {
    left: 1.125rem;
}

.interruptor-tipo:disabled[b-95jotm1ben] {
    cursor: progress;
    opacity: .7;
}

.interruptor-tipo:focus-visible[b-95jotm1ben] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.aviso-cambio[b-95jotm1ben] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.aviso-cambio-guardado[b-95jotm1ben] {
    color: var(--color-success-700);
}

.aviso-cambio-fallido[b-95jotm1ben] {
    color: var(--color-danger-700);
}

.celda-oficial[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.select-oficial[b-95jotm1ben] {
    width: 100%;
    height: 2rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    font-size: .8125rem;
}

.select-oficial:disabled[b-95jotm1ben] {
    cursor: progress;
}

.solo-lectores[b-95jotm1ben] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Formulario (Drawer). */
.nivel-drawer[b-95jotm1ben] {
    margin: 0 0 var(--space-4);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.bloque-campo[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.etiqueta-campo[b-95jotm1ben] {
    font: var(--font-label);
    color: var(--color-text);
}

.etiqueta-pista[b-95jotm1ben],
.pista-campo[b-95jotm1ben] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.etiqueta-pista[b-95jotm1ben] {
    font-weight: 500;
}

.pista-campo[b-95jotm1ben] {
    margin: 0;
}

.pista-orden[b-95jotm1ben],
.pista-criterios[b-95jotm1ben] {
    margin: calc(var(--space-2) * -1) 0 var(--space-4);
}

.ambito-fijo-valor[b-95jotm1ben] {
    font: var(--font-body-md);
    color: var(--color-text);
}

.fila-alias[b-95jotm1ben] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.input-alias[b-95jotm1ben] {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
}

.bloque-vencimiento[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.sangria-vigencia[b-95jotm1ben] {
    max-width: 12rem;
    padding-left: 1.625rem;
}

.bloque-exigencia[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.bloque-exigencia legend[b-95jotm1ben] {
    padding: 0 6px;
    font: var(--font-label);
}

.vista-previa-exigencia[b-95jotm1ben] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.bloque-serie-contratacion[b-95jotm1ben] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.bloque-serie-contratacion .etiqueta-campo[b-95jotm1ben],
.bloque-serie-contratacion .pista-campo[b-95jotm1ben],
.bloque-serie-contratacion .campo-mensaje-error[b-95jotm1ben] {
    flex-basis: 100%;
    margin: 0;
}

.opcion-serie-contratacion[b-95jotm1ben] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-body-md);
    cursor: pointer;
}

.opcion-serie-contratacion input[b-95jotm1ben] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-primary-500);
}

.lista-centros[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
    max-height: 13.75rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.opcion-centro[b-95jotm1ben] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: .625rem var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font: var(--font-body-md);
    cursor: pointer;
}

.opcion-centro:last-child[b-95jotm1ben] {
    border-bottom: none;
}

.opcion-centro:hover[b-95jotm1ben] {
    background: var(--color-surface-hover);
}

.opcion-centro input[b-95jotm1ben] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 1px 0 0;
    accent-color: var(--color-primary-500);
}

.opcion-centro-texto[b-95jotm1ben] {
    display: flex;
    flex-direction: column;
}

.opcion-centro-contexto[b-95jotm1ben] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}
/* /Features/Trabajadores/Components/PanelDocumentacionBase.razor.rz.scp.css */
.panel-doc-base[b-dp1i8olkm0] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.panel-doc-base-cabecera[b-dp1i8olkm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.panel-doc-base-lista[b-dp1i8olkm0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.panel-doc-base-fila[b-dp1i8olkm0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-doc-base-fila > span:first-child[b-dp1i8olkm0] {
    flex: 1 1 auto;
}

.panel-doc-base-fecha[b-dp1i8olkm0] {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.panel-doc-base-aviso[b-dp1i8olkm0] {
    margin: 0.6rem 0 0;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    font-size: 0.85em;
}

.panel-doc-base-compacto-aviso[b-dp1i8olkm0] {
    color: var(--color-warning-700);
    font-size: 0.8em;
}

.panel-doc-base-nota[b-dp1i8olkm0] {
    margin: 0.6rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.panel-doc-base-compacto[b-dp1i8olkm0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.panel-doc-base-punto[b-dp1i8olkm0] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-neutral-400);
}

.panel-doc-base-punto-ok[b-dp1i8olkm0] { background: var(--color-success-500); }
.panel-doc-base-punto-aviso[b-dp1i8olkm0] { background: var(--color-warning-500); }
.panel-doc-base-punto-mal[b-dp1i8olkm0] { background: var(--color-danger-500); }
.panel-doc-base-fila.panel-doc-base-con-acciones[b-dp1i8olkm0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.panel-doc-base-con-acciones[b-dp1i8olkm0]  .accion-fila-enlace {
    grid-column: 4;
}
/* /Features/Trabajadores/Pages/TrabajadorDetalle.razor.rz.scp.css */
/*
  Trabajador 360 contra la maqueta de las páginas 360 (DDL-082).

  La cabecera es CabeceraIdentidad, la tarjeta de cabecera compartida con
  Centro 360 y Empresa 360. Aquí solo queda lo que ella no sabe: el alias
  junto al nombre.
*/
/* Línea de datos en dos filas, como la maqueta: «DNI · empleador» y debajo las pastillas (gap 6 px entre filas, 8 px entre pastillas). */
.trabajador360-datos[b-hgzr18fi57] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.trabajador360-meta[b-hgzr18fi57],
.trabajador360-indicadores[b-hgzr18fi57] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.trabajador360-meta[b-hgzr18fi57] {
    gap: 6px;
}

/* A 375 px la pastilla «N incidencias — Centro» no cabe en una línea: parte en dos en vez de salirse de la tarjeta. */
.trabajador360-indicadores[b-hgzr18fi57]  > * {
    max-width: 100%;
    min-width: 0;
}

.trabajador360-indicadores[b-hgzr18fi57]  .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.trabajador360-indicadores[b-hgzr18fi57] {
    gap: var(--space-2);
    margin-top: 2px;
}

.trabajador360-alias[b-hgzr18fi57] {
    font: var(--font-body-lg);
    color: var(--color-text-muted);
}

/*
  La agenda del empleador es el mismo componente que la pestaña del panel:
  en 300 px su encabezado (recuento y «Añadir contacto») tiene que poder
  partirse en dos líneas.
*/
.trabajador360-agenda[b-hgzr18fi57]  .agenda-encabezado {
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ------------------------------------------------------------------ */

.trabajador360-por-vencer[b-hgzr18fi57],
.trabajador360-documentos[b-hgzr18fi57],
.trabajador360-exigencias[b-hgzr18fi57] {
    margin-bottom: var(--space-4);
}

/* Contacto y agenda, en el lateral de 300 px                           */
/* ------------------------------------------------------------------ */

/* Una columna: el lateral no da para dos, y la tarjeta ya pone el marco. */
.trabajador360-contactos[b-hgzr18fi57] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.trabajador360-contacto-texto[b-hgzr18fi57] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.trabajador360-contacto[b-hgzr18fi57] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trabajador360-contacto-clave[b-hgzr18fi57] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.trabajador360-contacto-valor[b-hgzr18fi57] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/*
  Fila de Centro de la maqueta 17-10 (Trabajador 360, pestaña Centros): identidad (flex:1) · pastilla de gravedad · icono 360 de 30 px,
  sin las columnas fijas de cifra y acción de la rejilla de documentos. La fecha de alta y la baja van en la línea secundaria, que así
  ocupa el ancho de la fila. Las filas de documentos que se despliegan debajo conservan la rejilla de 104 · 152 · 128 px de la maqueta.
*/
.trabajador360-centros[b-hgzr18fi57]  .fila-relacion-rejilla {
    grid-template-columns: minmax(0, 1fr) auto 30px;
    column-gap: var(--space-2);
}

.trabajador360-centros[b-hgzr18fi57]  .fila-relacion-rejilla > .fila-relacion-cifra:empty {
    display: none;
}

.trabajador360-centros[b-hgzr18fi57]  .fila-relacion-desplegado .fila-relacion-rejilla {
    grid-template-columns: minmax(0, 1fr) 104px 152px 128px;
    column-gap: normal;
}

.trabajador360-centros[b-hgzr18fi57]  .fila-relacion-detalle {
    font-size: 13px;
}

.trabajador360-centro-alta[b-hgzr18fi57] {
    font: inherit;
    color: inherit;
}

.trabajador360-solo-lectores[b-hgzr18fi57] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Features/Trabajadores/Pages/Trabajadores.razor.rz.scp.css */
/*
  Lista de Trabajadores (Lista Trabajadores TALVEG.dc.html, export de Design 2026-10-18).

  Sin QuickGrid, con el mismo molde que Empresas: la fila se despliega para mostrar los documentos que piden
  trabajo y QuickGrid no soporta filas expandibles. La cabecera de columnas y cada fila son rejillas DISTINTAS
  que solo comparten esta definición, así que ninguna pista se resuelve por contenido (una celda vacía en la cabecera
  desalinearía los rótulos respecto a las celdas de la fila).

  Va en CSS aislado y no en list-page.css porque .tarjeta-fila-acordeon-cabecera es compartida con Empresas,
  Subcontratas y Centros: cambiarla allí movería varias pantallas en un incremento que solo ha verificado una.
*/
.rejilla-trabajadores[b-pi8t7dq67p] {
    /*
      chevron · Trabajador (nombre y DNI) · Empresa (1,6fr) · Registrados vigentes · Estado documental · acciones.
      La columna de estado mide 170 px como mínimo: es el ancho que necesita el motivo bajo la pastilla.
    */
    display: grid;
    grid-template-columns: 24px minmax(200px, 2fr) minmax(180px, 1.6fr) minmax(130px, 1fr) minmax(170px, 1.3fr) 40px;
    gap: var(--space-4);
    align-items: center;
}

/* Con selección múltiple entra una casilla delante y las columnas se corren. */
.rejilla-trabajadores-seleccion[b-pi8t7dq67p] {
    grid-template-columns: 28px 24px minmax(200px, 2fr) minmax(180px, 1.6fr) minmax(130px, 1fr) minmax(170px, 1.3fr) 40px;
}

/*
  Marco de la lista (mockup): una tarjeta con la cabecera de columnas en una banda blanca y las filas pegadas,
  separadas por una línea. Las reglas de .tarjeta-fila-acordeon* de list-page.css las comparten otras pantallas;
  aquí solo se anulan DENTRO del marco, con el atributo de ámbito de esta página.
*/
.marco-lista-trabajadores[b-pi8t7dq67p] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.cabecera-columnas-trabajadores[b-pi8t7dq67p] {
    align-items: end;
    padding: 14px var(--space-4) 10px;
    background: var(--color-surface);
    border-bottom: 1.5px solid var(--color-text);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font: 600 12px/16px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.marco-lista-trabajadores .lista-filas-acordeon[b-pi8t7dq67p] {
    gap: 0;
}

.marco-lista-trabajadores .tarjeta-fila-acordeon[b-pi8t7dq67p] {
    border: 0;
    border-bottom: 1px solid var(--color-fila-divisor);
    border-radius: 0;
}

.marco-lista-trabajadores .tarjeta-fila-acordeon:last-child[b-pi8t7dq67p] {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.marco-lista-trabajadores .tarjeta-fila-acordeon-cabecera[b-pi8t7dq67p] {
    min-height: 0;
    padding: 12px var(--space-4);
    transition: background-color .12s ease, box-shadow .12s ease;
    border-bottom: 0;
    border-radius: 0;
}

.marco-lista-trabajadores .tarjeta-fila-acordeon-cabecera:hover[b-pi8t7dq67p] {
    background-color: var(--color-primary-50);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.marco-lista-trabajadores .tarjeta-fila-acordeon-contenido[b-pi8t7dq67p] {
    border-top: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-surface-subtle) 60%, var(--color-surface));
    padding: 4px var(--space-4) 4px 56px;
}

/* Con la casilla delante, los documentos se sangran lo mismo que el nombre: 16 + 44 (casilla) + 40 (chevron). */
.marco-lista-trabajadores .tarjeta-fila-acordeon-contenido.contenido-con-seleccion[b-pi8t7dq67p] {
    padding-left: 100px;
}

/* Rótulos que ordenan: botones sin aspecto de botón, con el orden vigente como flecha. */
.col-title[b-pi8t7dq67p] { border: none; padding: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; }
.col-sort-asc .col-title[b-pi8t7dq67p] { color: var(--color-text); }
.col-sort-desc .col-title[b-pi8t7dq67p] { color: var(--color-text); }
.col-sort-asc .col-title[b-pi8t7dq67p]::after { content: " ↑"; }
.col-sort-desc .col-title[b-pi8t7dq67p]::after { content: " ↓"; }

.seleccion-trabajador[b-pi8t7dq67p] { display: flex; align-items: center; justify-content: center; }
.acciones-trabajador[b-pi8t7dq67p] { display: flex; justify-content: flex-end; }

/* Celda «Trabajador»: nombre (600) con su pastilla y debajo «DNI» y el documento, en pequeño. */
.celda-identidad-trabajador[b-pi8t7dq67p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.celda-trabajador[b-pi8t7dq67p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.celda-trabajador-dni[b-pi8t7dq67p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font: var(--font-caption);
    color: var(--color-text-muted);
    letter-spacing: .02em;
}

/* Celda «Empresa»: el empleador en 600, como la columna fuerte de la maqueta. */
.celda-empresa-trabajador[b-pi8t7dq67p] {
    min-width: 0;
    font: var(--font-body-md);
    font-weight: 600;
    text-wrap: pretty;
}

.col-registrados-vigentes[b-pi8t7dq67p],
.celda-estado-trabajador[b-pi8t7dq67p] {
    min-width: 0;
}

/* Título de cada grupo «Por Empresa» (maqueta): nombre de la Empresa en mayúsculas y recuento. */
.cabecera-grupo-trabajadores[b-pi8t7dq67p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-fila-divisor);
    font: 600 12px/16px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
}

.cabecera-grupo-trabajadores-recuento[b-pi8t7dq67p] {
    color: var(--color-text-muted);
}

/* Fila desplegada: los documentos que piden trabajo, cada uno con su «Gestionar» (maqueta de Trabajadores). */
.documentos-pendientes-trabajador[b-pi8t7dq67p] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.documento-pendiente-trabajador[b-pi8t7dq67p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.documento-pendiente-trabajador:first-child[b-pi8t7dq67p] {
    border-top-color: transparent;
}

.documento-pendiente-nombre[b-pi8t7dq67p] {
    flex: none;
    width: 220px;
    font: 600 13px/18px var(--font-family);
}

.documento-pendiente-detalle[b-pi8t7dq67p] {
    flex: 1;
    min-width: 120px;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.documento-pendiente-gestionar[b-pi8t7dq67p] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary-500);
    font: var(--font-label);
    cursor: pointer;
}

.documento-pendiente-gestionar:hover[b-pi8t7dq67p] {
    text-decoration: underline;
}

.documento-pendiente-gestionar:focus-visible[b-pi8t7dq67p] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* El documento que coincide con lo buscado se marca, como la subcaja que sustituye. */
.documento-pendiente-trabajador.coincidencia-incidencia[b-pi8t7dq67p] {
    background: var(--color-primary-50);
}

.pista-documento[b-pi8t7dq67p] {
    font: var(--font-body-sm);
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-2);
}

/* ODM-03 queda resuelta por la regla de contraste de BUG-02, no por
   inferencia sobre el nombre: --color-success-600 nunca existio y resolvia
   por el fallback al -500, que como foreground da 2.28:1 sobre Surface. El
   -700 da 5.02:1 y es el tono de texto que 06 § 2.3 asigna al semaforo. */
.pista-documento-exito[b-pi8t7dq67p] {
    color: var(--color-success-700);
}

.pista-documento-error[b-pi8t7dq67p] {
    color: var(--color-danger-700);
}

.pista-documento-info[b-pi8t7dq67p] {
    color: var(--color-text-muted);
}

/* Voluntario sin evento vigente ni futuro: sigue en la lista, en segundo plano, con la pastilla neutra de la maqueta. */
.voluntario-inactivo[b-pi8t7dq67p] {
    align-self: flex-start;
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 35%, transparent);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font: var(--font-caption);
    font-weight: 600;
    white-space: nowrap;
}
/* /Features/Usuarios/Pages/MiAvatar.razor.rz.scp.css */
/* /mi-avatar, 1:1 con «Revisión Interfaz sin Maqueta TALVEG» §B (Design, DDL-083). Escritorio: tarjeta de elección y,
   a la derecha, la vista previa en contexto de 300 px. Móvil (< 768 px): la vista previa sube, la rejilla es de 6
   columnas y «Guardar avatar» queda en una barra fija inferior de 48 px. */
.mi-emblema[b-ot7uyja2vg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6);
    align-items: start;
}

.mi-emblema-tarjeta[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

/* ---------- Vista previa en contexto ---------- */

.mi-emblema-vista[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.mi-emblema-vista-rotulo[b-ot7uyja2vg],
.mi-emblema-vista-descripcion[b-ot7uyja2vg],
.mi-emblema-estado[b-ot7uyja2vg],
.mi-emblema-estado-movil[b-ot7uyja2vg],
.mi-emblema-contexto-rotulo[b-ot7uyja2vg] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.mi-emblema-vista-cabecera[b-ot7uyja2vg] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Rebote de confirmación al guardar: una sola vez, cuando entra la clase. */
.mi-emblema-vista-figura[b-ot7uyja2vg] {
    display: inline-flex;
}

.mi-emblema-vista-figura-rebota[b-ot7uyja2vg] {
    animation: mi-emblema-rebote-b-ot7uyja2vg var(--motion-transition) var(--ease-standard);
}

@keyframes mi-emblema-rebote-b-ot7uyja2vg {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    65% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mi-emblema-vista-figura-rebota[b-ot7uyja2vg] {
        animation: none;
    }
}

.mi-emblema-vista-texto[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mi-emblema-vista-nombre[b-ot7uyja2vg] {
    font: var(--font-label);
    font-size: 0.9375rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.mi-emblema-estado-movil[b-ot7uyja2vg] {
    display: none;
}

.mi-emblema-contextos[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    border-top: var(--border-default);
}

.mi-emblema-contexto[b-ot7uyja2vg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: var(--border-default);
}

/* Un nombre largo o un correo (lo que sale cuando la cuenta no tiene nombre) se recorta con puntos suspensivos y
   nunca pisa el rótulo «Fila»/«Historial» de la derecha: el texto cede (min-width: 0) y el rótulo no encoge. */
.mi-emblema-contexto-texto[b-ot7uyja2vg] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--font-body-md);
    color: var(--color-text);
}

.mi-emblema-contexto[b-ot7uyja2vg]  .avatar-usuario {
    flex: none;
}

.mi-emblema-contexto-texto strong[b-ot7uyja2vg] {
    font-weight: 600;
}

.mi-emblema-contexto-rotulo[b-ot7uyja2vg] {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
}

.mi-emblema-pie[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mi-emblema-estado[b-ot7uyja2vg] {
    text-align: center;
}

.mi-emblema-pie[b-ot7uyja2vg]  .mi-emblema-guardar {
    width: 100%;
    height: 44px;
    font-size: 0.875rem;
}

/* Sin cambios que guardar o sin nada que quitar los botones se atenúan al 45 % (opacity de la revisión de Design,
   §B: .45), no al 55 % genérico de Boton. */
.mi-emblema-pie[b-ot7uyja2vg]  .mi-emblema-guardar:disabled,
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales:disabled,
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales-movil:disabled {
    opacity: 0.45;
}

/* «Volver a mis iniciales»: es la salida, no una acción par de «Guardar avatar». Botón de TEXTO: sin borde ni fondo
   (Boton Fantasma trae los dos), color primario, font-label y subrayado al pasar el cursor (revisión de Design, §B). */
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales,
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales-movil {
    border: 0;
    background: transparent;
    color: var(--color-primary-500);
    font: var(--font-label);
}

.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales:not(:disabled):hover,
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales-movil:not(:disabled):hover {
    background: transparent;
    text-decoration: underline;
    transform: none;
}

/* 36 px (Boton medio trae min-height: 40, que ganaría a la altura). */
.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales {
    height: 36px;
    min-height: 36px;
}

.mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales-movil {
    display: none;
    align-self: flex-start;
    height: 44px;
    padding: 0;
}

/* ---------- Elección: animal y tono ---------- */

.mi-emblema-grupo[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mi-emblema-leyenda[b-ot7uyja2vg] {
    padding: 0;
    margin-bottom: var(--space-3);
    font: var(--font-label);
    color: var(--color-text);
}

.mi-emblema-opciones[b-ot7uyja2vg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* La opción es la etiqueta de un radio nativo: flechas, espacio y foco los pone el
   navegador. El radio se oculta a la vista, no al teclado ni al lector de pantalla. */
.mi-emblema-opcion[b-ot7uyja2vg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-body-md);
    color: var(--color-text);
    cursor: pointer;
}

.mi-emblema-radio[b-ot7uyja2vg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mi-emblema-opcion:hover[b-ot7uyja2vg] {
    background-color: var(--color-surface-hover);
}

.mi-emblema-opcion:has(.mi-emblema-radio:checked)[b-ot7uyja2vg] {
    box-shadow: 0 0 0 2px var(--color-primary-500);
}

.mi-emblema-opcion:has(.mi-emblema-radio:focus-visible)[b-ot7uyja2vg] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Pequeño gesto al pasar por encima; AvatarUsuario ya lo anula con movimiento reducido. */
.mi-emblema-opcion:hover[b-ot7uyja2vg]  .avatar-usuario-glifo {
    transform: scale(1.15) rotate(-8deg);
}

/* Rejilla fija de 8 columnas de 52 px (6 en móvil, que se reparten el ancho) con el avatar de 44 px. */
.mi-emblema-rejilla[b-ot7uyja2vg] {
    display: grid;
    grid-template-columns: repeat(8, 52px);
    gap: var(--space-2);
}

.mi-emblema-rejilla .mi-emblema-opcion[b-ot7uyja2vg] {
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
}

.mi-emblema-rejilla[b-ot7uyja2vg]  .avatar-usuario {
    --avatar-usuario-lado: 44px;
}

/* Tono: píldora de 44 px con el avatar de 32 y su nombre. */
.mi-emblema-opcion-tono[b-ot7uyja2vg] {
    height: 44px;
    padding: 0 14px 0 6px;
    background-color: var(--color-surface);
    border: var(--border-default);
}

.mi-emblema-opcion-tono:hover[b-ot7uyja2vg] {
    background-color: var(--color-surface-hover);
}

/* ---------- Cargando: la forma de la pantalla ---------- */

.mi-emblema-esqueleto[b-ot7uyja2vg] {
    gap: var(--space-6);
}

.mi-emblema-esqueleto-vista[b-ot7uyja2vg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mi-emblema-esqueleto-textos[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mi-emblema-esqueleto-rejilla[b-ot7uyja2vg] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

/* Mismos tokens por tema que Esqueleto; el brillo se apaga con movimiento reducido. */
.mi-emblema-esqueleto-bloque[b-ot7uyja2vg] {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-esqueleto-base) 25%, var(--color-esqueleto-brillo) 37%, var(--color-esqueleto-base) 63%);
    background-size: 400% 100%;
    animation: mi-emblema-esqueleto-brillo-b-ot7uyja2vg 1.4s var(--ease-fluid) infinite;
}

.mi-emblema-esqueleto-redondo[b-ot7uyja2vg],
.mi-emblema-esqueleto-celda[b-ot7uyja2vg] {
    border-radius: var(--radius-full);
}

.mi-emblema-esqueleto-redondo[b-ot7uyja2vg] {
    width: 56px;
    height: 56px;
}

.mi-emblema-esqueleto-celda[b-ot7uyja2vg] {
    aspect-ratio: 1;
}

.mi-emblema-esqueleto-titulo[b-ot7uyja2vg] {
    width: 120px;
    height: 12px;
}

.mi-emblema-esqueleto-detalle[b-ot7uyja2vg] {
    width: 80px;
    height: 10px;
}

@keyframes mi-emblema-esqueleto-brillo-b-ot7uyja2vg {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .mi-emblema-esqueleto-bloque[b-ot7uyja2vg] {
        animation: none;
    }
}

/* Barra de móvil (revisión de Design §B): oculta en escritorio; ahí manda CabeceraPagina. */
.mi-emblema-barra-movil[b-ot7uyja2vg] {
    display: none;
}

/* ---------- Tableta: la rejilla fija de 8 × 52 px no cabe junto a la columna de 300 px; una sola columna ---------- */

@media (max-width: 1023px) {
    .mi-emblema[b-ot7uyja2vg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mi-emblema-vista[b-ot7uyja2vg] {
        order: -1;
    }
}

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
    /* La maqueta de móvil lleva 16 px de margen (base.css da 32 px a la página): con 32 la rejilla de 6 columnas
       de 44 px no cabe a 375 px. */
    .contenedor-pagina[b-ot7uyja2vg] {
        padding: var(--space-4);
    }

    /* «‹ Mi avatar» en lugar de CabeceraPagina: 56 px, relleno 0 8 px, hueco 8 px, fondo de superficie y filete inferior. */
    .mi-emblema-cabecera-escritorio[b-ot7uyja2vg] {
        display: none;
    }

    .mi-emblema-barra-movil[b-ot7uyja2vg] {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        height: 56px;
        margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
        padding: 0 var(--space-2);
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }

    .mi-emblema-barra-volver[b-ot7uyja2vg] {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        color: var(--color-text);
        font: 400 22px/1 var(--font-family);
        text-decoration: none;
    }

    .mi-emblema-barra-titulo[b-ot7uyja2vg] {
        font: var(--font-h4);
        color: var(--color-text);
    }

    .mi-emblema[b-ot7uyja2vg] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        /* La barra fija mide 80 px (12 + 48 + 20): que no tape el último control. */
        padding-bottom: 96px;
    }

    .mi-emblema-tarjeta[b-ot7uyja2vg],
    .mi-emblema-vista[b-ot7uyja2vg] {
        padding: var(--space-4);
    }

    .mi-emblema-tarjeta[b-ot7uyja2vg] {
        gap: var(--space-3);
    }

    /* La vista previa sube sobre la elección; sin contextos ni descripción: lleva la línea de estado. */
    .mi-emblema-vista[b-ot7uyja2vg] {
        order: -1;
    }

    .mi-emblema-vista-rotulo[b-ot7uyja2vg],
    .mi-emblema-vista-descripcion[b-ot7uyja2vg],
    .mi-emblema-contextos[b-ot7uyja2vg],
    .mi-emblema-estado[b-ot7uyja2vg] {
        display: none;
    }

    .mi-emblema-estado-movil[b-ot7uyja2vg] {
        display: block;
    }

    .mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales {
        display: none;
    }

    .mi-emblema[b-ot7uyja2vg]  .mi-emblema-iniciales-movil {
        display: inline-flex;
    }

    .mi-emblema-rejilla[b-ot7uyja2vg],
    .mi-emblema-esqueleto-rejilla[b-ot7uyja2vg] {
        grid-template-columns: repeat(6, minmax(44px, 1fr));
        gap: 6px;
    }

    .mi-emblema-rejilla .mi-emblema-opcion[b-ot7uyja2vg] {
        width: auto;
        height: auto;
        min-height: 44px;
        aspect-ratio: 1;
    }

    .mi-emblema-rejilla[b-ot7uyja2vg]  .avatar-usuario {
        --avatar-usuario-lado: 40px;
    }

    .mi-emblema-tonos[b-ot7uyja2vg] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .mi-emblema-opcion-tono[b-ot7uyja2vg] {
        height: 48px;
        padding: 0 12px 0 8px;
    }

    .mi-emblema-acciones[b-ot7uyja2vg] {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        /* Por debajo de la cabecera fija (1020) y de sus velos: un menú abierto tapa la barra, no al revés. */
        z-index: 1010;
        padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
        background-color: var(--color-surface);
        border-top: var(--border-default);
    }

    .mi-emblema-pie[b-ot7uyja2vg]  .mi-emblema-guardar {
        height: 48px;
        font-size: 0.9375rem;
    }
}
/* /Features/Usuarios/Pages/MiFirma.razor.rz.scp.css */
/*
  Mi firma (Gen 2): dos columnas —captura a la izquierda, firma guardada y
  «Dónde se usa» a la derecha— que se apilan en pantallas estrechas. Todo lo
  que se declara aquí se usa solo en MiFirma.razor; el lienzo conserva su
  clase global (.firma-en-campo-lienzo, workspace.css) porque la comparte con
  FirmaEnCampoTab, y aquí solo se ajusta su marco dentro de esta pantalla.
*/
.mi-firma-rejilla[b-y6h163pgsy] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.mi-firma-columna[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.mi-firma-seccion[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mi-firma-seccion-compacta[b-y6h163pgsy] {
    gap: var(--space-3);
}

.mi-firma-seccion-titulo[b-y6h163pgsy] {
    margin: 0;
    font: var(--font-h3);
    color: var(--color-text);
}

.mi-firma-modos[b-y6h163pgsy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mi-firma-nombre[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 520px;
}

.mi-firma-ayuda[b-y6h163pgsy] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.mi-firma-vista-previa[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mi-firma-etiqueta[b-y6h163pgsy] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.mi-firma-lienzo[b-y6h163pgsy] {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.mi-firma-lienzo .firma-en-campo-lienzo[b-y6h163pgsy] {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.mi-firma-lienzo .firma-en-campo-lienzo:hover[b-y6h163pgsy] {
    border-color: var(--color-border-control);
}

/* La pista no puede interceptar el puntero: el trazo empieza justo debajo. */
.mi-firma-lienzo-pista[b-y6h163pgsy] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-6);
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-align: center;
    text-wrap: pretty;
    pointer-events: none;
}

.mi-firma-acciones[b-y6h163pgsy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mi-firma-guardada-marco[b-y6h163pgsy] {
    height: 120px;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mi-firma-guardada-imagen[b-y6h163pgsy] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mi-firma-desactualizada[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    font: var(--font-caption);
}

.mi-firma-dato[b-y6h163pgsy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi-firma-dato-etiqueta[b-y6h163pgsy] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mi-firma-dato-valor[b-y6h163pgsy] {
    font: var(--font-body-md);
    color: var(--color-text);
}

.mi-firma-usos[b-y6h163pgsy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mi-firma-uso[b-y6h163pgsy] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) 0;
    border-top: var(--border-default);
}

.mi-firma-uso:first-child[b-y6h163pgsy] {
    border-top-color: transparent;
}

.mi-firma-uso-icono[b-y6h163pgsy] {
    flex: none;
    margin-top: 3px;
    color: var(--color-text-muted);
    display: inline-flex;
}

.mi-firma-uso-texto[b-y6h163pgsy] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi-firma-uso-titulo[b-y6h163pgsy] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.mi-firma-enlace[b-y6h163pgsy] {
    align-self: flex-start;
    font: var(--font-label);
}

@media (max-width: 768px) {
    .mi-firma-rejilla[b-y6h163pgsy] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Usuarios/Pages/Usuarios.razor.rz.scp.css */
/* Un enlace de activación es una URL larga con un token dentro: sin romper
   por cualquier carácter se sale del modal y deja de poder leerse ni
   seleccionarse entera, que es justo para lo que está ahí. */
.enlace-activacion[b-o2gwc0zjjh] {
    word-break: break-all;
    font-family: monospace;
    font-size: 0.875rem;
    /* Token real de superficie hundida. El anterior no existía y resolvía
       siempre al #f4f4f4 de reserva: en tema oscuro dejaba el texto claro
       sobre fondo claro, a 1,10:1, y el enlace no se podía leer. */
    background: var(--color-surface-subtle);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.nota-cuenta-sin-contrasena[b-o2gwc0zjjh] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: 0;
}

/*
  .barra-filtros (list-page.css, global) trae max-width:480px, pensado para
  buscador + un único filtro. Aquí son tres controles —buscar, Rol y Estado—
  y a 480px el select de rol recorta "Coordinador CAE", que es justamente lo
  que hay que poder leer para elegirlo. Mismo remedio que Clientes.razor.css,
  y por la misma vía: aislamiento de CSS de Blazor, la regla lleva el atributo
  de ámbito y no toca list-page.css ni las páginas que sí caben en 480px.
*/
.barra-filtros[b-o2gwc0zjjh] {
    max-width: 720px;
    flex-wrap: wrap;
    row-gap: var(--space-3);
}

/*
  DEFECTO corregido en este incremento, no estilo nuevo. Las tres clases
  .pista-documento* estaban escritas SOLO en Trabajadores.razor.css y esta
  página las usaba copiadas en el marcado. El CSS aislado de Blazor genera un
  selector con el atributo de ámbito del componente que lo declara
  (.pista-documento[b-xxxxx]), así que aquí no casaban con nada: el "✓ Razón
  Social" y el "✗ No encontramos ninguna empresa" se pintaban como texto
  corriente, sin el verde ni el rojo que los distinguen. Mismo síntoma y misma
  causa que documenta CabeceraPagina.razor en su punto 2.

  Los valores son los de Trabajadores.razor.css, incluida la razón de que el
  éxito use -700 y no -500: como color de texto sobre Surface, el -500 da
  2,28:1 y el -700 da 5,02:1.
*/
.pista-documento[b-o2gwc0zjjh] {
    font: var(--font-body-sm);
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-2);
}

.pista-documento-exito[b-o2gwc0zjjh] {
    color: var(--color-success-700);
}

.pista-documento-error[b-o2gwc0zjjh] {
    color: var(--color-danger-700);
}

.pista-documento-info[b-o2gwc0zjjh] {
    color: var(--color-text-muted);
}

/*
  El permiso sobre documentos sensibles se encuadra: no es un campo más del
  formulario, es una concesión aparte del rol, y su texto de ayuda tiene que
  leerse junto a la casilla y no como un pie suelto del formulario.
*/
.bloque-permiso-sensible[b-o2gwc0zjjh] {
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.bloque-permiso-sensible .campo-checkbox[b-o2gwc0zjjh] {
    margin-bottom: var(--space-2);
}

.texto-permiso-sensible[b-o2gwc0zjjh] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: 0;
}

/* Rótulo de la columna de acciones: existe para los lectores de pantalla, no
   para la vista. No se usa display:none ni visibility:hidden, que lo quitarían
   también del árbol de accesibilidad, que es exactamente lo contrario de lo
   que se busca. */
.encabezado-solo-lectores[b-o2gwc0zjjh] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "tú" junto al propio correo. Atenuado y pequeño: señala, no compite con la
   dirección, que es el dato de la celda. */
.marca-eres-tu[b-o2gwc0zjjh] {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* Iniciales de cada empresa en la cartera del alta: el mismo avatar de texto que
   la cartera de Mi trabajo, provisional hasta que el lote 1 del logo del Tenant
   traiga AvatarTenant. */
.avatar-iniciales-empresa[b-o2gwc0zjjh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 24px;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: var(--font-caption);
    font-weight: 700;
}
/* /Features/Vehiculos/Pages/VehiculoDetalle.razor.rz.scp.css */
/*
  Vehículo 360, página. La maquetación (cabecera de identidad, banda, cuerpo
  con lateral, tarjetas, filas en rejilla) la ponen los componentes compartidos
  del DesignSystem; aquí solo se estila lo que esta página mete en sus ranuras.
  Medidas del mockup «Vehiculo 360 página TALVEG».
*/

/* La matrícula como placa (.placa del mockup): se copia al pulsarla. El botón
   es de BotonCopiar, por eso el ::deep. */
.vehiculo360-placa[b-g1sps5z0ci]  .boton-copiar {
    font: var(--font-label-md);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    cursor: copy;
}

/* El nombre del empleador en la entradilla (.lnk del mockup). */
.vehiculo360-enlace[b-g1sps5z0ci] {
    font-weight: 600;
    color: var(--color-primary-500);
    text-decoration: none;
    white-space: nowrap;
}

.vehiculo360-enlace:hover[b-g1sps5z0ci] {
    text-decoration: underline;
}

.vehiculo360-enlace:focus-visible[b-g1sps5z0ci] {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Aviso del encabezado de la lista: hay vencidos más allá del tope que se pinta. */
.vehiculo360-vencidos-fuera[b-g1sps5z0ci] {
    margin-left: var(--space-2);
    color: var(--color-danger-700);
}

/* Nota bajo los datos del lateral (.nota del mockup). */
.vehiculo360-nota[b-g1sps5z0ci] {
    margin: var(--space-2) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Vehiculos/Pages/Vehiculos.razor.rz.scp.css */
.celda-vehiculo[b-gopk2uo8cx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.celda-vehiculo-modelo[b-gopk2uo8cx] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.celda-vehiculo-matricula[b-gopk2uo8cx] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface);
}

.vehiculo-identidad[b-gopk2uo8cx],
.col-header-content[b-gopk2uo8cx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.boton-expandir-incidencias[b-gopk2uo8cx],
.col-options-button[b-gopk2uo8cx],
.col-title[b-gopk2uo8cx] {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.boton-expandir-incidencias[aria-expanded=true][b-gopk2uo8cx] {
    transform: rotate(90deg);
}

.col-header-content[b-gopk2uo8cx] {
    position: relative;
}

.col-options[b-gopk2uo8cx] {
    position: absolute;
    top: 100%;
    background: var(--color-surface);
    padding: var(--space-3);
    border: var(--border-default);
    z-index: 1030;
}

.vehiculos-rejilla-propia .vehiculo-detalle-incidencias > td[b-gopk2uo8cx] {
    padding: 0;
}
/* /Features/VisionCartera/Pages/VisionCartera.razor.rz.scp.css */
/* Visión de cartera — mockup Gen 2 «Vision Cartera TALVEG.dc.html». Solo
   tokens de tokens.css; las clases globales que reutiliza (rejilla-kpis-criticos,
   dashboard-resumen-tarjeta-anillo, tabla-datos, texto-vacio-seccion) viven en
   dashboard.css / list-page.css. */

.vision-cartera-contenido[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seccion-cartera[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.titulo-seccion-cartera[b-vh7cslx1ka] {
    margin: 0;
    font: var(--font-h3);
    color: var(--color-text);
}

.cabecera-seccion-cartera[b-vh7cslx1ka] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.nota-seccion-cartera[b-vh7cslx1ka] {
    font: var(--font-label);
    color: var(--color-text-muted);
}

.aviso-sin-cartera[b-vh7cslx1ka] {
    margin: 0;
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

/* Cabecera: ámbito a la derecha del título. */
.ambito-cartera[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    font: var(--font-body-md);
    color: var(--color-text-muted);
    text-align: right;
}

.ambito-cartera-sistema[b-vh7cslx1ka] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-system-text);
}

.punto-sistema[b-vh7cslx1ka] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-system-indicator);
}

.enlace-accion-cartera[b-vh7cslx1ka] {
    font: var(--font-label);
}

/* Resumen: anillo (340px) + actividad general. */
.resumen-cartera[b-vh7cslx1ka] {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.actividad-cartera[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.rejilla-actividad-cartera[b-vh7cslx1ka] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.rejilla-actividad-cartera[b-vh7cslx1ka]  .tarjeta-metrica {
    background: var(--color-surface);
}

.reparto-riesgo[b-vh7cslx1ka] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

figure.reparto-riesgo[b-vh7cslx1ka] {
    margin: 0;
}

/* Equivalente accesible del gráfico: la misma serie en tabla, fuera de la
   vista pero leída por el lector de pantalla (el SVG va aria-hidden). */
.reparto-riesgo-datos[b-vh7cslx1ka] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sin-cartera-organizacion[b-vh7cslx1ka],
.sin-datos-organizacion[b-vh7cslx1ka] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.reparto-riesgo-titulo[b-vh7cslx1ka] {
    font: var(--font-label);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.reparto-riesgo-grafico[b-vh7cslx1ka] {
    width: 100%;
    height: 120px;
}

.reparto-riesgo-base[b-vh7cslx1ka] {
    stroke: var(--color-border);
    stroke-width: 1;
}

.barra-vencidos[b-vh7cslx1ka] {
    fill: var(--color-danger-500);
}

.barra-urgentes[b-vh7cslx1ka] {
    fill: var(--color-warning-500);
}

.reparto-riesgo-etiqueta[b-vh7cslx1ka],
.reparto-riesgo-sin-riesgo[b-vh7cslx1ka] {
    fill: var(--color-text-muted);
    font-family: var(--font-family);
    font-size: 10px;
}

.reparto-riesgo-sin-riesgo[b-vh7cslx1ka] {
    font-size: 11px;
}

.reparto-riesgo-leyenda[b-vh7cslx1ka] {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.reparto-riesgo-leyenda > span[b-vh7cslx1ka] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.muestra-leyenda[b-vh7cslx1ka] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.muestra-vencidos[b-vh7cslx1ka] {
    background: var(--color-danger-500);
}

.muestra-urgentes[b-vh7cslx1ka] {
    background: var(--color-warning-500);
}

/* Tabla de organizaciones. */
.nombre-organizacion[b-vh7cslx1ka] {
    display: block;
    font-weight: 600;
}

.meta-organizacion[b-vh7cslx1ka] {
    display: block;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Recuento de Centros de Trabajo bloqueados, debajo del porcentaje documental (D-7). */
[b-vh7cslx1ka] .bloqueos-organizacion {
    margin-top: var(--space-1);
}

.cumplimiento-organizacion[b-vh7cslx1ka] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 140px;
}

.barra-cumplimiento[b-vh7cslx1ka] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    overflow: hidden;
}

.barra-cumplimiento-relleno[b-vh7cslx1ka] {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
}

.barra-cumplimiento-relleno.tono-exito[b-vh7cslx1ka] { background: var(--color-success-500); }
.barra-cumplimiento-relleno.tono-advertencia[b-vh7cslx1ka] { background: var(--color-warning-500); }
.barra-cumplimiento-relleno.tono-peligro[b-vh7cslx1ka] { background: var(--color-danger-500); }

.valor-cumplimiento[b-vh7cslx1ka] {
    flex: none;
    font: var(--font-caption);
    font-weight: 600;
}

.valor-cumplimiento.tono-exito[b-vh7cslx1ka] { color: var(--color-success-700); }
.valor-cumplimiento.tono-advertencia[b-vh7cslx1ka] { color: var(--color-warning-700); }
.valor-cumplimiento.tono-peligro[b-vh7cslx1ka] { color: var(--color-danger-700); }

.celda-accion-organizacion[b-vh7cslx1ka] {
    text-align: right;
    white-space: nowrap;
}

/* Pulso. */
.pulso-cartera[b-vh7cslx1ka] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pulso-cartera-titular[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pulso-cartera-kicker[b-vh7cslx1ka] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pulso-cartera-frase[b-vh7cslx1ka] {
    font: var(--font-h4);
}

.pulso-cartera-cifras[b-vh7cslx1ka] {
    display: flex;
    gap: var(--space-6);
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
}

.pulso-cartera-cifra[b-vh7cslx1ka] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pulso-cartera-etiqueta[b-vh7cslx1ka] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.pulso-cartera-cifra[b-vh7cslx1ka]  .pulso-cartera-valor {
    font: var(--font-h4);
}

.pulso-cartera-cifra[b-vh7cslx1ka]  .pulso-en-verde {
    color: var(--color-success-700);
}

.pulso-cartera-cifra[b-vh7cslx1ka]  .pulso-en-riesgo {
    color: var(--color-danger-700);
}

@media (max-width: 768px) {
    .resumen-cartera[b-vh7cslx1ka],
    .rejilla-actividad-cartera[b-vh7cslx1ka] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ambito-cartera[b-vh7cslx1ka] {
        align-items: flex-start;
        text-align: left;
    }

    .pulso-cartera-cifras[b-vh7cslx1ka] {
        padding-left: 0;
        border-left: 0;
    }
}
/* /Features/Visitas/Components/SelectorCandidatoTrabajador.razor.rz.scp.css */
/* Lista con buscador de quién puede añadirse a la Visita (pestaña «Trabajadores» del panel). */
.visitas-candidatos[b-aka2uxg7it] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.visitas-candidatos-lista[b-aka2uxg7it] {
    list-style: none;
    padding: 0;
    max-height: 280px;
    margin: 0;
    overflow-y: auto;
}

.visitas-candidato[b-aka2uxg7it] {
    display: block;
    width: 100%;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.visitas-candidato:hover:not(:disabled)[b-aka2uxg7it],
.visitas-candidato:focus-visible[b-aka2uxg7it] {
    background: var(--color-surface-subtle);
}
/* /Features/Visitas/Pages/VisitaDetalle.razor.rz.scp.css */
/*
    Visita 360 — lo propio de esta página. La maquetación compartida de las
    páginas 360 (cabecera de identidad, banda, cuerpo con lateral, tarjetas,
    contadores de estado y filas en rejilla) vive en Components/DesignSystem;
    aquí solo lo que no tiene primitiva.
*/

/* El anillo y, debajo, cuántos trabajadores están listos. */
.visita360-anillo[b-xc731h6xue] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.visita360-anillo-fraccion[b-xc731h6xue] {
    font: var(--font-caption);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.visita360-enlace[b-xc731h6xue] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary-500);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.visita360-enlace:hover[b-xc731h6xue] {
    text-decoration: underline;
}

.visita360-enlace:focus-visible[b-xc731h6xue],
.visita360-grupo-plegar:focus-visible[b-xc731h6xue],
.visita360-interruptor:focus-visible[b-xc731h6xue] {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Cabecera de grupo de la comprobación previa: la Empresa o un Trabajador. */
.visita360-grupo[b-xc731h6xue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-1);
    font: var(--font-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    list-style: none;
}

.visita360-grupo i[b-xc731h6xue] {
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.visita360-grupo-plegar[b-xc731h6xue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--space-6);
    height: var(--space-6);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.visita360-grupo-plegar[aria-expanded="false"][b-xc731h6xue] {
    transform: rotate(-90deg);
}

.visita360-grupo-vacio[b-xc731h6xue] {
    padding: var(--space-2) 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
    list-style: none;
}

/* Datos de la tarjeta «Información»: dos columnas, etiqueta sobre valor. */
.visita360-datos[b-xc731h6xue] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0;
}

.visita360-datos > div[b-xc731h6xue] {
    min-width: 0;
}

.visita360-dato-ancho[b-xc731h6xue] {
    grid-column: 1 / -1;
}

.visita360-datos dt[b-xc731h6xue] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.visita360-datos dd[b-xc731h6xue] {
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.visita360-linea[b-xc731h6xue] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-fila-divisor);
}

.visita360-linea-texto[b-xc731h6xue] {
    flex: 1;
    min-width: 0;
}

.visita360-linea-texto b[b-xc731h6xue] {
    display: block;
    font: var(--font-body-md);
    font-weight: 600;
}

.visita360-linea-texto small[b-xc731h6xue] {
    display: block;
    margin-top: var(--space-1);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Interruptor «Notificada al titular del Centro»: mismo dibujo que el del listado de Visitas. */
.visita360-interruptor[b-xc731h6xue] {
    appearance: none;
    position: relative;
    flex: none;
    width: calc(var(--space-8) + var(--space-1));
    height: var(--space-5);
    margin: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.visita360-interruptor[b-xc731h6xue]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--space-4) - 2px);
    height: calc(var(--space-4) - 2px);
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    transition: left 0.15s ease, background-color 0.15s ease;
}

.visita360-interruptor:checked[b-xc731h6xue] {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

/* --color-surface y no blanco fijo: sobre la pista de oscuro el blanco no llega a 3:1. */
.visita360-interruptor:checked[b-xc731h6xue]::before {
    left: calc(var(--space-4) + 2px);
    background: var(--color-surface);
}

.visita360-interruptor:disabled[b-xc731h6xue] {
    opacity: 0.5;
    cursor: not-allowed;
}

.visita360-pastillas[b-xc731h6xue] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
}

.visita360-texto[b-xc731h6xue] {
    margin: 0;
    font: var(--font-body-md);
}

.visita360-recomendaciones[b-xc731h6xue] {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font: var(--font-body-md);
}

.visita360-recomendaciones li + li[b-xc731h6xue] {
    margin-top: var(--space-1);
}

.visita360-nota[b-xc731h6xue] {
    margin: 0 0 var(--space-3);
    font: var(--font-caption);
    color: var(--color-text-muted);
    text-wrap: pretty;
}

/* Asunto y cuerpo de la solicitud o del aviso, tal como se copian. */
.visita360-caja[b-xc731h6xue] {
    padding: var(--space-3);
    border: 1px solid var(--color-fila-divisor);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    font: var(--font-body-md);
}

.visita360-caja p[b-xc731h6xue] {
    margin: 0;
}

.visita360-caja p + p[b-xc731h6xue] {
    margin-top: var(--space-2);
}

.visita360-caja-cuerpo[b-xc731h6xue] {
    color: var(--color-text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.visita360-botones[b-xc731h6xue] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
/* /Features/Visitas/Pages/Visitas.razor.rz.scp.css */
.detalle-visita-subtitulo[b-0dtoyi8at7] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.detalle-visita-trabajador[b-0dtoyi8at7] {
    margin-bottom: var(--space-4);
}

.detalle-visita-trabajador h4[b-0dtoyi8at7] {
    font: var(--font-body-md);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Nota de sistema: va en el resumen de la barra de filtros, a la derecha. */
.visitas-nota-sistema[b-0dtoyi8at7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    font: var(--font-caption);
    color: var(--color-system-text);
}

.visitas-nota-sistema-punto[b-0dtoyi8at7] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-system-indicator);
}

/* Columna «Visita»: el Centro arriba y, debajo en tamaño de pie, el titular del Centro y la Empresa. */
.visitas-celda-apilada[b-0dtoyi8at7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* El estado de Visitas necesita menos ancho que el motivo documental de otros listados.
   Libera espacio para la identidad de la Visita a 1280 px, también con selección múltiple.
   124 px de celda = 92 de contenido (16 px de padding por lado). Medido con Segoe UI (la fuente real si
   Inter no está instalada): «Tramo Estándar» 82,7 px, «Tramo Urgente» 80,1 px y la pastilla «Cancelada»
   76,3 px. Con 80 px de contenido el motivo estándar, el más común, salía con elipsis. */
[b-0dtoyi8at7] .tabla-datos th.col-estado-visitas,
[b-0dtoyi8at7] .tabla-datos td.col-estado-visitas {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
}

/* El contenido tiene una caja propia: min/max-width sobre la celda no limita
   el ancho intrínseco que participa en el reparto automático de la tabla. */
.visitas-estado-acotado[b-0dtoyi8at7] {
    display: block;
    width: 92px;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visitas-estado-acotado[b-0dtoyi8at7]  .estado-fila {
    width: 100%;
    max-width: 92px;
}

.visitas-estado-acotado[b-0dtoyi8at7]  .badge,
.visitas-estado-acotado[b-0dtoyi8at7]  .estado-fila-motivo,
.visitas-estado-acotado[b-0dtoyi8at7]  [data-pieza=motivo-cancelacion],
.visitas-estado-acotado[b-0dtoyi8at7]  [data-antelacion-tramo] {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Segunda línea de «Visita»: el titular y la Empresa van seguidos, como texto, y parten por donde
   quepan. El ancho de la columna lo decide el reparto automático de la tabla. Probado y descartado:
   un mínimo de 16rem devuelve el desborde de página a 1280 px (tabla de 1026 px en 941), y una
   preferencia del 36 % le quita el sitio a «Fechas», que pasa a partir cada rango en tres líneas. */
.visitas-celda-titular-empresa[b-0dtoyi8at7] {
    display: block;
    min-width: 0;
}

.visitas-celda-titular-empresa .enlace-nombre-fila[b-0dtoyi8at7] {
    display: inline;
    font: inherit;
    color: inherit;
    text-align: left;
}

/* El separador cuelga del nombre del titular: un botón no parte por dentro como el texto, y suelto
   se quedaba solo en su línea cuando la Empresa bajaba a la siguiente. */
.visitas-celda-titular-empresa .enlace-nombre-fila:first-child[b-0dtoyi8at7]::after {
    content: "\00a0·";
}

.visitas-celda-secundaria[b-0dtoyi8at7] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Interruptor de «Notificada a la empresa titular»: sigue siendo un
   checkbox nativo (teclado, foco y estado accesibles de serie) con
   role="switch" y aspecto de interruptor, como pide el mockup. */
.visitas-interruptor[b-0dtoyi8at7] {
    appearance: none;
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.visitas-interruptor[b-0dtoyi8at7]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    transition: left 0.15s ease, background-color 0.15s ease;
}

.visitas-interruptor:checked[b-0dtoyi8at7] {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.visitas-interruptor:checked[b-0dtoyi8at7]::before {
    left: 18px;
    /* --color-surface y no blanco fijo: sobre la pista --color-primary-500 de oscuro (#60a5fa) el blanco da
       2,54:1 (< 3:1 de un componente gráfico, WCAG 1.4.11); la superficie, 6,32:1. En claro es #fff, igual que antes. */
    background: var(--color-surface);
}

.visitas-interruptor:focus-visible[b-0dtoyi8at7] {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Detalle de la visita (Gen 2). */
.visitas-detalle-cabecera[b-0dtoyi8at7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.visitas-detalle-pagina[b-0dtoyi8at7] {
    align-self: flex-start;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-primary-500);
    text-decoration: none;
}

.visitas-detalle-pagina:hover[b-0dtoyi8at7] {
    text-decoration: underline;
}

.visitas-detalle-centro[b-0dtoyi8at7] {
    font: var(--font-heading-md);
    color: var(--color-text);
}

.visitas-detalle-marcas[b-0dtoyi8at7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.visitas-detalle-fechas[b-0dtoyi8at7] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.visitas-detalle-campos[b-0dtoyi8at7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.visitas-detalle-campo[b-0dtoyi8at7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* El dato «Documentación» lleva su acción al lado: ocupa las dos columnas. */
.visitas-detalle-campo-ancho[b-0dtoyi8at7] {
    grid-column: 1 / -1;
}

.visitas-detalle-documentacion[b-0dtoyi8at7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.visitas-detalle-campo dt[b-0dtoyi8at7] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.visitas-detalle-campo dd[b-0dtoyi8at7] {
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.visitas-detalle-resumen[b-0dtoyi8at7] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

/* P1-X2: aviso de visita copiable de un Centro sin gestión CAE. */
.visitas-aviso[b-0dtoyi8at7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.visitas-aviso-asunto[b-0dtoyi8at7] {
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.visitas-aviso-cuerpo[b-0dtoyi8at7] {
    margin: 0;
    font: var(--font-body-sm);
    color: var(--color-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* P1-X1: solicitud de acceso por correo de un Centro gestionado por correo. */
.visitas-aviso-destinatarios[b-0dtoyi8at7] {
    margin: 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.visitas-aviso-acciones[b-0dtoyi8at7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Pestaña «Trabajadores» del panel: quién entra, con baja por fila (icono «menos») y alta desde una lista con buscador. */
.visitas-trabajadores-lista[b-0dtoyi8at7] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.visitas-trabajador-fila[b-0dtoyi8at7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-1) 0;
    border-top: 1px solid var(--color-border);
}

.visitas-trabajador-fila:first-child[b-0dtoyi8at7] {
    border-top: 0;
}

.visitas-trabajador-nombre[b-0dtoyi8at7] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.visitas-trabajador-quitar[b-0dtoyi8at7] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.visitas-trabajador-quitar:hover:not(:disabled)[b-0dtoyi8at7],
.visitas-trabajador-quitar:focus-visible[b-0dtoyi8at7] {
    border-color: var(--color-danger-700);
    color: var(--color-danger-700);
}

.visitas-trabajador-quitar:disabled[b-0dtoyi8at7] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* El recuento de trabajadores del listado abre la ventana de quién entra: un dígito suelto mide 7 px,
   así que el botón gana anchura para que el puntero lo encuentre. */
[b-0dtoyi8at7] .visitas-recuento-trabajadores .ventana-contexto-disparador {
    min-width: var(--space-8);
    padding-inline: var(--space-2);
}

/* Fila sin menú «⋯»: la acción rápida de la fila cancelada y el icono 360, en línea al final. */
.visitas-celda-acciones[b-0dtoyi8at7] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Cabecera del panel: el Centro y, a su derecha, el lápiz. */
.visitas-detalle-titulo[b-0dtoyi8at7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}