@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;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 360px;
}

.toast[b-0tqqkrpqur] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card-sm);
    box-shadow: var(--shadow-overlay);
    font: var(--font-body-md);
    color: var(--color-neutral-0);
    overflow: hidden;
    animation: entrar-toast-b-0tqqkrpqur var(--motion-slow) var(--ease-standard);
}

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

/* --color-info-600, no -500: el texto del toast es --color-neutral-0 fijo
   (.toast), así que el fondo no puede aclararse en tema oscuro. El -500 sí lo
   hace desde esta PR, porque su papel es el contrario —texto informativo sobre
   fondo claro— y con él aquí el toast caía a 1,99:1. Con el -600: 10,51:1 en
   los dos temas, igual que .toast-exito y .toast-error. */
.toast-info[b-0tqqkrpqur] {
    background-color: var(--color-info-600);
}

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

.toast-advertencia[b-0tqqkrpqur] {
    background-color: var(--color-warning-500);
}

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

/* 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. */
.toast-accion[b-0tqqkrpqur] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

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

/*
  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%;
    background-color: rgba(255, 255, 255, 0.55);
    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: 84px;
    height: 84px;
}

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

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

/* 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);
}

.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/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] {
    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: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. */
.boton-copiar-en-linea[b-0mwk60zjy0] {
    font: inherit;
    color: inherit;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
    cursor: copy;
}

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

.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);
}
/* /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 neutros del
   esqueleto existente, 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-neutral-100) 25%, var(--color-neutral-200) 37%, var(--color-neutral-100) 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-neutral-100) 25%,
        var(--color-neutral-200) 37%,
        var(--color-neutral-100) 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);
}
/* /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-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/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;
}

.pestanas-panel[b-fb0yhu9p6s] {
    padding-top: var(--space-4);
    flex: 1;
    min-height: 0;
}
/* /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;
}

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

/*
    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);
}
/* /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/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);
}

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

html[data-menu-compacto] .marca .marca-wordmark[b-2q0c1wgaym] {
    display: none;
}

/* El selector de empresa gestionada no cabe en 64px: se ofrece al ensanchar la barra. */
html[data-menu-compacto] .barra-lateral[b-2q0c1wgaym] >  :not(.marca):not(nav) {
    display: none;
}

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

.marca[b-2q0c1wgaym] {
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    border-bottom: var(--border-default);
}

.marca-wordmark[b-2q0c1wgaym] {
    flex-shrink: 0;
    display: block;
    height: 22px;
    width: auto;
}

/*
  .barra-lateral usa --color-surface, que cambia de blanco (tema claro) a
  #18222E (tema oscuro, ver tokens.css): un solo wordmark estático se
  volvería invisible en uno de los dos fondos, así que se alterna entre
  lockup-claro.svg y lockup-oscuro.svg.

  Por defecto (sin data-theme='oscuro' explícito) se ve el claro. Cubre el
  primer render, antes de que el script de SelectorTema escriba data-theme
  en <html>, y también "sistema": tokens.css apaga a propósito el
  seguimiento automático de prefers-color-scheme para sus propios tokens
  (ver su comentario "Selector de tema manual"), así que --color-surface
  se queda en blanco en "sistema" con independencia del sistema operativo.
  Un @media (prefers-color-scheme: dark) aquí mostraría el wordmark claro
  de tinta marfil/celeste sobre ese fondo blanco — casi invisible; hallazgo
  de la revisión de Codex sobre la primera versión de este cambio, corregido
  quitando esa media query en vez de limitarla. El día que se retome el
  seguimiento automático del sistema (comentario de tokens.css, sección
  ":root[data-theme='oscuro']"), esta regla necesitará el mismo tratamiento
  para no repetir el defecto.
*/
.marca-wordmark-oscuro[b-2q0c1wgaym] {
    display: none;
}

:root[data-theme='oscuro'] .marca-wordmark-claro[b-2q0c1wgaym] {
    display: none;
}

:root[data-theme='oscuro'] .marca-wordmark-oscuro[b-2q0c1wgaym] {
    display: block;
}

/* 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;
    font: var(--font-label-md);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    border: var(--border-default);
    border-radius: 4px;
    padding: 3px 5px;
}

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

@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;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    /* 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;
}

/*
    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);
    padding: 0 var(--space-3);
    font: var(--font-body-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.nav-grupo-titulo:hover[b-cfpktnzhnk] {
    color: var(--color-text);
}

.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;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/*
    ::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);
    border: 1px solid transparent;
    color: var(--color-text-muted);
    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),
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.nav-principal[b-cfpktnzhnk]  .nav-item .icono {
    color: var(--color-text-muted);
    transition: color var(--motion-fast) var(--ease-standard);
}

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

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

/* 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);
    border-color: transparent;
    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 {
    background-color: var(--color-nav-activo-hover-fondo);
    /* El hover genérico de .nav-item pinta un marco gris: el seleccionado no lleva marco. */
    border-color: transparent;
}

/*
    ---- 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: lupa de búsqueda y modo compacto ---- */
.nav-herramientas[b-cfpktnzhnk] {
    position: sticky;
    top: calc(-1 * var(--space-4));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: calc(-1 * var(--space-4));
    padding: var(--space-4) 0 var(--space-2);
    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;
}

/*
    La lupa es el campo: un único recuadro de 32 px que, al abrirse, crece en la misma fila (flex-grow
    0 → 1) hasta el botón de compactar y descubre el input; al cerrar vuelve a ser el botón. Sin fila
    nueva ni salto de altura. Recogido, el input va inert y transparente.
*/
.nav-buscador[b-cfpktnzhnk] {
    display: flex;
    align-items: center;
    flex: 0 0 32px;
    min-width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    transition: flex-grow var(--motion-transition) var(--ease-fluid),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.nav-buscador[data-abierta][b-cfpktnzhnk] {
    flex-grow: 1;
}

.nav-buscador:focus-within[data-abierta][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-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    cursor: pointer;
}

.nav-buscador:not([data-abierta]):hover[b-cfpktnzhnk] {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

.nav-filtro-campo[b-cfpktnzhnk] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--space-2) 0 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--color-text);
    font: var(--font-body-sm);
    opacity: 0;
    transition: opacity var(--motion-transition) var(--ease-fluid);
}

.nav-buscador[data-abierta] .nav-filtro-campo[b-cfpktnzhnk] {
    opacity: 1;
}

/* 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],
    .nav-filtro-campo[b-cfpktnzhnk] {
        transition: none;
    }
}

.nav-compactar[b-cfpktnzhnk] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: auto;
    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: enlace + estrella de fijado ---- */
.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;
}

.nav-fijar[b-cfpktnzhnk] {
    position: absolute;
    right: var(--space-1);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
}

.nav-fila:hover .nav-fijar[b-cfpktnzhnk],
.nav-fila:focus-within .nav-fijar[b-cfpktnzhnk],
.nav-fijar[aria-pressed="true"][b-cfpktnzhnk] {
    opacity: 1;
}

.nav-fijar[aria-pressed="true"][b-cfpktnzhnk] {
    color: var(--color-warning-700);
}

.nav-fijar[aria-pressed="true"][b-cfpktnzhnk]  .icono path {
    fill: currentColor;
}

/* ---- Fijados (preferencia personal del navegador; lo pinta menu-lateral.js) ---- */
.nav-fijados[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.nav-fijados[hidden][b-cfpktnzhnk] {
    display: none;
}

.nav-fijados-titulo[b-cfpktnzhnk] {
    cursor: default;
}

/* ---- 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-lupa:focus-visible[b-cfpktnzhnk],
.nav-resultado:focus-visible[b-cfpktnzhnk],
.nav-fijar: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-fijar[b-cfpktnzhnk],
html[data-menu-compacto] .barra-lateral .nav-fijados-titulo[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] {
    margin-left: 0;
}

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

html[data-menu-compacto] .barra-lateral .nav-fijados[b-cfpktnzhnk] {
    padding-bottom: var(--space-2);
}

@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ú.
*/
.selector-tenant[b-noeu2g23bj] {
    position: relative;
    padding: var(--space-3);
    border-bottom: var(--border-default);
}

.selector-tenant-disparador[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    background: var(--color-surface-subtle);
    border: var(--border-default);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.selector-tenant-disparador:hover[b-noeu2g23bj] {
    background: var(--color-surface-hover);
}

.selector-tenant-disparador:focus-visible[b-noeu2g23bj],
.selector-tenant-fila:focus-visible[b-noeu2g23bj],
.selector-tenant-busqueda: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: var(--font-label-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-tenant-sub[b-noeu2g23bj] {
    font: var(--font-caption);
    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);
}

/* 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% - var(--space-2));
    left: var(--space-3);
    right: var(--space-3);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 60vh;
    padding: var(--space-2);
    background: var(--color-overlay);
    border: var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.selector-tenant-busqueda[b-noeu2g23bj] {
    width: 100%;
    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-lista[b-noeu2g23bj] {
    max-height: 40vh;
    overflow-y: auto;
}

.selector-tenant-fila[b-noeu2g23bj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.selector-tenant-fila:hover[b-noeu2g23bj] {
    background: var(--color-surface-hover);
}

.selector-tenant-fila-activa[b-noeu2g23bj] {
    /* Sin franja lateral: fondo, nombre en negrita y la marca de verificación la distinguen. */
    background: var(--color-primary-50);
}

.selector-tenant-fila-activa .selector-tenant-nombre[b-noeu2g23bj] {
    font-weight: 600;
}

.selector-tenant-cabecera[b-noeu2g23bj] {
    padding: var(--space-2) var(--space-2) 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.selector-tenant-separador[b-noeu2g23bj] {
    height: 1px;
    margin: var(--space-1) var(--space-2);
    background: 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] {
    padding: var(--space-2) var(--space-2) 0;
    font: var(--font-caption);
    color: var(--color-text-muted);
}

/* Pendientes por empresa gestionada: dato de apoyo, el nombre sigue mandando. */
.selector-tenant-contador[b-noeu2g23bj] {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    font: var(--font-caption);
    text-align: center;
}
/* /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] {
    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);
}

.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 */
.workspace-historial-lista[b-59jl5wrbj5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.workspace-historial-item[b-59jl5wrbj5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-default);
}

.workspace-historial-item:last-child[b-59jl5wrbj5] {
    border-bottom: none;
    padding-bottom: 0;
}

.workspace-historial-cabecera[b-59jl5wrbj5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.workspace-historial-fecha[b-59jl5wrbj5] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.workspace-historial-usuario[b-59jl5wrbj5] {
    font: var(--font-body-md);
    color: var(--color-text);
}
/* /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;
}

.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] {
    cursor: pointer;
}

.mi-trabajo-grupo-cabecera-tenant: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-top: 96px;
    z-index: 1300;
}

.buscador-panel[b-ru0wsrc5mu] {
    width: 100%;
    max-width: 640px;
    max-height: 60vh;
    background-color: var(--color-overlay);
    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: 0 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;
    border: none;
    padding: var(--space-4) 0;
    font: var(--font-body-lg);
    color: var(--color-text);
    background: transparent;
}

.buscador-tecla-escape[b-ru0wsrc5mu] {
    flex: none;
    padding: 0.05em 0.4em;
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* 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] {
    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);
}

/* Aviso de "no encontré nada" cuando, aun así, hay acciones de creación que
   ofrecer debajo: separado del mensaje a pantalla completa. */
.buscador-mensaje-vacio[b-ru0wsrc5mu] {
    padding: var(--space-4) var(--space-5) var(--space-2);
    text-align: left;
}

.buscador-lista[b-ru0wsrc5mu] {
    display: flex;
    flex-direction: column;
}

.buscador-grupo + .buscador-grupo[b-ru0wsrc5mu] {
    border-top: var(--border-default);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.buscador-grupo-titulo[b-ru0wsrc5mu] {
    padding: var(--space-2) var(--space-5) 0;
    font: var(--font-label-md);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-500);
}

.buscador-item[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-5) var(--space-2) 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-bg);
    color: var(--color-text-muted);
}

.buscador-item-texto[b-ru0wsrc5mu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.buscador-item-titulo[b-ru0wsrc5mu] {
    font: var(--font-label-md);
    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;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-default);
    background-color: var(--color-bg);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.buscador-leyenda[b-ru0wsrc5mu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    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: 0.05em 0.4em;
    margin-right: 0.2em;
    border-radius: var(--radius-sm);
    border: var(--border-default);
    background-color: var(--color-bg);
    font: var(--font-body-sm);
    text-align: center;
}
/* /Features/Calendario/Pages/Calendario.razor.rz.scp.css */
.calendario-navegacion[b-ta8pmdoxms] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.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-barra-visita-fila[b-ta8pmdoxms] {
    flex: none;
    width: 4px;
    height: 28px;
}

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

.calendario-resumen-dia[b-ta8pmdoxms] {
    margin: 0 0 var(--space-5);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.calendario-seccion-modal + .calendario-seccion-modal[b-ta8pmdoxms] {
    margin-top: var(--space-5);
}

.calendario-subtitulo-modal[b-ta8pmdoxms] {
    margin: 0 0 var(--space-2);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.calendario-lista-modal[b-ta8pmdoxms] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendario-fila-modal[b-ta8pmdoxms] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
}

.calendario-fila-modal + .calendario-fila-modal[b-ta8pmdoxms] {
    border-top: var(--border-default);
}

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

.calendario-fila-principal[b-ta8pmdoxms] {
    font: var(--font-body-md);
    font-weight: 600;
}

.calendario-fila-secundaria[b-ta8pmdoxms] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /Features/Centros/Components/AcordeonAsignacionesCentro.razor.rz.scp.css */
/* Las tres ranuras se ajustan a la columna de estado del patrón compartido. */
.tarjeta-fila-acordeon-indicadores[b-5tx59svuxe] {
    width: 100%;
}
/* /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;
}
/* /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: 40px;
    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: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    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);
}
/* /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.
*/

/* Indicadores conservados en una segunda línea hasta que las listas tengan chips de estado. */
.cliente360-indicadores[b-9pep8mvblt] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex-basis: 100%;
}

/* El indicador es un botón que lleva a la pestaña Centros; se ve como el
   badge que contiene (.badge-boton del mockup). */
.cliente360-indicador-boton[b-9pep8mvblt] {
    display: inline-flex;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius-full);
}

.cliente360-indicador-boton:focus-visible[b-9pep8mvblt] {
    outline: var(--border-focus);
    outline-offset: calc(var(--space-1) / 2);
}

/* «3 centros de este cliente, del peor estado al mejor.» sobre la lista
   (.texto-apoyo del mockup, body-md). */
/* Buscador de la pestaña Centros, sobre el resumen de la lista. */
.cliente360-buscador[b-9pep8mvblt] {
    margin-bottom: var(--space-3);
}

.cliente360-resumen-lista[b-9pep8mvblt] {
    margin: 0 0 var(--space-3);
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

/* .fila-rel-pct del mockup: label, ancho mínimo y a la derecha, para que
   los porcentajes de la lista queden en columna. */
.cliente360-cumplimiento[b-9pep8mvblt] {
    min-width: calc(var(--space-10) + var(--space-1) / 2);
    text-align: right;
    font: var(--font-label);
    font-variant-numeric: tabular-nums;
    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/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/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;
}

/* list-page.css limita .barra-filtros a 480px: aquí el selector lleva al
   lado el resumen de lo que hay en la lista. */
.macros-filtros[b-4kjfms6g5i] {
    max-width: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.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» (Gen 2).
   La cabecera (kicker «Sistema» + h1) la pinta CabeceraPagina, que ya trae
   el margen inferior (.cabecera-pagina, list-page.css): el grid no suma el
   suyo. El estado del enlace de salida lo pinta EstadoVacio.
*/

.hub-configuracion[b-iujymdj9l2] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1024px) {
    .hub-configuracion[b-iujymdj9l2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .subnav-configuracion[b-iujymdj9l2] {
        position: static !important;
    }
}

.subnav-configuracion[b-iujymdj9l2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-8));
}

.grupo-subnav[b-iujymdj9l2] {
    display: flex;
    flex-direction: column;
}

.titulo-grupo-subnav[b-iujymdj9l2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 10px 6px;
}

.lista-subnav[b-iujymdj9l2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entrada-subnav[b-iujymdj9l2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

.entrada-subnav:hover[b-iujymdj9l2] {
    background-color: var(--color-surface-hover);
}

.entrada-subnav-activa[b-iujymdj9l2],
.entrada-subnav-activa:hover[b-iujymdj9l2] {
    background-color: var(--color-primary-50);
}

.icono-entrada-subnav[b-iujymdj9l2] {
    width: 22px;
    height: 22px;
    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: 10px;
    line-height: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.texto-entrada-subnav[b-iujymdj9l2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nombre-entrada-subnav[b-iujymdj9l2] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.entrada-subnav-activa .nombre-entrada-subnav[b-iujymdj9l2] {
    color: var(--color-primary-700);
}

.descripcion-entrada-subnav[b-iujymdj9l2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.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/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: se lee como dato de la línea, no como un botón aparte. */
.tipo360-linea[b-s6u8enr48q]  .boton-copiar {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: copy;
}

.tipo360-linea[b-s6u8enr48q]  .boton-copiar:hover:not(:disabled) {
    background: none;
    color: var(--color-primary-500);
}

.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-weight: 600;
}
/* /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;
}

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

/* Un aviso largo («Otra Asignación de Operación, sin principal») también cede antes de desbordar. */
.cabecera-gestor-cae-aviso[b-fuchme3ab5] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.cabecera-gestor-cae-principal[b-fuchme3ab5] {
    border-color: transparent;
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 700;
}

/* «+N»: las personas que no caben en la línea. Abre la ventana con la cartera entera. */
.cabecera-gestor-cae-mas[b-fuchme3ab5] {
    cursor: default;
    font-variant-numeric: tabular-nums;
}

.cabecera-gestor-cae[b-fuchme3ab5]  .ventana-contexto {
    flex: none;
}
/* /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);
}
/* /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: 28px minmax(0, 1fr) 116px 132px 200px 44px;
    gap: var(--space-2);
    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: 24px 28px minmax(0, 1fr) 116px 132px 200px 44px;
}

/* Estrecho: la barra oculta su pista y la columna de cumplimiento se queda en el ancho de la cifra; la
   de estado vuelve a su ancho mínimo, y el motivo se recorta antes. */
@media (max-width: 767px) {
    .rejilla-empresas[b-1377p2cnp1] {
        grid-template-columns: 28px minmax(0, 1fr) 116px 48px 132px 44px;
    }

    .rejilla-empresas-seleccion[b-1377p2cnp1] {
        grid-template-columns: 24px 28px minmax(0, 1fr) 116px 48px 132px 44px;
    }
}

/* 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] {
    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);
}

.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: 48px;
    border-bottom: 0;
    border-radius: 0;
}

.marco-lista-empresas .tarjeta-fila-acordeon-contenido[b-1377p2cnp1] {
    border-top: var(--border-default);
    border-radius: 0;
}

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

/* Incidencias documentales de la fila desplegada, antes de sus Clientes: una línea por documento. */
.incidencias-fila-empresa[b-1377p2cnp1] {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin-bottom: var(--space-3);
}

/* Rótulos de la fila desplegada: cuántas incidencias hay y «Clientes», sin recuento. */
.titulo-incidencias-empresa[b-1377p2cnp1],
.titulo-clientes-empresa[b-1377p2cnp1] {
    display: block;
    margin-bottom: var(--space-2);
    font: var(--font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    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. */
.subcontrata360-copia[b-tvw8q3z94c]  .boton-copiar {
    padding: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    cursor: copy;
}

.subcontrata360-copia[b-tvw8q3z94c]  .boton-copiar:hover:not(:disabled) {
    background: none;
    text-decoration: underline;
}

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

.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.
*/
.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;
}

.trabajador360-centro-alta[b-hgzr18fi57] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.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 */
/*
  Celda «Trabajador» de la lista (rediseño de listados, fase 1): «Apellidos, Nombre» y, debajo,
  el documento de identidad en pequeño. La barra de filtros y el tinte de las filas son del
  patrón compartido (list-page.css); aquí solo va lo propio de esta pantalla.
*/
.celda-trabajador[b-pi8t7dq67p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.celda-trabajador-dni[b-pi8t7dq67p] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.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);
}
/* /Features/Usuarios/Pages/MiAvatar.razor.rz.scp.css */
.mi-emblema[b-ot7uyja2vg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.mi-emblema-vista[b-ot7uyja2vg] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* 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-rotulo[b-ot7uyja2vg] {
    font: var(--font-caption);
    color: var(--color-text-muted);
}

.mi-emblema-vista-nombre[b-ot7uyja2vg] {
    font: var(--font-label-md);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.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;
    font: var(--font-label-md);
    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);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    font: var(--font-body-md);
    color: var(--color-text);
    cursor: pointer;
}

.mi-emblema-opcion-tono[b-ot7uyja2vg] {
    padding-right: var(--space-3);
}

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

.mi-emblema-acciones[b-ot7uyja2vg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
/* /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);
}
/* /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-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);
}