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

.enlace-olvide-contrasena[b-8iq4f2palk] {
    display: block;
    text-align: center;
    font: var(--font-body-sm);
    font-weight: 600;
    margin-top: var(--space-4);
}
/* /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/OlvideContrasena.razor.rz.scp.css */
.tarjeta-login[b-56ttb2l7ue] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tarjeta-login h1[b-56ttb2l7ue] {
    font: var(--font-heading-lg);
    color: var(--color-primary-500);
    text-align: center;
    margin: 0 0 var(--space-4);
}

.subtitulo-login[b-56ttb2l7ue] {
    font: var(--font-heading-sm);
    margin: 0;
}

.texto-explicativo-login[b-56ttb2l7ue] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0 0 var(--space-2);
}

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

.tarjeta-login[b-56ttb2l7ue]  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);
}

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

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

.boton-primario[b-56ttb2l7ue] {
    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;
}

.boton-primario:hover:not(:disabled)[b-56ttb2l7ue] {
    background-color: var(--color-primary-600);
}

.boton-primario:disabled[b-56ttb2l7ue] {
    opacity: .7;
    cursor: not-allowed;
}

.confirmacion-envio-login[b-56ttb2l7ue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.icono-exito-login[b-56ttb2l7ue] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-success-50);
    border: 1px solid var(--color-success-500);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.texto-reenvio-login[b-56ttb2l7ue] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: 0;
}

.enlace-boton-login[b-56ttb2l7ue] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary-500);
    font: var(--font-body-sm);
    font-weight: 600;
    cursor: pointer;
}

.enlace-boton-login:disabled[b-56ttb2l7ue] {
    cursor: not-allowed;
    opacity: .6;
}

.enlace-volver-login[b-56ttb2l7ue] {
    display: block;
    text-align: center;
    font: var(--font-body-sm);
    font-weight: 600;
    margin-top: var(--space-4);
}
/* /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/Account/Pages/RestablecerContrasena.razor.rz.scp.css */
.tarjeta-login[b-n70icdb6zg] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

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

.subtitulo-login[b-n70icdb6zg] {
    font: var(--font-heading-sm);
    margin: 0;
}

.texto-explicativo-login[b-n70icdb6zg] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0 0 var(--space-2);
}

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

.tarjeta-login[b-n70icdb6zg]  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);
}

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

.alerta-login[b-n70icdb6zg] {
    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);
}

.mensaje-error-campo-login[b-n70icdb6zg] {
    display: block;
    color: var(--color-danger-700);
    font: var(--font-body-sm);
    margin-top: var(--space-1);
}

.requisitos-contrasena[b-n70icdb6zg] {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.requisito-contrasena[b-n70icdb6zg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.requisito-contrasena-ok[b-n70icdb6zg] {
    color: var(--color-success-700);
}

.marca-requisito-contrasena[b-n70icdb6zg] {
    width: 14px;
    flex: none;
    text-align: center;
}

.boton-primario[b-n70icdb6zg] {
    display: block;
    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;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}

.boton-primario:hover:not(:disabled)[b-n70icdb6zg] {
    background-color: var(--color-primary-600);
}

.boton-primario:disabled[b-n70icdb6zg] {
    opacity: .7;
    cursor: not-allowed;
}

.confirmacion-envio-login[b-n70icdb6zg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.icono-exito-login[b-n70icdb6zg] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-success-50);
    border: 1px solid var(--color-success-500);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
/* /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-grande[b-eb9ltep7fw] {
    width: 180px;
    height: 180px;
}

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

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

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

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

.anillo-cumplimiento-cabecera .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    font-size: 20px;
    letter-spacing: -0.01em;
}

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

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

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

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

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

/* Sin universo (Porcentaje null): "—" en muted, sin aro — nunca 0%/100%. */
.anillo-cumplimiento-sin-universo .anillo-cumplimiento-texto[b-eb9ltep7fw] {
    position: static;
    font-weight: 400;
    color: var(--color-text-muted);
}
/* /Components/DesignSystem/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-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-input[b-frkb28t5pp] {
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-md);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

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

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

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

/* iOS hace zoom automático al enfocar un input con font-size < 16px — el
   14px de --font-body-md es ilegible como motivo para forzar zoom en cada
   campo del formulario en un iPhone. Solo el tamaño de fuente, nada más
   cambia (min-height ya era 48px). */
@media (max-width: 767px) {
    .campo-input[b-frkb28t5pp] {
        font-size: 1rem;
    }
}
/* /Components/DesignSystem/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);
}

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

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

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

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

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

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

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

/* Sin sombra ni realce de hover: --shadow-overlay tiene un unico uso
   permitido, el nivel Overlay (06 § 5), y una tarjeta metrica no lo es
   (ODM-06, resuelto). El cursor ya senala que es interactiva. */
.tarjeta-metrica-clicable[b-v9lapjikil] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* /Components/DesignSystem/TextoFechaCopiable.razor.rz.scp.css */
/* Reset de botón: se ve y se comporta como el texto que envuelve, con la
   ú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/SelectorVistaVocabulario.razor.rz.scp.css */
.selector-vista-vocabulario[b-pkzwshbur7] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--border-control);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.selector-vista-vocabulario:focus-visible[b-pkzwshbur7] {
    outline: var(--border-focus);
    outline-offset: 1px;
}
/* /Components/Layout/TrazaSoporte.razor.rz.scp.css */
/* Franja permanente durante una sesión de soporte. Deliberadamente visible y
   no un badge discreto: quien opera datos de otra organización tiene que
   verlo sin buscarlo, y saber que queda registrado. */
.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-header-acciones[b-3oqxopvmxs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.workspace-copiar-enlace[b-3oqxopvmxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.workspace-copiar-enlace:hover[b-3oqxopvmxs] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.workspace-copiar-enlace:focus-visible[b-3oqxopvmxs] {
    outline: var(--border-focus);
}

.workspace-cerrar[b-3oqxopvmxs] {
    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/Bandeja/Components/GrupoCola.razor.rz.scp.css */
.grupo-cola[b-skh62uz786] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
}

.grupo-cola-cabecera[b-skh62uz786] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family);
    color: inherit;
}

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

.grupo-cola-chevron[b-skh62uz786] {
    flex: none;
    display: flex;
    color: var(--color-text-muted);
    transition: transform var(--motion-base) var(--ease-standard);
}

.grupo-cola-chevron-abierta[b-skh62uz786] {
    transform: rotate(180deg);
}

.grupo-cola-info[b-skh62uz786] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.grupo-cola-titulo[b-skh62uz786] {
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.grupo-cola-resumen[b-skh62uz786] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.grupo-cola-badges[b-skh62uz786] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.grupo-cola-contenido[b-skh62uz786] {
    padding: 0 var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    border-top: var(--border-default);
    padding-top: var(--space-1);
}

/*
  Segundo nivel de agrupación (Empresa contratista → Trabajador en
  vocabulario Consultora; solo Trabajador en ClienteDirecto/"empresa final")
  dentro del grupo por Cliente — ver el parámetro AgruparPorEmpresa del
  .razor. Empresa marca más (es el eje de trabajo real del gestor de una
  Consultora, DDL-072); Trabajador es un subtítulo más discreto, siempre
  presente porque es el nivel que "empresa final" necesita solo.
*/
.grupo-cola-subcabecera[b-skh62uz786] {
    padding: var(--space-3) 0 var(--space-1);
}

.grupo-cola-subcabecera-empresa[b-skh62uz786] {
    padding-left: var(--space-4);
    font: var(--font-body-md);
    font-weight: 600;
    color: var(--color-text);
}

.grupo-cola-subcabecera-empresa:first-child[b-skh62uz786] {
    padding-top: var(--space-1);
}

.grupo-cola-subcabecera-trabajador[b-skh62uz786] {
    padding-left: var(--space-6);
    font: var(--font-label-md);
    color: var(--color-text-muted);
}

/* Fila compacta (mockup Inicio TALVEG): título · fecha · badge · enlace, sin icono ni tarjeta propia — indentada bajo la subcabecera de trabajador. */
.grupo-cola-fila-compacta[b-skh62uz786] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-2) 0;
    padding-left: var(--space-8);
    border-bottom: var(--border-default);
}

.grupo-cola-fila-compacta:last-child[b-skh62uz786] {
    border-bottom: 0;
}

.grupo-cola-fila-compacta-titulo[b-skh62uz786] {
    flex: 1;
    min-width: 0;
    font: var(--font-body-md);
}

.grupo-cola-fila-compacta-fecha[b-skh62uz786] {
    flex: none;
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.grupo-cola-fila-compacta-accion[b-skh62uz786] {
    flex: none;
    font: var(--font-label-md);
    font-size: 0.8125rem;
}
/* /Features/Bandeja/Pages/Bandeja.razor.rz.scp.css */
/*
  Cabecera + barra de chips/orden (mockup "Mi trabajo TALVEG"): reemplaza el
  <select> de tipo por chips clicables con recuento inline, más el toggle
  Impacto/Fecha — traducción 1:1 de los estilos inline del .dc.html.
*/
.bandeja-cabecera[b-o8kk2fm02h] {
    margin-bottom: var(--space-5);
}

.bandeja-barra[b-o8kk2fm02h] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.bandeja-chips[b-o8kk2fm02h] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.bandeja-chip[b-o8kk2fm02h] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    border: var(--border-default);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--font-label-md);
    font-size: 0.8125rem;
    cursor: pointer;
}

.bandeja-chip:hover[b-o8kk2fm02h] {
    border-color: var(--color-border-strong);
}

.bandeja-chip-cuenta[b-o8kk2fm02h] {
    font-weight: 500;
    color: var(--color-text-muted);
}

.bandeja-chip-activo[b-o8kk2fm02h] {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-surface);
}

.bandeja-chip-activo .bandeja-chip-cuenta[b-o8kk2fm02h] {
    color: rgba(255, 255, 255, 0.8);
}

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

.bandeja-orden-etiqueta[b-o8kk2fm02h] {
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bandeja-orden-grupo[b-o8kk2fm02h] {
    display: inline-flex;
    border: var(--border-control);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bandeja-orden-boton[b-o8kk2fm02h] {
    height: 36px;
    padding: 0 var(--space-4);
    border: 0;
    background: var(--color-surface);
    color: var(--color-primary-500);
    font: var(--font-label-md);
    font-size: 0.8125rem;
    cursor: pointer;
}

.bandeja-orden-boton + .bandeja-orden-boton[b-o8kk2fm02h] {
    border-left: var(--border-control);
}

.bandeja-orden-boton-activo[b-o8kk2fm02h] {
    background: var(--color-primary-500);
    color: var(--color-surface);
}
/* /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: 96px;
    z-index: 1300;
}

.buscador-panel[b-ru0wsrc5mu] {
    width: 100%;
    max-width: 640px;
    max-height: 60vh;
    background-color: var(--color-overlay);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: entrar-buscador-b-ru0wsrc5mu var(--motion-transition) var(--ease-fluid);
}

@keyframes entrar-buscador-b-ru0wsrc5mu {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .buscador-panel[b-ru0wsrc5mu] {
        animation: none;
    }
}

.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-grupo + .buscador-grupo[b-ru0wsrc5mu] {
    border-top: var(--border-default);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

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

.buscador-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: center;
    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 .icono[b-ru0wsrc5mu] {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.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/Centros/Pages/CentroDetalle.razor.rz.scp.css */
/*
  Cabecera de entidad de Centro 360 (Parte XVI PROMPT 13): anillo + identidad
  + acciones en una fila, igual que el mockup — a diferencia de la fila de
  /centros (lámina L3), aquí hay una sola entidad, así que el anillo puede
  ser grande sin competir por espacio con una lista.
*/
.centro360-cabecera[b-r4hi6v07bu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: var(--border-default);
}

.centro360-identidad[b-r4hi6v07bu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.centro360-titulo[b-r4hi6v07bu] {
    font: var(--font-heading-lg);
    color: var(--color-text);
    margin: 0;
}

.centro360-meta[b-r4hi6v07bu] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
    margin: 0;
}

.centro360-meta .enlace-nombre-fila[b-r4hi6v07bu] {
    font: inherit;
}

.centro360-indicadores[b-r4hi6v07bu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.centro360-acciones[b-r4hi6v07bu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Cuerpo: dos ámbitos (principal) + barra lateral de contexto — máximo 3 niveles centro→sujeto→documento, el mismo límite que ya respeta AcordeonAsignacionesCentro. */
.centro360-cuerpo[b-r4hi6v07bu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
    align-items: start;
}

.centro360-principal[b-r4hi6v07bu] {
    min-width: 0;
}

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

.centro360-tarjeta-lateral[b-r4hi6v07bu] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.centro360-tarjeta-lateral-cabecera[b-r4hi6v07bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.centro360-tarjeta-lateral-cabecera h2[b-r4hi6v07bu] {
    font: var(--font-heading-sm);
    margin: 0;
}

.centro360-lista-canales[b-r4hi6v07bu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.centro360-lista-canales li[b-r4hi6v07bu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-3);
    border-top: var(--border-default);
}

.centro360-lista-canales li:first-child[b-r4hi6v07bu] {
    padding-top: 0;
    border-top: none;
}

.centro360-canal-etiqueta[b-r4hi6v07bu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-label-md);
    color: var(--color-text);
}

.centro360-canal-detalle[b-r4hi6v07bu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-caption);
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .centro360-cabecera[b-r4hi6v07bu] {
        flex-wrap: wrap;
    }

    .centro360-acciones[b-r4hi6v07bu] {
        align-items: flex-start;
    }

    .centro360-cuerpo[b-r4hi6v07bu] {
        grid-template-columns: 1fr;
    }

    .centro360-lateral[b-r4hi6v07bu] {
        position: static;
    }
}
/* /Features/Clientes/Components/ClientePreviewDrawer.razor.rz.scp.css */
/*
    Mismo criterio de apilamiento que ContextWorkspace.razor.css: sin scrim
    (role="complementary", se puede seguir interactuando con la lista detrás)
    — "vista previa" es intencionalmente más ligera que el Context Workspace
    completo que abre al pulsar "Operar →". Ancho 400px según el mockup
    (Lista Clientes TALVEG.dc.html), algo más estrecho que los 420-520px del
    resto de paneles Overlay porque solo enseña un resumen, no un formulario.
*/
.drawer-preview-cliente[b-50en5hldb5] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: preview-cliente-entrar-b-50en5hldb5 var(--motion-transition) var(--ease-fluid);
}

@keyframes preview-cliente-entrar-b-50en5hldb5 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-preview-cliente[b-50en5hldb5] {
        animation: none;
    }
}

.cabecera-preview-cliente[b-50en5hldb5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.texto-cabecera-preview-cliente[b-50en5hldb5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.etiqueta-cabecera-preview-cliente[b-50en5hldb5] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-cabecera-preview-cliente[b-50en5hldb5] {
    font: var(--font-heading-md);
}

.boton-cerrar-preview-cliente[b-50en5hldb5] {
    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;
}

.boton-cerrar-preview-cliente:hover[b-50en5hldb5] {
    color: var(--color-text);
}

.boton-cerrar-preview-cliente:focus-visible[b-50en5hldb5] {
    outline: var(--border-focus);
}

.cuerpo-preview-cliente[b-50en5hldb5] {
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.rejilla-info-preview-cliente[b-50en5hldb5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.celda-info-preview-cliente[b-50en5hldb5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.celda-info-preview-cliente span[b-50en5hldb5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.celda-info-preview-cliente strong[b-50en5hldb5] {
    font-size: 14px;
    font-weight: 600;
}

.tarjeta-contacto-preview-cliente[b-50en5hldb5] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: 13px;
}

.titulo-tarjeta-contacto-preview-cliente[b-50en5hldb5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detalle-contacto-preview-cliente[b-50en5hldb5] {
    color: var(--color-text-muted);
}

.vacio-preview-cliente[b-50en5hldb5] {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.enlace-ver-todo-preview-cliente[b-50en5hldb5] {
    margin-top: var(--space-3);
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.enlace-ver-todo-preview-cliente:hover[b-50en5hldb5] {
    color: var(--color-primary-600);
}

.pie-preview-cliente[b-50en5hldb5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

.nota-pie-preview-cliente[b-50en5hldb5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .drawer-preview-cliente[b-50en5hldb5] {
        max-width: 100%;
    }
}
/* /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);
}

/*
  .barra-filtros (list-page.css, global) trae max-width:480px pensado para
  buscador + un único filtro — con los cuatro controles del mockup "Lista
  Clientes TALVEG" (búsqueda, Ejecutivo, Estado documental, Filtros
  guardados) más "Solo críticos", 480px los recorta. Solo esta página lo
  necesita más ancho — se sobreescribe aquí (aislamiento de CSS de Blazor:
  esta regla lleva el atributo de ámbito, nunca toca list-page.css ni las
  demás páginas que sí caben en 480px).
*/
.barra-filtros[b-dxdchuc9ba] {
    max-width: none;
    flex-wrap: wrap;
    row-gap: var(--space-3);
}

/*
  Punto de "Crítico" (mockup "Lista Clientes TALVEG"): un indicador discreto
  en vez de un Badge de texto — con "Estado documental" ya ocupando su
  propio Badge en la fila, un segundo Badge para Crítico competía por la
  misma atención visual sin aportar más que el color. El título (tooltip)
  lleva el texto que el Badge daba antes, así que no se pierde para lectores
  de pantalla ni al pasar el ratón.
*/
.punto-critico[b-dxdchuc9ba] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.punto-critico-activo[b-dxdchuc9ba] {
    background: var(--color-danger-500);
}

.texto-vacio-celda[b-dxdchuc9ba] {
    color: var(--color-text-muted);
}
/* /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-fila[b-bg4yx9j8w2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bandeja-centro-titulo h2[b-bg4yx9j8w2] {
    margin: 0 0 var(--space-2);
    font: var(--font-heading-sm);
}

.bandeja-centro-copiar-enlace[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.bandeja-centro-copiar-enlace:hover[b-bg4yx9j8w2] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.bandeja-centro-copiar-enlace:focus-visible[b-bg4yx9j8w2] {
    outline: var(--border-focus);
}

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

.bandeja-centro-subtitulo[b-bg4yx9j8w2] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

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

.bandeja-badge-canal[b-bg4yx9j8w2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-body-sm);
}

.bandeja-badge-canal-whatsapp[b-bg4yx9j8w2] {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.bandeja-badge-canal-correo[b-bg4yx9j8w2] {
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
}

/* --- Columna de contexto del cliente + Action Center (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/Components/AutomatizacionesPanel.razor.rz.scp.css */
.cabecera-automatizaciones h2[b-30hghgu0m9] {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
}

.cabecera-automatizaciones p[b-30hghgu0m9] {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.tabla-automatizaciones[b-30hghgu0m9] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.fila-automatizaciones[b-30hghgu0m9] {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.8fr 0.7fr;
    gap: var(--space-3);
    align-items: center;
    padding: 0 var(--space-5);
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
}

.fila-automatizaciones:last-child[b-30hghgu0m9] {
    border-bottom: none;
}

.fila-cabecera[b-30hghgu0m9] {
    min-height: 40px;
    background-color: var(--color-surface-subtle);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.celda-nombre[b-30hghgu0m9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nombre-trabajo[b-30hghgu0m9] {
    font: var(--font-body-md);
    font-weight: 600;
}

.descripcion-trabajo[b-30hghgu0m9] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.interruptor[b-30hghgu0m9] {
    width: 40px;
    height: 22px;
    flex: none;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    cursor: pointer;
    position: relative;
    padding: 0;
}

.interruptor:disabled[b-30hghgu0m9] {
    cursor: not-allowed;
    opacity: .6;
}

.interruptor-activo[b-30hghgu0m9] {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.interruptor-pomo[b-30hghgu0m9] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-control);
    transition: left .15s ease;
}

.interruptor-activo .interruptor-pomo[b-30hghgu0m9] {
    left: 20px;
}

.siempre-activo[b-30hghgu0m9] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.nota-auditoria[b-30hghgu0m9] {
    display: inline-flex;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}
/* /Features/Configuracion/Components/ParametrosSistemaPanel.razor.rz.scp.css */
.tarjeta-configuracion[b-uge8wwxc62] {
    max-width: 480px;
}

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

.acciones-formulario[b-uge8wwxc62] {
    margin-top: var(--space-4);
}
/* /Features/Configuracion/Pages/Configuracion.razor.rz.scp.css */
.eyebrow-configuracion[b-iujymdj9l2] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

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

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

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

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

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

.titulo-grupo-subnav[b-iujymdj9l2] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 10px 6px;
}

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

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

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

.icono-entrada-subnav[b-iujymdj9l2] {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 1px;
}

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

.nombre-entrada-subnav[b-iujymdj9l2] {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-text);
}

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

.descripcion-entrada-subnav[b-iujymdj9l2] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.contenido-configuracion[b-iujymdj9l2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.migas-configuracion[b-iujymdj9l2] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.separador-migas[b-iujymdj9l2] {
    color: var(--color-border-strong);
}

.miga-actual[b-iujymdj9l2] {
    color: var(--color-text);
}

.placeholder-configuracion[b-iujymdj9l2] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.icono-placeholder-configuracion[b-iujymdj9l2] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border-strong);
}

.titulo-placeholder-configuracion[b-iujymdj9l2] {
    font: var(--font-heading-sm);
}

.descripcion-placeholder-configuracion[b-iujymdj9l2] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}
/* /Features/Configuracion/Pages/SeleccionarClienteLecturaIa.razor.rz.scp.css */
.enlace-volver-configuracion[b-h5bltp5urw] {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.descripcion-seleccion-cliente[b-h5bltp5urw] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
    max-width: 640px;
    margin-top: 0;
}

.lista-seleccion-cliente[b-h5bltp5urw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 480px;
}

.item-seleccion-cliente[b-h5bltp5urw] {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.item-seleccion-cliente:hover[b-h5bltp5urw] {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
/* /Features/Dashboard/Components/FilaPlataforma.razor.rz.scp.css */
.fila-plataforma[b-w5vtbitp2e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.fila-plataforma-nombre[b-w5vtbitp2e] {
    font: var(--font-label);
    color: var(--color-text);
}

.fila-plataforma-detalle[b-w5vtbitp2e] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.fila-plataforma-separador[b-w5vtbitp2e] {
    margin: 0 var(--space-2);
    color: var(--color-border-strong);
}

.fila-plataforma-rechazadas[b-w5vtbitp2e] {
    color: var(--color-danger-700);
    font-weight: 600;
}
/* /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/PlataformaTab.razor.rz.scp.css */
.plataforma-tab[b-vossc4z42p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.plataforma-proveedor[b-vossc4z42p] {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.plataforma-proveedor-cabecera[b-vossc4z42p] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-hover);
    border-bottom: var(--border-default);
}

.plataforma-proveedor-nombre[b-vossc4z42p] {
    font: var(--font-heading-sm);
}

.plataforma-proveedor-resumen[b-vossc4z42p] {
    font: var(--font-body-md);
    color: var(--color-text-muted);
}

.plataforma-separador[b-vossc4z42p] {
    margin: 0 var(--space-2);
    color: var(--color-border-strong);
}

.plataforma-rechazados[b-vossc4z42p] {
    color: var(--color-danger-700);
    font-weight: 600;
}

.plataforma-cliente-cabecera[b-vossc4z42p] {
    padding: var(--space-2) var(--space-5) var(--space-1);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-top: var(--border-default);
}

.plataforma-fila-documento[b-vossc4z42p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + var(--space-3));
    border-top: var(--border-default);
    flex-wrap: wrap;
}

.plataforma-documento-propietario[b-vossc4z42p] {
    flex: none;
    width: 180px;
    font: var(--font-body-md);
    font-weight: 600;
}

.plataforma-documento-tipo[b-vossc4z42p] {
    flex: 1;
    min-width: 140px;
    font: var(--font-body-md);
}

.plataforma-documento-estado[b-vossc4z42p] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.plataforma-motivo-rechazo[b-vossc4z42p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    cursor: help;
}

.plataforma-documento-acciones[b-vossc4z42p] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}
/* /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/RevisionIa.razor.rz.scp.css */
/*
  Barra de confianza (mockup Documentos TALVEG, pestaña IA) en vez del Badge
  de antes — pero con relleno por tono, no el teal neutro fijo del mockup:
  UmbralConfianzaLote (RevisionIa.razor.cs) depende explícitamente de que el
  verde siga significando "≥95%, seguro para confirmar en lote" (ver su
  comentario — ya hubo un bug real por desalinear ese umbral del tono
  visible). Perder el color habría roto esa referencia visual.
*/
.revision-ia-confianza[b-tqnqjrvoay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.revision-ia-confianza-texto[b-tqnqjrvoay] {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

.revision-ia-confianza-barra[b-tqnqjrvoay] {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-surface-hover);
    border: var(--border-default);
    overflow: hidden;
}

.revision-ia-confianza-relleno[b-tqnqjrvoay] {
    display: block;
    height: 100%;
}

.revision-ia-confianza-relleno-exito[b-tqnqjrvoay] {
    background: var(--color-success-500);
}

.revision-ia-confianza-relleno-advertencia[b-tqnqjrvoay] {
    background: var(--color-warning-500);
}

.revision-ia-confianza-relleno-peligro[b-tqnqjrvoay] {
    background: var(--color-danger-500);
}
/* /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/Empresas/Components/EmpresaPreviewDrawer.razor.rz.scp.css */
/*
    Mismo criterio que ClientePreviewDrawer.razor.css (Features/Clientes/
    Components/) — apilamiento sin scrim, ancho 400px, mismo patrón visual
    generalizado a Empresas.
*/
.drawer-preview-empresa[b-0xuxfx0q0t] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: preview-empresa-entrar-b-0xuxfx0q0t var(--motion-transition) var(--ease-fluid);
}

@keyframes preview-empresa-entrar-b-0xuxfx0q0t {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-preview-empresa[b-0xuxfx0q0t] {
        animation: none;
    }
}

.cabecera-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.texto-cabecera-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.etiqueta-cabecera-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-cabecera-preview-empresa[b-0xuxfx0q0t] {
    font: var(--font-heading-md);
}

.boton-cerrar-preview-empresa[b-0xuxfx0q0t] {
    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;
}

.boton-cerrar-preview-empresa:hover[b-0xuxfx0q0t] {
    color: var(--color-text);
}

.boton-cerrar-preview-empresa:focus-visible[b-0xuxfx0q0t] {
    outline: var(--border-focus);
}

.cuerpo-preview-empresa[b-0xuxfx0q0t] {
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.rejilla-info-preview-empresa[b-0xuxfx0q0t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.celda-info-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.celda-info-preview-empresa span[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.celda-info-preview-empresa strong[b-0xuxfx0q0t] {
    font-size: 14px;
    font-weight: 600;
}

.tarjeta-contacto-preview-empresa[b-0xuxfx0q0t] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: 13px;
}

.titulo-tarjeta-contacto-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detalle-contacto-preview-empresa[b-0xuxfx0q0t] {
    color: var(--color-text-muted);
}

.vacio-preview-empresa[b-0xuxfx0q0t] {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.enlace-ver-todo-preview-empresa[b-0xuxfx0q0t] {
    margin-top: var(--space-3);
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.enlace-ver-todo-preview-empresa:hover[b-0xuxfx0q0t] {
    color: var(--color-primary-600);
}

.pie-preview-empresa[b-0xuxfx0q0t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

.nota-pie-preview-empresa[b-0xuxfx0q0t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .drawer-preview-empresa[b-0xuxfx0q0t] {
        max-width: 100%;
    }
}
/* /Features/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/Importacion/Pages/Importacion.razor.rz.scp.css */
.eyebrow-importacion[b-0rxf3xpxue] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pasos-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.paso-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.paso-importacion:disabled[b-0rxf3xpxue] {
    cursor: not-allowed;
    opacity: .6;
}

.paso-importacion:not(:disabled)[b-0rxf3xpxue] {
    cursor: pointer;
}

.paso-importacion-marca[b-0rxf3xpxue] {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.paso-importacion-actual[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-500);
    color: var(--color-surface);
}

.paso-importacion-actual .paso-importacion-marca[b-0rxf3xpxue] {
    background-color: rgba(255, 255, 255, .2);
    color: var(--color-surface);
}

.paso-importacion-completado:not(.paso-importacion-actual)[b-0rxf3xpxue] {
    color: var(--color-text);
}

.paso-importacion-completado:not(.paso-importacion-actual) .paso-importacion-marca[b-0rxf3xpxue] {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.paso-importacion-flecha[b-0rxf3xpxue] {
    color: var(--color-border-strong);
    font-size: 12px;
}

.titulo-seccion-importacion[b-0rxf3xpxue] {
    margin: 0;
    font: var(--font-heading-md);
}

.rejilla-paso1[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-6);
}

@media (max-width: 1150px) {
    .rejilla-paso1[b-0rxf3xpxue] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.columna-plantillas[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rejilla-plantillas[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.tarjeta-plantilla[b-0rxf3xpxue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
}

.tarjeta-plantilla:hover[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
}

.tarjeta-plantilla-seleccionada[b-0rxf3xpxue] {
    border-color: var(--color-primary-500);
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.cabecera-tarjeta-plantilla[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.icono-tarjeta-plantilla[b-0rxf3xpxue] {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.titulo-tarjeta-plantilla[b-0rxf3xpxue] {
    font: var(--font-heading-sm);
}

.descripcion-tarjeta-plantilla[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.enlace-plantilla-blanco[b-0rxf3xpxue] {
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
}

.acciones-formulario[b-0rxf3xpxue] {
    margin-top: var(--space-4);
}

.acciones-derecha[b-0rxf3xpxue] {
    display: flex;
    justify-content: flex-end;
}

.acciones-entre[b-0rxf3xpxue] {
    display: flex;
    justify-content: space-between;
}

.panel-historial-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabecera-panel-historial[b-0rxf3xpxue] {
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.vacio-historial-importacion[b-0rxf3xpxue] {
    padding: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0;
}

.item-historial-importacion[b-0rxf3xpxue] {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-historial-importacion:last-child[b-0rxf3xpxue] {
    border-bottom: none;
}

.fila-item-historial[b-0rxf3xpxue] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.plantilla-item-historial[b-0rxf3xpxue] {
    font-size: 14px;
    font-weight: 600;
}

.fecha-item-historial[b-0rxf3xpxue] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.detalle-item-historial[b-0rxf3xpxue] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.resultado-exito-historial[b-0rxf3xpxue] {
    color: var(--color-success-700);
}

.resultado-fallo-historial[b-0rxf3xpxue] {
    color: var(--color-danger-700);
}

.columna-paso-ancho[b-0rxf3xpxue] {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.columna-paso-estrecho[b-0rxf3xpxue] {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.cabecera-revision-plan[b-0rxf3xpxue] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.detalle-revision-plan[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.badges-resumen-plan[b-0rxf3xpxue] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tabla-plan-importacion-envoltorio[b-0rxf3xpxue] {
    overflow-x: auto;
}

.tarjeta-confirmacion-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.aviso-confirmacion-importacion[b-0rxf3xpxue] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.punto-aviso-confirmacion[b-0rxf3xpxue] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-danger-500);
    margin-top: 6px;
}

.titulo-aviso-confirmacion[b-0rxf3xpxue] {
    margin: 0 0 4px;
    font: var(--font-heading-sm);
}

.detalle-aviso-confirmacion[b-0rxf3xpxue] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

.casilla-confirmacion-importacion[b-0rxf3xpxue],
.opcion-reemplazar-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font: var(--font-body-md);
}

.casilla-confirmacion-importacion input[b-0rxf3xpxue],
.opcion-reemplazar-importacion input[b-0rxf3xpxue] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
}

.tarjeta-reporte-importacion[b-0rxf3xpxue] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cabecera-reporte-importacion[b-0rxf3xpxue] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.icono-exito-reporte[b-0rxf3xpxue] {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-success-50);
    border: 1px solid var(--color-success-500);
    color: var(--color-success-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo-reporte-importacion[b-0rxf3xpxue] {
    font: var(--font-heading-sm);
}

.rejilla-reporte-importacion[b-0rxf3xpxue] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.nota-reporte-importacion[b-0rxf3xpxue] {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}
/* /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/Plantillas/Pages/ConfigurarPlantilla.razor.rz.scp.css */
.editor-plantilla-alta[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 520px;
}

.editor-plantilla-layout[b-spjvhegj8b] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

/* 1 punto PDF = 1 píxel CSS a propósito (ver editorPlantilla.js) — el
   scroll nativo sustituye a cualquier cálculo de escala responsive. */
.editor-plantilla-lienzo[b-spjvhegj8b] {
    flex: 1;
    min-width: 0;
    max-height: 80vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-lg);
}

.editor-plantilla-pagina[b-spjvhegj8b] {
    position: relative;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid var(--color-border-control);
}

.editor-plantilla-caja[b-spjvhegj8b] {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-400) 12%, transparent);
    cursor: move;
    touch-action: none;
    display: flex;
    /* Alineado arriba, no centrado: el PDF final ancla el texto al borde
       superior de la caja (XStringFormats.TopLeft en RellenadorPlantillaPdfService),
       así que el editor debe mostrar lo mismo que se va a estampar. */
    align-items: flex-start;
    overflow: hidden;
}

.editor-plantilla-caja-seleccionada[b-spjvhegj8b] {
    border-color: var(--color-primary-700);
    border-style: solid;
    background: color-mix(in srgb, var(--color-primary-400) 22%, transparent);
}

.editor-plantilla-caja-etiqueta[b-spjvhegj8b] {
    pointer-events: none;
    font-size: 11px;
    line-height: 1.2;
    color: var(--color-text);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-plantilla-handle[b-spjvhegj8b] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-primary-700);
    cursor: nwse-resize;
    touch-action: none;
}

.editor-plantilla-panel[b-spjvhegj8b] {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.editor-plantilla-panel-campo[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.editor-plantilla-acciones[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border-control);
    padding-top: var(--space-4);
}

.editor-plantilla-modo-generacion[b-spjvhegj8b] {
    display: flex;
    gap: var(--space-4);
}

.editor-plantilla-lista-trabajadores[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
}

.editor-plantilla-progreso-lote[b-spjvhegj8b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.editor-plantilla-progreso-item[b-spjvhegj8b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}
/* /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 */
.eyebrow-reportes[b-c4xfr06n1d] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rejilla-reportes[b-c4xfr06n1d] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-6);
}

@media (max-width: 1150px) {
    .rejilla-reportes[b-c4xfr06n1d] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.columna-reportes-filtros[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.tarjeta-biblioteca[b-c4xfr06n1d] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.titulo-biblioteca[b-c4xfr06n1d] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.lista-informes[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    text-align: left;
    cursor: pointer;
}

.item-informe:hover[b-c4xfr06n1d] {
    border-color: var(--color-primary-500);
}

.item-informe-seleccionado[b-c4xfr06n1d] {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-primary-500);
}

.radio-informe[b-c4xfr06n1d] {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-control);
    background-color: var(--color-surface);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-informe-seleccionado .radio-informe[b-c4xfr06n1d] {
    border: 2px solid var(--color-primary-500);
}

.punto-radio-informe[b-c4xfr06n1d] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-500);
}

.texto-item-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.titulo-item-informe[b-c4xfr06n1d] {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.descripcion-item-informe[b-c4xfr06n1d] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.filtros-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.campo-select-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-select-informe span:first-child[b-c4xfr06n1d] {
    font-size: 13px;
    font-weight: 600;
}

.campo-select-informe select[b-c4xfr06n1d] {
    min-height: 48px;
    border-radius: var(--radius-md);
    border: var(--border-control);
    padding: 0 var(--space-3);
    font: var(--font-body-md);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.campo-select-informe select:disabled[b-c4xfr06n1d] {
    opacity: .6;
    cursor: not-allowed;
}

.opcion-checkbox-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.opcion-checkbox-informe input[b-c4xfr06n1d] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
}

.texto-opcion-checkbox-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font: var(--font-body-md);
}

.detalle-opcion-checkbox-informe[b-c4xfr06n1d] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.acciones-exportar-informe[b-c4xfr06n1d] {
    display: flex;
    gap: var(--space-2);
}

.boton-exportar-informe[b-c4xfr06n1d] {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-primary-500);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.boton-exportar-informe:hover[b-c4xfr06n1d] {
    border-color: var(--color-primary-500);
    background-color: var(--color-surface-subtle);
}

.boton-exportar-informe-deshabilitado[b-c4xfr06n1d] {
    pointer-events: none;
    opacity: .5;
}

.enlace-secundario-informe[b-c4xfr06n1d] {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.enlace-secundario-informe:hover:not(:disabled)[b-c4xfr06n1d] {
    color: var(--color-primary-600);
}

.enlace-secundario-informe:disabled[b-c4xfr06n1d] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.tarjeta-historial-informes[b-c4xfr06n1d] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cabecera-historial-informes[b-c4xfr06n1d] {
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.vacio-historial-informes[b-c4xfr06n1d] {
    padding: var(--space-5);
    color: var(--color-text-muted);
    font: var(--font-body-md);
    margin: 0;
}

.item-historial-informes[b-c4xfr06n1d] {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-historial-informes:last-child[b-c4xfr06n1d] {
    border-bottom: none;
}

.fila-item-historial-informes[b-c4xfr06n1d] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.nombre-item-historial-informes[b-c4xfr06n1d] {
    font-size: 14px;
    font-weight: 600;
}

.fecha-item-historial-informes[b-c4xfr06n1d] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.detalle-item-historial-informes[b-c4xfr06n1d] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.columna-reportes-vista[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.aviso-sin-cliente-informe[b-c4xfr06n1d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-warning-700);
    font-size: 14px;
    font-weight: 600;
}

.punto-aviso-sin-cliente[b-c4xfr06n1d] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-full);
    background-color: var(--color-warning-500);
}

.documento-vista-previa-informe[b-c4xfr06n1d] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cabecera-documento-informe[b-c4xfr06n1d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 2px solid var(--color-text);
    padding-bottom: var(--space-3);
}

.titulo-documento-informe[b-c4xfr06n1d] {
    font: var(--font-heading-md);
}

.metadato-documento-informe[b-c4xfr06n1d] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.tabla-vista-previa-envoltorio[b-c4xfr06n1d] {
    overflow-x: auto;
}

.nota-vista-previa-informe[b-c4xfr06n1d] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}
/* /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/Components/TrabajadorPreviewDrawer.razor.rz.scp.css */
/*
    Mismo criterio que ClientePreviewDrawer.razor.css/EmpresaPreviewDrawer.razor.css
    — apilamiento sin scrim, ancho 400px, mismo patrón visual generalizado a
    Trabajadores.
*/
.drawer-preview-trabajador[b-twi9itvpb8] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--color-overlay);
    box-shadow: var(--shadow-overlay);
    border-left: var(--border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    animation: preview-trabajador-entrar-b-twi9itvpb8 var(--motion-transition) var(--ease-fluid);
}

@keyframes preview-trabajador-entrar-b-twi9itvpb8 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-preview-trabajador[b-twi9itvpb8] {
        animation: none;
    }
}

.cabecera-preview-trabajador[b-twi9itvpb8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: var(--border-default);
    flex-shrink: 0;
}

.texto-cabecera-preview-trabajador[b-twi9itvpb8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.etiqueta-cabecera-preview-trabajador[b-twi9itvpb8] {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nombre-cabecera-preview-trabajador[b-twi9itvpb8] {
    font: var(--font-heading-md);
}

.boton-cerrar-preview-trabajador[b-twi9itvpb8] {
    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;
}

.boton-cerrar-preview-trabajador:hover[b-twi9itvpb8] {
    color: var(--color-text);
}

.boton-cerrar-preview-trabajador:focus-visible[b-twi9itvpb8] {
    outline: var(--border-focus);
}

.cuerpo-preview-trabajador[b-twi9itvpb8] {
    padding: 0 var(--space-5) var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.rejilla-info-preview-trabajador[b-twi9itvpb8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.celda-info-preview-trabajador[b-twi9itvpb8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.celda-info-preview-trabajador span[b-twi9itvpb8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.celda-info-preview-trabajador strong[b-twi9itvpb8] {
    font-size: 14px;
    font-weight: 600;
}

.enlace-ver-todo-preview-trabajador[b-twi9itvpb8] {
    margin-top: var(--space-3);
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: var(--color-primary-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.enlace-ver-todo-preview-trabajador:hover[b-twi9itvpb8] {
    color: var(--color-primary-600);
}

.pie-preview-trabajador[b-twi9itvpb8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-default);
    flex-shrink: 0;
}

.nota-pie-preview-trabajador[b-twi9itvpb8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .drawer-preview-trabajador[b-twi9itvpb8] {
        max-width: 100%;
    }
}
/* /Features/Trabajadores/Pages/TrabajadorDetalle.razor.rz.scp.css */
/*
  Cabecera de entidad de Trabajador 360 (Parte XVI PROMPT 04): mismo
  lenguaje que Centro 360 (CentroDetalle.razor.css) — anillo + identidad +
  acciones en una fila.
*/
.trabajador360-cabecera[b-hgzr18fi57] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: var(--border-default);
}

.trabajador360-identidad[b-hgzr18fi57] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.trabajador360-titulo[b-hgzr18fi57] {
    font: var(--font-heading-lg);
    color: var(--color-text);
    margin: 0;
}

.trabajador360-alias[b-hgzr18fi57] {
    font: var(--font-body-lg);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

.trabajador360-meta[b-hgzr18fi57] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font: var(--font-body-md);
    color: var(--color-text-muted);
    margin: 0;
}

.trabajador360-indicadores[b-hgzr18fi57] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.trabajador360-acciones[b-hgzr18fi57] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* /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);
}