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

/* /Components/Account/Pages/CambiarContrasena.razor.rz.scp.css */
.tarjeta-login[b-b9xhwl2sx8] {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.tarjeta-login h1[b-b9xhwl2sx8] {
    font: var(--font-heading-lg);
    color: var(--color-primary-500);
    text-align: center;
}

.subtitulo-login[b-b9xhwl2sx8] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
    margin-bottom: var(--space-6);
}

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

/*
  ::deep es obligatorio aquí: <InputText> es un componente hijo de Blazor,
  no una etiqueta escrita directamente en este archivo — el <input> que
  renderiza internamente no recibe el atributo de scope de CSS isolation de
  Login.razor. Sin ::deep este selector nunca matchea (bug real encontrado
  al verificar el rediseño: los inputs de login llevaban toda la vida del
  proyecto sin ningún estilo aplicado, con el tamaño nativo del navegador).
*/
.tarjeta-login[b-b9xhwl2sx8]  input {
    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);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

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

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

.alerta-login[b-b9xhwl2sx8] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

.boton-primario[b-b9xhwl2sx8] {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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);
}

.boton-primario:hover[b-b9xhwl2sx8] {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
}
/* /Components/Account/Pages/ConfigurarAutenticadorDosFactores.razor.rz.scp.css */
.tarjeta-2fa[b-8jaxp9w2l6] {
    max-width: 480px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.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] {
    background-color: var(--color-surface-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-family: monospace;
    word-break: break-all;
    margin: var(--space-2) 0;
}

.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] {
    color: var(--color-success-700);
    font-weight: 600;
}

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

.alerta-login[b-8jaxp9w2l6] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

.boton-primario[b-8jaxp9w2l6] {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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);
}

.boton-primario:hover[b-8jaxp9w2l6] {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
.tarjeta-login[b-8iq4f2palk] {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.tarjeta-login h1[b-8iq4f2palk] {
    font: var(--font-heading-lg);
    color: var(--color-primary-500);
    text-align: center;
}

.subtitulo-login[b-8iq4f2palk] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
    margin-bottom: var(--space-6);
}

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

/*
  ::deep es obligatorio aquí: <InputText> es un componente hijo de Blazor,
  no una etiqueta escrita directamente en este archivo — el <input> que
  renderiza internamente no recibe el atributo de scope de CSS isolation de
  Login.razor. Sin ::deep este selector nunca matchea (bug real encontrado
  al verificar el rediseño: los inputs de login llevaban toda la vida del
  proyecto sin ningún estilo aplicado, con el tamaño nativo del navegador).
*/
.tarjeta-login[b-8iq4f2palk]  input {
    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);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

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

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

.alerta-login[b-8iq4f2palk] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

.boton-primario[b-8iq4f2palk] {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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);
}

.boton-primario:hover[b-8iq4f2palk] {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
}

/* .boton-primario ya da tamaño/color — aquí solo lo necesario para que un
   <a> (no un <button>) se comporte igual: sin esto, "width: 100%" e "inline"
   (el display por defecto de <a>) dejan el enlace encogido al texto. */
.boton-microsoft[b-8iq4f2palk] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 0;
}

.separador-login[b-8iq4f2palk] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: var(--space-4) 0 0;
}
/* /Components/Account/Pages/LoginCon2fa.razor.rz.scp.css */
.tarjeta-login[b-ai1rea69d8] {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.tarjeta-login h1[b-ai1rea69d8] {
    font: var(--font-heading-lg);
    color: var(--color-primary-500);
    text-align: center;
}

.subtitulo-login[b-ai1rea69d8] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
    margin-bottom: var(--space-6);
}

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

/*
  ::deep es obligatorio aquí: <InputText> es un componente hijo de Blazor,
  no una etiqueta escrita directamente en este archivo — el <input> que
  renderiza internamente no recibe el atributo de scope de CSS isolation de
  Login.razor. Sin ::deep este selector nunca matchea (bug real encontrado
  al verificar el rediseño: los inputs de login llevaban toda la vida del
  proyecto sin ningún estilo aplicado, con el tamaño nativo del navegador).
*/
.tarjeta-login[b-ai1rea69d8]  input {
    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);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

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

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

.alerta-login[b-ai1rea69d8] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-2);
}

.boton-primario[b-ai1rea69d8] {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-6);
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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);
}

.boton-primario:hover[b-ai1rea69d8] {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
}
/* /Components/Account/Pages/PendienteDeRol.razor.rz.scp.css */
.tarjeta-login[b-st2gj23ckl] {
    width: 100%;
    max-width: 380px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.tarjeta-login h1[b-st2gj23ckl] {
    font: var(--font-heading-lg);
    color: var(--color-primary-500);
    text-align: center;
}

.subtitulo-login[b-st2gj23ckl] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
    margin-bottom: var(--space-6);
}

.mensaje-pendiente[b-st2gj23ckl] {
    text-align: center;
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin-bottom: var(--space-6);
}

.tarjeta-login form[b-st2gj23ckl] {
    margin: 0;
}

.boton-primario[b-st2gj23ckl] {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-md);
    border: none;
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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);
}

.boton-primario:hover[b-st2gj23ckl] {
    background-color: var(--color-primary-600);
    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: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

/*
  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;
    }
}
/* /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[b-eb9ltep7fw] {
    width: 100%;
    height: 100%;
    display: block;
}

.anillo-cumplimiento-pista[b-eb9ltep7fw] {
    fill: none;
    stroke: var(--color-neutral-300);
    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;
}

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

/* 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/Badge.razor.rz.scp.css */
.badge[b-8n8w8i80b3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-label-md);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

/* Densidad de fila (Centro 360 § 0.9) — solo métrica, el color no cambia. */
.badge-pequeno[b-8n8w8i80b3] {
    padding: 0 var(--space-2);
    font-size: 0.6875rem;
    line-height: 1.125rem;
}

.badge-neutro[b-8n8w8i80b3] {
    background-color: var(--color-surface-subtle);
    color: var(--color-neutral-700);
}

/* *-700, no *-500: el semáforo de vigencia documental es el patrón visual
   insignia del producto (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 docs/business/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);
}

.badge-advertencia[b-8n8w8i80b3] {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

.badge-peligro[b-8n8w8i80b3] {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
}

.badge-info[b-8n8w8i80b3] {
    background-color: var(--color-info-50);
    color: var(--color-info-500);
}
/* /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;
}
/* /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;
}

.boton-medio[b-vxro8r3ezt] {
    padding: 0.875rem 1.5rem; /* 14px 24px */
    min-height: 44px;
}

.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-primario[b-vxro8r3ezt] {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-neutral-0);
}

.boton-primario:not(:disabled):hover[b-vxro8r3ezt] {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    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.md § 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 (Railway) 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/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;
}
/* /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/CampoBuscarSelect.razor.rz.scp.css */
.campo[b-q0v1wy12jz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.campo label[b-q0v1wy12jz] {
    font: var(--font-label-md);
    color: var(--color-text);
}

.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/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[b-frkb28t5pp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.campo label[b-frkb28t5pp] {
    font: var(--font-label-md);
    color: var(--color-text);
}

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

.campo-mensaje-error[b-frkb28t5pp] {
    font: var(--font-body-sm);
    color: var(--color-danger-700);
}

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

/* 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;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
}

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

.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%;
    }
}
/* /Components/DesignSystem/EstadoCargando.razor.rz.scp.css */
.esqueleto-lista[b-21mdhtyl2z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

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

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

.estado-vacio-accion[b-h4h3wrmbll] {
    margin-top: var(--space-4);
}
/* /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;
}
/* /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-primary-500);
}

.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-primary-500);
    background: var(--color-primary-500);
    color: white;
}

.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/MarcaProcedencia.razor.rz.scp.css */
/*
    Marca no textual: cuadrado pequeño con tinte de sistema. El indicador usa
    --color-system-text (5.16: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] {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: var(--space-2) var(--space-3);
}

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

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

.menu-acciones-item[b-bltny66uqc] {
    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-item:hover[b-bltny66uqc] {
    background-color: var(--color-surface-hover);
}

.menu-acciones-item-destructivo[b-bltny66uqc] {
    color: var(--color-danger-700);
}
/* /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;
}

.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;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
}

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

.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%;
    }
}
/* /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-boton[b-fb0yhu9p6s] {
    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);
}

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

.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
   única señal de que es interactivo un subrayado punteado al pasar el
   cursor — no un botón visible, la fecha sigue siendo el protagonista. */
.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:focus-visible[b-9r26jsleid] {
    text-decoration-color: currentColor;
}

.texto-fecha-copiable:focus-visible[b-9r26jsleid] {
    outline: var(--border-focus);
    outline-offset: 2px;
}
/* /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;
}

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

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

/* /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: var(--color-neutral-400);
    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/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/MainLayout.razor.rz.scp.css */
.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;
}

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

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

.barra-superior[b-2q0c1wgaym] {
    height: var(--navbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    border-bottom: var(--border-default);
    background-color: var(--color-surface);
}

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

.menu-usuario-nombre[b-2q0c1wgaym] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.boton-cerrar-sesion[b-2q0c1wgaym] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    cursor: pointer;
    font: var(--font-label-md);
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.boton-cerrar-sesion:hover[b-2q0c1wgaym] {
    background-color: var(--color-surface-hover);
}

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

    /*
      Navbar compacta en tablet/móvil: menos altura y padding lateral, y se
      quita todo lo que no sea imprescindible (nombre de usuario en texto,
      etiquetas de los botones) para dejar sitio al hamburguesa
      (NavegacionMovil) + buscador + acciones — mismo punto de corte que
      oculta ".barra-lateral" arriba.
    */
    .barra-superior[b-2q0c1wgaym] {
        height: 56px;
        padding: 0 var(--space-4);
        gap: var(--space-2);
    }

    .menu-usuario[b-2q0c1wgaym] {
        gap: var(--space-2);
    }

    .menu-usuario-nombre[b-2q0c1wgaym] {
        display: none;
    }

    .boton-cerrar-sesion[b-2q0c1wgaym] {
        padding: var(--space-2);
    }

    .boton-cerrar-sesion-texto[b-2q0c1wgaym] {
        display: 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 */
.nav-principal[b-cfpktnzhnk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
}

/*
    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);
    opacity: 0.7;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.nav-grupo-titulo:hover[b-cfpktnzhnk] {
    opacity: 1;
}

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

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

.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 {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-100);
    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-primary-100);
    border-color: var(--color-primary-100);
}
/* /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-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    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-primary-600);
        border-color: var(--color-primary-600);
    }

    #components-reconnect-modal button:active[b-6ipeu9bfwg] {
        background-color: var(--color-primary-500);
        border-color: var(--color-primary-500);
    }

/*
    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-cliente-activo[b-noeu2g23bj] {
    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-cliente-activo:focus-visible[b-noeu2g23bj] {
    outline: var(--border-focus);
    outline-offset: 1px;
}
/* /Components/Layout/SelectorTema.razor.rz.scp.css */
.selector-tema[b-1cxwfvgwf2] {
    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-tema:focus-visible[b-1cxwfvgwf2] {
    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. */
.aviso-sesion-soporte[b-4dny85a18u] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-warning-500);
    color: #1a1206;
    font: var(--font-body-sm);
    font-weight: 600;
    text-align: center;
}
/* /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-cerrar[b-3oqxopvmxs] {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    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);
}
/* /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/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] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    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-primary-500);
    color: var(--color-neutral-0);
}

.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.18: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-primary-500);
    color: var(--color-neutral-0);
    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;
}
/* /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-primary-500);
    color: var(--color-neutral-0);
    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/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);
}
/* /Features/BusquedaGlobal/BotonBuscadorGlobal.razor.rz.scp.css */
.boton-buscador-global[b-ov5479n8uj] {
    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.18: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] {
    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);
    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] {
        padding: var(--space-2);
    }

    .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: 12vh;
    z-index: 1300;
}

.buscador-panel[b-ru0wsrc5mu] {
    width: 100%;
    max-width: 560px;
    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;
    }
}

.buscador-input[b-ru0wsrc5mu] {
    border: none;
    border-bottom: var(--border-default);
    padding: var(--space-4) var(--space-5);
    font: var(--font-body-lg);
    color: var(--color-text);
    background: transparent;
}

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

.buscador-categoria h3[b-ru0wsrc5mu] {
    padding: var(--space-2) var(--space-5);
    font: var(--font-label-md);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.buscador-item[b-ru0wsrc5mu] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    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);
}

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

.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);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.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;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.calendario-mes-actual[b-ta8pmdoxms] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.calendario-titulo-mes[b-ta8pmdoxms] {
    font: var(--font-heading-md);
    text-transform: capitalize;
    min-width: 10ch;
    text-align: center;
}

.enlace-hoy[b-ta8pmdoxms] {
    background: none;
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1.18:1). */
    border: var(--border-control);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.enlace-hoy:hover[b-ta8pmdoxms] {
    background-color: var(--color-surface-hover);
}

/*
  H3 (docs/ux-audit/10-bandeja-alertas-calendario.md): estas tres reglas
  usaban --color-neutral-50, un token de paleta crudo que ningún tema
  redefine (a diferencia de los tokens 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);
    gap: 1px;
    background-color: var(--color-bg);
    border: var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.calendario-cabecera-dia[b-ta8pmdoxms] {
    background-color: var(--color-bg);
    padding: var(--space-2);
    text-align: center;
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

.calendario-celda[b-ta8pmdoxms] {
    background-color: var(--color-surface);
    min-height: 84px;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.calendario-celda-vacia[b-ta8pmdoxms] {
    background-color: var(--color-bg);
}

.calendario-dia-numero[b-ta8pmdoxms] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.calendario-celda-hoy .calendario-dia-numero[b-ta8pmdoxms] {
    color: var(--color-primary-500);
    font-weight: 700;
}

.calendario-celda-con-datos[b-ta8pmdoxms] {
    cursor: pointer;
}

.calendario-celda-con-datos:hover[b-ta8pmdoxms] {
    background-color: var(--color-surface-hover);
}

.calendario-indicadores[b-ta8pmdoxms] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-self: flex-start;
}

.calendario-subtitulo-modal[b-ta8pmdoxms] {
    font: var(--font-heading-sm);
    margin: var(--space-5) 0 var(--space-3);
}

.calendario-subtitulo-modal:first-child[b-ta8pmdoxms] {
    margin-top: 0;
}

.calendario-tabla-modal-contenedor[b-ta8pmdoxms] {
    overflow-x: auto;
}

.calendario-fila-secundaria[b-ta8pmdoxms] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/* Leyenda de colores (H3) — mismo criterio que .barra-comparativa-leyenda de Dashboard.razor.css. */
.calendario-leyenda[b-ta8pmdoxms] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.calendario-leyenda-item[b-ta8pmdoxms] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.calendario-leyenda-punto[b-ta8pmdoxms] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.calendario-leyenda-punto-peligro[b-ta8pmdoxms] {
    background-color: var(--color-danger-700);
}

.calendario-leyenda-punto-advertencia[b-ta8pmdoxms] {
    background-color: var(--color-warning-700);
}

.calendario-leyenda-punto-exito[b-ta8pmdoxms] {
    background-color: var(--color-success-700);
}

.calendario-leyenda-punto-info[b-ta8pmdoxms] {
    background-color: var(--color-info-500);
}
/* /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/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);
}
/* /Features/Comunicaciones/Components/AccionCenter.razor.rz.scp.css */
/* Action Center (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-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] {
    border: none;
    background: none;
    padding: 0;
    margin-left: var(--space-1);
    line-height: 1;
    font-size: 1rem;
    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);
}

.composer-boton-adjuntar input[type="file"][b-xrp4mp5ohe] {
    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.18: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/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 (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-primary-500);
}

.revision-stepper-actual .revision-stepper-circulo[b-e5m8z5uef7] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-500);
    color: #fff;
}

.revision-stepper-completado .revision-stepper-circulo[b-e5m8z5uef7] {
    border-color: var(--color-success-700);
    background-color: var(--color-success-700);
    color: #fff;
}

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

/* --- Toolbar global del workspace (docs/COMUNICACIONES.md § 11) --- */

.bandeja-toolbar[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: var(--border-default);
}

.bandeja-toolbar-titulo[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font: var(--font-heading-md);
    color: var(--color-text);
}

.bandeja-toolbar-icono[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
    flex-shrink: 0;
}

.bandeja-toolbar-acciones[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bandeja-toolbar-enlace[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-default);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.bandeja-toolbar-enlace:hover[b-bg4yx9j8w2] {
    border-color: var(--color-primary-300);
    color: var(--color-primary-600);
    background-color: var(--color-primary-50);
}

/* --- Layout de tres columnas (Inbox / Conversation / Context) --- */

.bandeja-layout[b-bg4yx9j8w2] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    height: calc(100vh - 190px);
    min-height: 480px;
}

.bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
    grid-template-columns: 320px minmax(0, 1fr) 300px;
}

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

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

.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-primary-500);
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
}

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

.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;
    justify-content: space-between;
    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);
    text-align: left;
}

.bandeja-grupo-cabecera:hover[b-bg4yx9j8w2] {
    background-color: var(--color-surface-hover);
}

.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-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-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);
    color: var(--color-text);
    flex-shrink: 0;
    max-width: 45%;
    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);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bandeja-lista[b-bg4yx9j8w2]  .bandeja-fila-preview {
    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 h2[b-bg4yx9j8w2] {
    margin: 0 0 var(--space-2);
    font: var(--font-heading-sm);
}

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

/* --- Adaptive Layout (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-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
        grid-template-columns: 280px minmax(0, 1fr) 280px;
    }
}

@media (max-width: 1279px) {
    .bandeja-layout[b-bg4yx9j8w2],
    .bandeja-layout:has(.bandeja-cliente)[b-bg4yx9j8w2] {
        grid-template-columns: 260px 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;
    }
}
/* /Features/Comunicaciones/Pages/Buzon.razor.rz.scp.css */
.buzon-contenedor[b-zf5dxjq8sc] {
    max-width: none;
}

.descripcion-buzon[b-zf5dxjq8sc] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    max-width: 80ch;
    margin-bottom: var(--space-4);
}

.buzon-selector-conexion[b-zf5dxjq8sc] {
    max-width: 480px;
    margin-bottom: var(--space-4);
}

.buzon-layout[b-zf5dxjq8sc] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    height: calc(100vh - 320px);
    min-height: 420px;
}

.buzon-columna[b-zf5dxjq8sc] {
    height: 100%;
    overflow-y: auto;
    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] {
    padding: var(--space-4);
    overflow-x: auto;
}

.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);
    padding: var(--space-2) var(--space-3);
    border: none;
    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);
    color: var(--color-primary-500);
    font-weight: 600;
}

.buzon-paginador[b-zf5dxjq8sc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: 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;
        height: auto;
    }

    .buzon-columna[b-zf5dxjq8sc] {
        height: auto;
        max-height: 60vh;
    }
}
/* /Features/Comunicaciones/Pages/BuzonPersonal.razor.rz.scp.css */
.buzon-personal-cuerpo[b-ggzrcfr6yq] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-hover);
    font: var(--font-body-md);
    overflow-x: auto;
}
/* /Features/Configuracion/Pages/Configuracion.razor.rz.scp.css */
.tarjeta-configuracion[b-iujymdj9l2] {
    max-width: 480px;
}

.descripcion-configuracion[b-iujymdj9l2] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-bottom: var(--space-4);
}

.acciones-formulario[b-iujymdj9l2] {
    margin-top: var(--space-4);
}
/* /Features/Dashboard/Pages/Dashboard.razor.rz.scp.css */
/*
  La cabecera, las dos rejillas de KPI y .fila-clicable/.enlace-ver-todas
  viven en wwwroot/css/dashboard.css (global) porque Visión de cartera
  (ver ROADMAP.md Fase 51) las reutiliza tal cual y el aislamiento de CSS
  de Blazor no cruza entre componentes. Aquí solo queda lo exclusivo del
  Home operativo: la fila que combina el anillo de cumplimiento con los
  KPIs secundarios (docs/blueprints/OPERATIONAL-HOME.md § 3).
*/
.dashboard-resumen[b-3crjmoepua] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}

.dashboard-resumen-anillo[b-3crjmoepua] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.dashboard-resumen-anillo-etiqueta[b-3crjmoepua] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-align: center;
}

.dashboard-resumen .rejilla-kpis-secundarios[b-3crjmoepua] {
    flex: 1;
    min-width: 320px;
}

/*
  Pulso del equipo (DDL-071): la cifra semanal lleva jerarquía propia y el
  detalle usa el mismo tono atenuado que la leyenda de la barra comparativa —
  es contexto, no dato principal.
*/
.pulso-equipo-cifra[b-3crjmoepua] {
    margin: 0;
    font: var(--font-heading-sm);
    color: var(--color-text);
}

.pulso-equipo-detalle[b-3crjmoepua] {
    margin: var(--space-2) 0 0;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/*
  Reclamado y sin respuesta: misma familia visual que las filas de la bandeja
  —fondo de superficie, borde suave— pero sin el tratamiento de estado del
  semáforo. Aquí no hay incumplimiento que señalar: la documentación puede
  estar perfectamente al día y ser el cliente quien no ha contestado todavía.
*/
.dashboard-sin-respuesta-fila[b-3crjmoepua] {
    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);
}

.dashboard-sin-respuesta-cliente[b-3crjmoepua] {
    display: block;
    font: var(--font-label);
    color: var(--color-text);
}

.dashboard-sin-respuesta-detalle[b-3crjmoepua] {
    display: block;
    margin-top: var(--space-1);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}
/* /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" (H6, docs/ux-audit/01-dashboards.md),
   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;
}

/*
  Tema del DS en ApexCharts (H5, docs/ux-audit/01-dashboards.md): la
  librería pinta la leyenda del donut y las etiquetas de los ejes con sus
  colores por defecto (gris oscuro fijo), ilegibles sobre el fondo oscuro —
  DashboardEjecutivo.razor no le pasaba ninguna opción de tema. ApexCharts
  fija esos colores inline al renderizar (JS, no Razor), así que `!important`
  es la única forma de que los tokens del DS ganen sin reescribir el motor
  de temas de la librería. `::deep` porque ese DOM lo inserta ApexCharts.js
  dentro del contenedor, no el propio árbol de Razor con el scope de Blazor.
*/
[b-awsv86vnpa] .apexcharts-legend-text {
    color: var(--color-text) !important;
}

[b-awsv86vnpa] .apexcharts-text,
[b-awsv86vnpa] .apexcharts-yaxis-label tspan,
[b-awsv86vnpa] .apexcharts-xaxis-label tspan,
[b-awsv86vnpa] .apexcharts-datalabel-label,
[b-awsv86vnpa] .apexcharts-datalabel-value {
    fill: var(--color-text) !important;
}

/*
  Barra comparativa "gestiones automáticas vs manuales" — dos segmentos
  proporcionales al %, sin librería de gráficos. Migrada desde el Dashboard
  actual (docs/blueprints/OPERATIONAL-HOME.md § 7): 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;
}

/* 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/Pages/Delegaciones.razor.rz.scp.css */
.cabecera-delegaciones[b-ejr3ad9d0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}

.descripcion-delegaciones[b-ejr3ad9d0k] {
    max-width: 70ch;
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.tarjeta-delegacion[b-ejr3ad9d0k] {
    margin-bottom: var(--space-4);
}

.delegacion-cabecera[b-ejr3ad9d0k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.delegacion-titulo[b-ejr3ad9d0k] {
    margin: 0;
    font: var(--font-heading-sm);
}

.delegacion-fecha[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.delegacion-acciones[b-ejr3ad9d0k] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.delegacion-sin-operadores[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.aviso-workspace-ajeno[b-ejr3ad9d0k] {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--color-warning-500);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.aviso-revocacion[b-ejr3ad9d0k] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}
/* /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/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/SubidaMasiva.razor.rz.scp.css */
.descripcion-subida-masiva[b-kccytzsytw] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    max-width: 70ch;
    margin-bottom: var(--space-4);
}

.resumen-subida-masiva[b-kccytzsytw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-4) 0;
}

.lista-items-subida-masiva[b-kccytzsytw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-subida-masiva[b-kccytzsytw] {
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    padding: var(--space-3);
}

.item-subida-masiva-fila[b-kccytzsytw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.miniatura-subida-masiva[b-kccytzsytw] {
    width: 56px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: var(--border-default);
    flex-shrink: 0;
}

.miniatura-subida-masiva-vacia[b-kccytzsytw] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background-color: var(--color-surface-hover);
}

.item-subida-masiva-info[b-kccytzsytw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 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] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.item-subida-masiva-error[b-kccytzsytw] {
    color: var(--color-danger-700);
    font: var(--font-body-sm);
}

.item-subida-masiva-acciones[b-kccytzsytw] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.item-subida-masiva-confirmacion[b-kccytzsytw] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-default);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.item-subida-masiva-formulario[b-kccytzsytw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 480px;
}
/* /Features/Facturacion/Pages/Facturacion.razor.rz.scp.css */
.descripcion-pagina[b-sxls8o06j1] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width: 65ch;
}

.bloque-selector-cliente[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    max-width: 360px;
}

.campo-selector[b-sxls8o06j1] {
    width: 100%;
}

/* Pestañas */
.pestanas-nav[b-sxls8o06j1] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}

.pestana-btn[b-sxls8o06j1] {
    padding: var(--space-2) var(--space-4);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font: var(--font-body-md);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}

.pestana-btn:hover[b-sxls8o06j1] {
    color: var(--color-text);
}

.pestana-activa[b-sxls8o06j1] {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

/* Tabla de tarifas */
.tabla-facturacion .col-precio[b-sxls8o06j1] {
    width: 180px;
    text-align: right;
}

.tabla-facturacion .col-moneda[b-sxls8o06j1] {
    width: 80px;
    text-align: center;
}

.tabla-facturacion .col-acciones[b-sxls8o06j1] {
    width: 140px;
    text-align: right;
}

.campo-precio[b-sxls8o06j1] {
    width: 120px;
}

.campo-moneda[b-sxls8o06j1] {
    width: 60px;
    text-align: center;
}

.fila-edicion[b-sxls8o06j1] {
    background: var(--color-surface-subtle);
}

/* Formulario nueva tarifa */
.rejilla-formulario[b-sxls8o06j1] {
    display: grid;
    grid-template-columns: 1fr 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] {
    margin-top: var(--space-6);
}

/* Filtros resumen mensual */
.filtros-resumen[b-sxls8o06j1] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.campo-filtro[b-sxls8o06j1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.campo-anyo[b-sxls8o06j1] {
    width: 100px;
}

/* Tabla resumen mensual */
.tabla-resumen .col-numero[b-sxls8o06j1] {
    text-align: right;
    width: 160px;
}

.fila-total td[b-sxls8o06j1] {
    font-weight: 600;
    border-top: 2px solid var(--color-border);
}

.total-importe[b-sxls8o06j1] {
    color: var(--color-primary-500);
    font: var(--font-body-lg);
}

.nota-resumen[b-sxls8o06j1] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-top: var(--space-4);
}

/* 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;
    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-bottom: var(--space-4);
}
/* /Features/GestionRoles/Pages/Roles.razor.rz.scp.css */
.pestanas-roles[b-mh215rmgii] {
    display: flex;
    gap: var(--space-2);
    border-bottom: var(--border-default);
    margin-bottom: var(--space-5);
}

.pestana-rol[b-mh215rmgii] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-3) var(--space-1);
    margin-bottom: -1px;
    font: var(--font-label-md);
    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);
}

.descripcion-roles[b-mh215rmgii] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin-bottom: var(--space-5);
    max-width: 640px;
}

.rejilla-roles[b-mh215rmgii] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.descripcion-rol[b-mh215rmgii] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-bottom: var(--space-3);
}

.contador-usuarios[b-mh215rmgii] {
    font: var(--font-label-md);
}
/* /Features/Integraciones/Pages/Conexiones.razor.rz.scp.css */
.titulo-seccion-lineas[b-7qsj89xf4t] {
    margin-top: 2.5rem;
    font-size: 1.15rem;
}

.texto-secundario[b-7qsj89xf4t] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.opcion-pool-linea[b-7qsj89xf4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-weight: normal;
}
/* /Features/Proyectos/Pages/Proyectos.razor.rz.scp.css */
.descripcion-pagina[b-xdresx1702] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width: 65ch;
}

.bloque-selector-cliente[b-xdresx1702] {
    max-width: 360px;
    margin-bottom: var(--space-8);
}

.acciones-seccion[b-xdresx1702] {
    margin-bottom: var(--space-6);
}

/* Tabla de proyectos */
.tabla-proyectos .col-acciones[b-xdresx1702],
.tabla-tecnicos .col-acciones[b-xdresx1702] {
    width: 160px;
    text-align: right;
}

.fila-seleccionada td[b-xdresx1702] {
    background: var(--color-surface-subtle);
}

/* Formularios (nuevo proyecto, edición, alta de técnico) */
.rejilla-formulario[b-xdresx1702] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
    .rejilla-formulario[b-xdresx1702] {
        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-xdresx1702] {
        flex-direction: column;
    }

    .acciones-formulario .boton[b-xdresx1702] {
        width: 100%;
    }
}

.acciones-formulario[b-xdresx1702] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* --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 sube tambien a -700 y las dos reglas colapsan en el
   mismo valor. La escala del semaforo solo tiene -50, -500 y -700: no hay un
   tercer tono con el que distinguir el hover sin inventarlo. La regla :hover
   se retira por ser un no-op; la afordancia de hover del enlace destructivo
   queda registrada como ODM-12. */
.enlace-peligro[b-xdresx1702] {
    color: var(--color-danger-700);
}

.aviso-error[b-xdresx1702] {
    color: var(--color-danger-700);
    font: var(--font-body-md);
    margin-bottom: var(--space-4);
}
/* /Features/Reportes/Pages/Reportes.razor.rz.scp.css */
.descripcion-reporte[b-c4xfr06n1d] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin-bottom: var(--space-5);
    max-width: 640px;
}
/* /Features/Retencion/Pages/Retencion.razor.rz.scp.css */
.retencion-cabecera[b-jobsqkck1w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}

.descripcion-retencion[b-jobsqkck1w] {
    max-width: 75ch;
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.celda-acciones-purga[b-jobsqkck1w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

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

.aviso-purga[b-jobsqkck1w] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}
/* /Features/Subcontratas/Components/SubcontrataWorkspacePanel.razor.rz.scp.css */
.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;
}
/* /Features/Trabajadores/Pages/Trabajadores.razor.rz.scp.css */
.barra-filtros[b-pi8t7dq67p] {
    max-width: 640px;
}

.filtro-empresa[b-pi8t7dq67p] {
    flex: 0 0 240px;
}

.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/Vehiculos/Pages/Vehiculos.razor.rz.scp.css */
.barra-filtros[b-gopk2uo8cx] {
    max-width: 640px;
}

.filtro-empresa[b-gopk2uo8cx] {
    flex: 0 0 240px;
}
/* /Features/VisionCartera/Pages/VisionCartera.razor.rz.scp.css */
/* Botón de submit que se lee como el enlace que era antes de que la acción
   pasara a POST (ver VisionCartera.razor). */
.accion-ver-cliente[b-vh7cslx1ka] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary-500);
    font: var(--font-body-sm);
    white-space: nowrap;
    cursor: pointer;
}

.accion-ver-cliente:hover[b-vh7cslx1ka] {
    text-decoration: underline;
}

.tarjeta-clientes-riesgo[b-vh7cslx1ka] {
    margin-top: var(--space-5);
}
/* /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);
}