/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-cib2g6erca] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cib2g6erca] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qr9hob2w5k],
.components-reconnect-repeated-attempt-visible[b-qr9hob2w5k],
.components-reconnect-failed-visible[b-qr9hob2w5k],
.components-pause-visible[b-qr9hob2w5k],
.components-resume-failed-visible[b-qr9hob2w5k],
.components-rejoining-animation[b-qr9hob2w5k] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-retrying[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-failed[b-qr9hob2w5k],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-qr9hob2w5k] {
    display: block;
}


#components-reconnect-modal[b-qr9hob2w5k] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-qr9hob2w5k 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-qr9hob2w5k 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-qr9hob2w5k 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-qr9hob2w5k]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-qr9hob2w5k 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-qr9hob2w5k {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-qr9hob2w5k {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-qr9hob2w5k {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-qr9hob2w5k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-qr9hob2w5k] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-qr9hob2w5k] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-qr9hob2w5k] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-qr9hob2w5k] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-qr9hob2w5k] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-qr9hob2w5k] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-qr9hob2w5k 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-qr9hob2w5k] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-qr9hob2w5k {
    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;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* =========================================================
   CamSeguridad · Login
   Paleta unificada con el resto del sistema
   ========================================================= */
.login-container[b-5xdquuhiwh] {
    --color-bg: #F6F2F4;
    --color-bg-2: #FBF7F9;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-oscuro-4: #1E1D24;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.14);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --sombra-card:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(62, 60, 71, 0.04),
        0 8px 20px rgba(62, 60, 71, 0.06),
        0 24px 50px rgba(62, 60, 71, 0.10);
    --sombra-boton:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 16px rgba(255, 137, 90, 0.28),
        0 2px 4px rgba(255, 137, 90, 0.20);
    --radio-card: 20px;
    --radio-input: 12px;
    --transicion: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Selección de texto con la marca ===== */
.login-container [b-5xdquuhiwh]::selection {
    background: var(--color-acento-soft);
    color: var(--color-oscuro);
}

/* ===== Layout base (mobile-first) ===== */
.login-container[b-5xdquuhiwh] {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--color-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 960px) {
    .login-container[b-5xdquuhiwh] {
        grid-template-columns: 1.05fr 1fr;
    }
}

/* =========================================================
   Panel izquierdo — topología / branding
   ========================================================= */
.login-panel-izq[b-5xdquuhiwh] {
    display: none;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 137, 90, 0.08), transparent 60%),
        radial-gradient(ellipse at 70% 90%, rgba(255, 137, 90, 0.06), transparent 55%),
        linear-gradient(180deg, #3E3C47 0%, #2C2A34 100%);
}

@media (min-width: 960px) {
    .login-panel-izq[b-5xdquuhiwh] { display: block; }
}

/* Grid pattern muy sutil de fondo */
.login-grid-bg[b-5xdquuhiwh] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
    pointer-events: none;
}

.login-ilustracion[b-5xdquuhiwh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.login-scrim[b-5xdquuhiwh] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(30, 29, 36, 0.96) 0%,
        rgba(30, 29, 36, 0.60) 38%,
        transparent 68%);
    pointer-events: none;
}

/* Status pill superior ------------------------------------ */
.login-status-pill[b-5xdquuhiwh] {
    position: absolute;
    top: 28px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    color: var(--color-bg);
    font-size: 11.5px;
    font-weight: 600;
    z-index: 2;
    animation: entradaSuave-b-5xdquuhiwh 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-status-dot[b-5xdquuhiwh] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-ok);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: pulsoOk-b-5xdquuhiwh 1.8s ease-out infinite;
}

@keyframes pulsoOk-b-5xdquuhiwh {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.login-status-sep[b-5xdquuhiwh] { opacity: 0.4; }
.login-status-mono[b-5xdquuhiwh] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--color-texto-muted);
    font-weight: 500;
}

/* Overlay de marca inferior -------------------------------- */
.login-marca-overlay[b-5xdquuhiwh] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px) clamp(32px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
    animation: entradaAbajo-b-5xdquuhiwh 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
}

.login-marca-titulo[b-5xdquuhiwh] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-bg);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.login-marca-tagline[b-5xdquuhiwh] {
    margin: 0;
    color: rgba(246, 242, 244, 0.75);
    font-size: clamp(13px, 1.05vw, 14.5px);
    max-width: 380px;
    line-height: 1.55;
    font-weight: 400;
}

/* Stats row */
.login-marca-stats[b-5xdquuhiwh] {
    display: flex;
    gap: clamp(20px, 3vw, 36px);
    margin-top: 8px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.login-stat[b-5xdquuhiwh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-stat-num[b-5xdquuhiwh] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    color: var(--color-bg);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.login-stat-lbl[b-5xdquuhiwh] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-texto-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Tags */
.login-marca-tags[b-5xdquuhiwh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.login-marca-tags span[b-5xdquuhiwh] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-bg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Marca de logo reutilizable */
.login-logo-mark[b-5xdquuhiwh] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #FF9968 0%, #FF7040 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow:
        0 2px 6px rgba(255, 137, 90, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.login-logo-inner[b-5xdquuhiwh] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: var(--color-oscuro-4);
}

/* =========================================================
   Panel derecho — formulario
   ========================================================= */
.login-panel-der[b-5xdquuhiwh] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 40px);
    background: linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg) 100%);
    /* iOS safe area */
    padding-top: max(clamp(24px, 4vw, 48px), env(safe-area-inset-top));
    padding-bottom: max(clamp(24px, 4vw, 48px), env(safe-area-inset-bottom));
}

.login-blob[b-5xdquuhiwh] {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 137, 90, 0.22), transparent 70%);
    top: -220px;
    right: -180px;
    pointer-events: none;
    animation: flotar-b-5xdquuhiwh 12s ease-in-out infinite;
}

.login-blob-2[b-5xdquuhiwh] {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 137, 90, 0.10), transparent 70%);
    bottom: -160px;
    left: -120px;
    pointer-events: none;
    animation: flotar-b-5xdquuhiwh 15s ease-in-out infinite reverse;
}

@keyframes flotar-b-5xdquuhiwh {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-20px, 20px); }
}

/* Badge conexión segura ------------------------------------ */
.login-secure-badge[b-5xdquuhiwh] {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    z-index: 2;
    animation: entradaSuave-b-5xdquuhiwh 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-secure-badge svg[b-5xdquuhiwh] {
    width: 12px;
    height: 12px;
    color: var(--color-ok);
}

/* Card wrap ----------------------------------------------- */
.login-card-wrap[b-5xdquuhiwh] {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
    z-index: 1;
}

.login-card-wrap > *[b-5xdquuhiwh] {
    animation: entradaAbajo-b-5xdquuhiwh 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-card-wrap > *:nth-child(1)[b-5xdquuhiwh] { animation-delay: 0.05s; }
.login-card-wrap > *:nth-child(2)[b-5xdquuhiwh] { animation-delay: 0.12s; }
.login-card-wrap > *:nth-child(3)[b-5xdquuhiwh] { animation-delay: 0.20s; }
.login-card-wrap > *:nth-child(4)[b-5xdquuhiwh] { animation-delay: 0.28s; }
.login-card-wrap > *:nth-child(5)[b-5xdquuhiwh] { animation-delay: 0.36s; }

@keyframes entradaAbajo-b-5xdquuhiwh {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes entradaSuave-b-5xdquuhiwh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mini branding — solo mobile */
.login-mobile-brand[b-5xdquuhiwh] {
    display: none;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

@media (max-width: 959px) {
    .login-mobile-brand[b-5xdquuhiwh] { display: flex; }
}

.login-mobile-brand > div[b-5xdquuhiwh] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.login-mobile-brand-name[b-5xdquuhiwh] {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.login-mobile-brand-tag[b-5xdquuhiwh] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-acento);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Encabezado del form ------------------------------------- */
.login-encabezado[b-5xdquuhiwh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-eyebrow[b-5xdquuhiwh] {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-acento);
}

.login-titulo[b-5xdquuhiwh] {
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--color-oscuro);
    line-height: 1.15;
    font-family: inherit;
}

.login-subtitulo[b-5xdquuhiwh] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--color-texto-secundario);
    line-height: 1.55;
    max-width: 340px;
}

/* Card blanca --------------------------------------------- */
.login-card[b-5xdquuhiwh] {
    background: #FFFFFF;
    border-radius: var(--radio-card);
    padding: clamp(24px, 3vw, 32px) clamp(22px, 2.8vw, 28px);
    box-shadow: var(--sombra-card);
    border: 1px solid rgba(228, 223, 226, 0.6);
}

/* Reglas que apuntan a elementos generados por componentes Blazor.
   Necesitan ::deep colgado de un HTML nativo con el atributo scoped
   (aquí .login-card). EditForm/InputText/ValidationMessage no lo propagan. */
.login-card[b-5xdquuhiwh]  .login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-campo[b-5xdquuhiwh] {
    display: flex;
    flex-direction: column;
}

.login-campo-header[b-5xdquuhiwh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}

.login-campo label[b-5xdquuhiwh] {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 8px;
}

.login-campo-header label[b-5xdquuhiwh] {
    margin-bottom: 0;
}

.login-forgot[b-5xdquuhiwh] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-acento);
    text-decoration: none;
    transition: color var(--transicion);
}

.login-forgot:hover[b-5xdquuhiwh] {
    color: var(--color-acento-hover);
    text-decoration: underline;
}

.login-input-wrap[b-5xdquuhiwh] {
    position: relative;
}

.login-icono-svg[b-5xdquuhiwh] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-texto-muted);
    pointer-events: none;
    transition: color var(--transicion);
    z-index: 1;
}

.login-card[b-5xdquuhiwh]  .login-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-input);
    background: #FFFFFF;
    font-size: 14.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 14px 14px 14px 42px;
    transition:
        border-color var(--transicion),
        box-shadow var(--transicion),
        font-weight var(--transicion);
    -webkit-appearance: none;
    appearance: none;
}

.login-card[b-5xdquuhiwh]  .login-input-toggle {
    padding-right: 46px;
}

.login-card[b-5xdquuhiwh]  .login-input::placeholder {
    color: var(--color-texto-muted);
    font-weight: 400;
}

.login-card[b-5xdquuhiwh]  .login-input:hover:not(:focus) {
    border-color: #D6CFD3;
}

.login-card[b-5xdquuhiwh]  .login-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 4px var(--color-acento-soft);
    font-weight: 600;
}

/* Autofill de Chrome — forzar fondo blanco (Chrome aplica su propio color
   interno que gana sobre background normal; solo !important + box-shadow
   inset lo contrarresta) */
.login-card[b-5xdquuhiwh]  .login-input:-webkit-autofill,
.login-card[b-5xdquuhiwh]  .login-input:-webkit-autofill:hover,
.login-card[b-5xdquuhiwh]  .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-oscuro) !important;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    caret-color: var(--color-oscuro);
    transition: background-color 5000s ease-in-out 0s;
    font-weight: inherit;
}

.login-input-wrap:focus-within .login-icono-svg[b-5xdquuhiwh] {
    color: var(--color-acento);
}

.login-toggle-pw[b-5xdquuhiwh] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-texto-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--transicion), color var(--transicion);
    z-index: 1;
}

.login-toggle-pw svg[b-5xdquuhiwh] {
    width: 17px;
    height: 17px;
}

.login-toggle-pw:hover[b-5xdquuhiwh] {
    background: var(--color-borde-suave);
    color: var(--color-oscuro);
}

.login-toggle-pw:focus-visible[b-5xdquuhiwh] {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

.login-card[b-5xdquuhiwh]  .login-error {
    display: block;
    font-size: 12px;
    color: var(--color-peligro);
    margin-top: 6px;
    font-weight: 500;
}

/* Switch --------------------------------------------------- */
.login-switch-wrap[b-5xdquuhiwh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-top: -2px;
    font-size: 13px;
    color: var(--color-texto-secundario);
    user-select: none;
    -webkit-user-select: none;
    width: fit-content;
}

.login-switch[b-5xdquuhiwh] {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-borde);
    position: relative;
    transition: background var(--transicion);
    flex: none;
    display: inline-block;
}

.login-switch.activo[b-5xdquuhiwh] {
    background: var(--color-acento);
}

.login-switch-knob[b-5xdquuhiwh] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: left var(--transicion);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.login-switch.activo .login-switch-knob[b-5xdquuhiwh] {
    left: 18px;
}

/* Alerta --------------------------------------------------- */
.login-alerta[b-5xdquuhiwh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--color-peligro-bg);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(196, 69, 59, 0.15);
    line-height: 1.4;
    animation: entradaAbajo-b-5xdquuhiwh 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-alerta svg[b-5xdquuhiwh] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
}

/* Botón submit -------------------------------------------- */
.login-boton[b-5xdquuhiwh] {
    position: relative;
    height: 52px;
    border-radius: var(--radio-input);
    border: none;
    background: linear-gradient(180deg, #FF9968 0%, #FF7A48 100%);
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--sombra-boton);
    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        filter var(--transicion);
    overflow: hidden;
    margin-top: 4px;
}

.login-boton[b-5xdquuhiwh]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 40%);
    pointer-events: none;
}

.login-boton:hover:not(:disabled)[b-5xdquuhiwh] {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 8px 20px rgba(255, 137, 90, 0.36),
        0 3px 6px rgba(255, 137, 90, 0.24);
}

.login-boton:active:not(:disabled)[b-5xdquuhiwh] {
    transform: translateY(0);
    filter: brightness(0.98);
}

.login-boton:focus-visible[b-5xdquuhiwh] {
    outline: none;
    box-shadow:
        var(--sombra-boton),
        0 0 0 4px var(--color-acento-soft);
}

.login-boton:disabled[b-5xdquuhiwh] {
    opacity: 0.75;
    cursor: default;
    transform: none;
}

.login-flecha[b-5xdquuhiwh] {
    width: 18px;
    height: 18px;
    transition: transform var(--transicion);
}

.login-boton:hover:not(:disabled) .login-flecha[b-5xdquuhiwh] {
    transform: translateX(3px);
}

/* Spinner */
.login-spinner[b-5xdquuhiwh] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: girar-b-5xdquuhiwh 0.7s linear infinite;
}

@keyframes girar-b-5xdquuhiwh {
    to { transform: rotate(360deg); }
}

/* Footer --------------------------------------------------- */
.login-footer[b-5xdquuhiwh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--color-texto-muted);
    font-weight: 500;
}

.login-footer-sep[b-5xdquuhiwh] {
    opacity: 0.5;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Móviles pequeños: reducir badge y stats, más aire */
@media (max-width: 959px) {
    .login-secure-badge[b-5xdquuhiwh] {
        top: 16px;
        right: 16px;
        font-size: 11px;
        padding: 5px 10px 5px 8px;
    }

    .login-card-wrap[b-5xdquuhiwh] {
        max-width: 440px;
    }

    .login-card[b-5xdquuhiwh]  .login-form {
        gap: 16px;
    }

    .login-boton[b-5xdquuhiwh] {
        height: 54px;
        font-size: 15px;
    }

    .login-footer[b-5xdquuhiwh] {
        margin-top: 6px;
    }
}

/* Móvil muy pequeño (< 380px): reducir aún */
@media (max-width: 379px) {
    .login-titulo[b-5xdquuhiwh] {
        font-size: 22px;
    }
    .login-card[b-5xdquuhiwh] {
        padding: 20px 18px;
    }
}

/* Landscape móvil bajo: compactar espacios */
@media (max-height: 640px) and (orientation: landscape) and (max-width: 959px) {
    .login-panel-der[b-5xdquuhiwh] {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .login-card-wrap[b-5xdquuhiwh] {
        gap: 14px;
    }
    .login-encabezado[b-5xdquuhiwh] {
        gap: 4px;
    }
    .login-titulo[b-5xdquuhiwh] {
        font-size: 22px;
    }
    .login-subtitulo[b-5xdquuhiwh] {
        display: none;
    }
}

/* Reducir movimiento — respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    .login-card-wrap > *[b-5xdquuhiwh],
    .login-status-pill[b-5xdquuhiwh],
    .login-secure-badge[b-5xdquuhiwh],
    .login-marca-overlay[b-5xdquuhiwh],
    .login-alerta[b-5xdquuhiwh],
    .login-blob[b-5xdquuhiwh],
    .login-blob-2[b-5xdquuhiwh],
    .login-status-dot[b-5xdquuhiwh],
    .login-ilustracion animate[b-5xdquuhiwh],
    .login-ilustracion animateTransform[b-5xdquuhiwh],
    .login-ilustracion animateMotion[b-5xdquuhiwh] {
        animation: none !important;
    }
    .login-boton:hover:not(:disabled)[b-5xdquuhiwh] {
        transform: none;
    }
}
/* /Components/Pages/MDI/ComponenteMapaProyecto.razor.rz.scp.css */
.mpy-modulo[b-7tf09n97h1] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --radio: 12px;
    --radio-lg: 18px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
}

.mpy-vacio[b-7tf09n97h1] { flex: 1; display: flex; align-items: center; justify-content: center; padding: 50px 20px; color: var(--color-texto-muted); }
.mpy-spinner[b-7tf09n97h1] { width: 22px; height: 22px; border: 3px solid var(--color-borde); border-top-color: var(--color-acento); border-radius: 50%; animation: mpy-girar-b-7tf09n97h1 0.8s linear infinite; }
@keyframes mpy-girar-b-7tf09n97h1 { to { transform: rotate(360deg); } }

.mpy-resumen[b-7tf09n97h1] { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }

.mpy-toolbar[b-7tf09n97h1] {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
}
.mpy-toolbar-grupo[b-7tf09n97h1] { display: flex; align-items: center; gap: 8px; }
.mpy-toolbar-derecha[b-7tf09n97h1] { margin-left: auto; }

.mpy-exportar-wrap[b-7tf09n97h1] { position: relative; }
.mpy-exportar-menu[b-7tf09n97h1] {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 6px 20px rgba(62,60,71,0.16);
    display: flex; flex-direction: column;
    min-width: 150px;
    z-index: 20;
    overflow: hidden;
}
.mpy-exportar-opcion[b-7tf09n97h1] {
    padding: 10px 14px; text-align: left; background: none; border: none;
    font-size: 13px; font-weight: 600; color: var(--color-oscuro-2);
    cursor: pointer; font-family: inherit;
}
.mpy-exportar-opcion:hover[b-7tf09n97h1] { background: var(--color-acento-soft); color: var(--color-acento-hover); }
.mpy-exportar-opcion + .mpy-exportar-opcion[b-7tf09n97h1] { border-top: 1px solid var(--color-borde-suave); }
.mpy-resumen-item[b-7tf09n97h1] {
    flex: 1; min-width: 160px;
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 2px;
}
.mpy-resumen-num[b-7tf09n97h1] { font-size: 24px; font-weight: 800; color: var(--color-acento); }
.mpy-resumen-lbl[b-7tf09n97h1] { font-size: 12px; color: var(--color-texto-muted); font-weight: 600; }

.mpy-area[b-7tf09n97h1] { flex: 1; display: flex; gap: 14px; min-height: 0; }

.mpy-lienzo-scroll[b-7tf09n97h1] {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    background:
        linear-gradient(90deg, var(--color-borde-suave) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(var(--color-borde-suave) 1px, transparent 1px) 0 0 / 24px 24px,
        #FFFFFF;
}

.mpy-lienzo[b-7tf09n97h1] { position: relative; background-repeat: no-repeat; }
.mpy-svg[b-7tf09n97h1] { position: absolute; top: 0; left: 0; pointer-events: none; }

.mpy-linea[b-7tf09n97h1] { stroke: var(--color-oscuro-3); stroke-width: 2; fill: none; }
.mpy-linea.seleccionada[b-7tf09n97h1] { stroke: var(--color-acento); stroke-width: 3; fill: none; }
.mpy-linea-hit[b-7tf09n97h1] { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; }
.mpy-linea-etiqueta[b-7tf09n97h1] { font-size: 10px; font-weight: 600; fill: var(--color-oscuro-2); text-anchor: middle; font-family: 'Inter', sans-serif; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }
.mpy-punto-trazado[b-7tf09n97h1] { fill: #FFFFFF; stroke: var(--color-acento); stroke-width: 2.5; pointer-events: all; cursor: grab; }
.mpy-punto-trazado:active[b-7tf09n97h1] { cursor: grabbing; }

.mpy-nodo[b-7tf09n97h1] {
    position: absolute;
    width: 110px; height: 50px;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 2px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 2px 6px rgba(62, 60, 71, 0.08);
    cursor: grab;
    user-select: none;
    z-index: 2;
}
.mpy-nodo:active[b-7tf09n97h1] { cursor: grabbing; }
.mpy-nodo:hover[b-7tf09n97h1] { box-shadow: 0 4px 12px rgba(62, 60, 71, 0.14); }
.mpy-nodo-icono[b-7tf09n97h1] { flex: none; display: flex; align-items: center; justify-content: center; }
.mpy-ic-svg[b-7tf09n97h1] { width: 18px; height: 18px; flex: none; }
.mpy-nodo-etiqueta[b-7tf09n97h1] { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mpy-tipo-camara[b-7tf09n97h1] { border-color: #FFD9C4; color: #E8874D; }
.mpy-tipo-switch[b-7tf09n97h1] { border-color: #BFE8E5; color: #2FA7A0; }
.mpy-tipo-grabador[b-7tf09n97h1] { border-color: #D9D5FB; color: #7C6FF0; }
.mpy-tipo-ups[b-7tf09n97h1] { border-color: #FCE79A; color: #B8860B; }
.mpy-tipo-alarma[b-7tf09n97h1] { border-color: #F7B8C4; color: #C4453B; }
.mpy-tipo-router[b-7tf09n97h1] { border-color: #A7D8FF; color: #4C8DFF; }
.mpy-nodo-etiqueta[b-7tf09n97h1] { color: var(--color-oscuro); }

/* ---------- Modo conectar equipos ---------- */
.mpy-nodo-conectable[b-7tf09n97h1] { cursor: crosshair !important; }
.mpy-nodo-conectable:hover[b-7tf09n97h1] { box-shadow: 0 0 0 3px rgba(255, 137, 90, 0.35); }
.mpy-nodo-origen[b-7tf09n97h1] { box-shadow: 0 0 0 3px var(--color-acento, #FF895A) !important; }
.mpy-btn-activo[b-7tf09n97h1] { background: var(--color-acento, #FF895A) !important; color: #FFFFFF !important; border-color: var(--color-acento, #FF895A) !important; }

.mpy-panel[b-7tf09n97h1] {
    width: 260px; flex: none;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    background: #FFFFFF;
    padding: 16px;
    overflow-y: auto;
}
.mpy-panel-titulo[b-7tf09n97h1] { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.mpy-panel-texto[b-7tf09n97h1] { font-size: 13px; color: var(--color-oscuro-2); line-height: 1.5; }
.mpy-panel-muted[b-7tf09n97h1] { color: var(--color-texto-muted); }
.mpy-panel-acciones[b-7tf09n97h1] { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.mpy-campo[b-7tf09n97h1] { display: flex; flex-direction: column; gap: 5px; margin: 14px 0; font-size: 12.5px; font-weight: 600; color: var(--color-oscuro-2); }
.mpy-campo input[b-7tf09n97h1] {
    padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 8px;
    font-size: 13px; font-family: inherit; color: var(--color-oscuro);
}
.mpy-campo input:focus[b-7tf09n97h1] { outline: none; border-color: var(--color-acento); }

.mpy-btn[b-7tf09n97h1] {
    padding: 9px 14px; border-radius: var(--radio); border: 1px solid var(--color-borde);
    background: #FFFFFF; color: var(--color-oscuro-2); font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.mpy-btn-primario[b-7tf09n97h1] { background: var(--color-acento); border-color: var(--color-acento); color: #FFFFFF; }
.mpy-btn-peligro[b-7tf09n97h1] { color: var(--color-peligro); background: var(--color-peligro-bg); border-color: var(--color-peligro-bg); }
.mpy-btn-peligro:hover[b-7tf09n97h1] { background: var(--color-peligro); color: #FFFFFF; }

.mpy-alerta[b-7tf09n97h1] { background: var(--color-peligro-bg); color: var(--color-peligro); padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-top: 6px; }

/* ---------- Racks / gabinetes (contenedores) ---------- */
.mpy-rack[b-7tf09n97h1] {
    position: absolute;
    border: 2px dashed var(--color-oscuro-3);
    border-radius: 10px;
    background: rgba(101, 97, 110, 0.05);
    z-index: 1;
}
.mpy-rack-header[b-7tf09n97h1] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px;
    font-size: 11.5px; font-weight: 700; color: var(--color-oscuro-2);
    cursor: grab;
    user-select: none;
}
.mpy-rack-header-texto[b-7tf09n97h1] { display: flex; align-items: center; gap: 5px; }
.mpy-rack-header-texto .mpy-ic-svg[b-7tf09n97h1] { width: 13px; height: 13px; }
.mpy-rack:active .mpy-rack-header[b-7tf09n97h1] { cursor: grabbing; }
.mpy-rack-eliminar[b-7tf09n97h1] {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--color-borde); background: #FFFFFF;
    color: var(--color-texto-muted); font-size: 12px; line-height: 1;
    cursor: pointer; display: none; align-items: center; justify-content: center;
}
.mpy-rack:hover .mpy-rack-eliminar[b-7tf09n97h1] { display: flex; }
.mpy-rack-eliminar:hover[b-7tf09n97h1] { background: var(--color-peligro); border-color: var(--color-peligro); color: #FFF; }

.mpy-nodo-en-rack[b-7tf09n97h1] {
    width: 130px !important; height: 40px !important;
    font-size: 11px;
    z-index: 2;
}
.mpy-nodo-en-rack .mpy-ic-svg[b-7tf09n97h1] { width: 15px; height: 15px; }
.mpy-nodo-en-rack .mpy-nodo-etiqueta[b-7tf09n97h1] { font-size: 11px; }

/* ---------- Modal simple (Rack) ---------- */
.mpy-modal-overlay[b-7tf09n97h1] {
    position: fixed; inset: 0;
    background: rgba(62, 60, 71, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.mpy-modal[b-7tf09n97h1] {
    background: #FFFFFF; border-radius: var(--radio-lg);
    padding: 22px; width: 340px; max-width: 92vw;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.mpy-modal h4[b-7tf09n97h1] { margin: 0 0 14px; font-size: 16px; }
.mpy-modal-acciones[b-7tf09n97h1] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mpy-modal textarea[b-7tf09n97h1] { padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
/* /Components/Pages/MDI/DetalleProyecto.razor.rz.scp.css */
.det-contenedor[b-az8yb2kf9i] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255,137,90,0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --radio: 12px;
    --transicion: 180ms cubic-bezier(0.16,1,0.3,1);
    display: flex; flex-direction: column; gap: 16px; height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
}
.det-ic[b-az8yb2kf9i] { width: 18px; height: 18px; flex: none; display: block; }
.det-ic-sm[b-az8yb2kf9i] { width: 15px; height: 15px; }

.det-cabecera[b-az8yb2kf9i] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.det-btn-informe[b-az8yb2kf9i] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    color: var(--color-oscuro-2);
    font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: var(--transicion);
    white-space: nowrap;
}
.det-btn-informe:hover:not(:disabled)[b-az8yb2kf9i] { border-color: var(--color-acento); color: var(--color-acento-hover); }
.det-btn-informe:disabled[b-az8yb2kf9i] { opacity: 0.6; cursor: not-allowed; }
.det-btn-volver[b-az8yb2kf9i] { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1.5px solid var(--color-borde); border-radius: var(--radio); padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--color-oscuro-2); cursor: pointer; font-family: inherit; transition: background var(--transicion); }
.det-btn-volver:hover[b-az8yb2kf9i] { background: var(--color-bg); }
.det-info[b-az8yb2kf9i] { flex: 1; min-width: 0; }
.det-nombre[b-az8yb2kf9i] { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.det-meta[b-az8yb2kf9i] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--color-texto-secundario); }
.det-meta-item[b-az8yb2kf9i] { font-weight: 500; }
.det-sep[b-az8yb2kf9i] { opacity: 0.4; }
.det-chip[b-az8yb2kf9i] { display: inline-flex; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.det-chip-trabajo[b-az8yb2kf9i] { color: #6366F1; background: rgba(99,102,241,0.10); }
.det-chip-operativo[b-az8yb2kf9i] { color: #16803D; background: rgba(34,197,94,0.10); }

.det-tabs[b-az8yb2kf9i] { display: flex; gap: 4px; background: var(--color-borde-suave); padding: 3px; border-radius: 11px; width: fit-content; }
.det-tab[b-az8yb2kf9i] { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--color-texto-secundario); cursor: pointer; font-family: inherit; transition: background var(--transicion), color var(--transicion); white-space: nowrap; }
.det-tab:hover[b-az8yb2kf9i] { color: var(--color-oscuro); }
.det-tab.activa[b-az8yb2kf9i] { background: #FFFFFF; color: var(--color-oscuro); box-shadow: 0 1px 3px rgba(62,60,71,0.10); }
.det-tab.activa .det-ic[b-az8yb2kf9i] { color: var(--color-acento); }

.det-panel[b-az8yb2kf9i] { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.det-toolbar[b-az8yb2kf9i] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.det-contador[b-az8yb2kf9i] { font-size: 12px; color: var(--color-texto-muted); font-weight: 500; }

.det-filtro[b-az8yb2kf9i] { border: 1.5px solid var(--color-borde); border-radius: var(--radio); background: #FFFFFF; font-size: 13px; font-family: inherit; font-weight: 500; color: var(--color-oscuro-2); padding: 8px 30px 8px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.det-filtro:focus[b-az8yb2kf9i] { outline: none; border-color: var(--color-acento); }

.det-buscador[b-az8yb2kf9i] { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; }
.det-buscador .det-ic[b-az8yb2kf9i] { position: absolute; left: 10px; color: var(--color-texto-muted); pointer-events: none; }
.det-buscador input[b-az8yb2kf9i] { width: 100%; min-width: 320px; border: 1.5px solid var(--color-borde); border-radius: var(--radio); background: #FFFFFF; font-size: 13px; font-family: inherit; color: var(--color-oscuro); padding: 8px 10px 8px 32px; }
.det-buscador input:focus[b-az8yb2kf9i] { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-soft); font-weight: 600; }

.det-btn-nuevo[b-az8yb2kf9i] { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: linear-gradient(180deg, #FF9968, #FF7A48); color: #FFF; border: none; border-radius: var(--radio); padding: 8px 14px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 3px 8px rgba(255,137,90,0.25); white-space: nowrap; }

.det-tabla-wrap[b-az8yb2kf9i], .det-tabla[b-az8yb2kf9i] { width: 100%; }
.det-tabla[b-az8yb2kf9i] { border-collapse: collapse; font-size: 13px; background: #FFFFFF; border: 1px solid var(--color-borde); border-radius: 14px; box-shadow: 0 1px 4px rgba(62,60,71,0.07); overflow: hidden; }
.det-tabla thead[b-az8yb2kf9i] { background: var(--color-bg); }
.det-tabla th[b-az8yb2kf9i] { text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texto-muted); border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
.det-tabla tbody tr[b-az8yb2kf9i] { border-bottom: 1px solid var(--color-borde-suave); cursor: pointer; transition: background var(--transicion); }
.det-tabla tbody tr:last-child[b-az8yb2kf9i] { border-bottom: none; }
.det-tabla tbody tr:hover[b-az8yb2kf9i] { background: var(--color-acento-soft); }
.det-tabla td[b-az8yb2kf9i] { padding: 10px 14px; color: var(--color-oscuro-2); vertical-align: middle; }
.det-celda-nombre[b-az8yb2kf9i] { font-weight: 600; color: var(--color-oscuro); }
.det-chip-sm[b-az8yb2kf9i] { display: inline-flex; font-size: 10.5px; font-weight: 600; color: var(--color-oscuro-2); background: var(--color-bg); border: 1px solid var(--color-borde); padding: 2px 7px; border-radius: 999px; }
.det-estado-ok[b-az8yb2kf9i] { color: #16803D; background: rgba(34,197,94,0.10); border-color: transparent; }
.det-estado-mal[b-az8yb2kf9i] { color: var(--color-peligro); background: var(--color-peligro-bg); border-color: transparent; }
.det-estado-atencion[b-az8yb2kf9i] { color: #A15C00; background: rgba(245,158,11,0.14); border-color: transparent; }
.det-estado-inactivo[b-az8yb2kf9i] { color: var(--color-texto-muted); background: var(--color-borde-suave); border-color: transparent; }

.det-col-desktop[b-az8yb2kf9i] { display: none; }
.det-col-tablet[b-az8yb2kf9i] { display: none; }
@media (min-width: 640px) { .det-col-tablet[b-az8yb2kf9i] { display: table-cell; } }
@media (min-width: 860px) { .det-col-desktop[b-az8yb2kf9i] { display: table-cell; } }
.det-col-acc[b-az8yb2kf9i] { width: 1%; white-space: nowrap; }
.det-acciones[b-az8yb2kf9i] { display: flex; gap: 4px; }
.det-btn-icono[b-az8yb2kf9i] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: 7px; color: var(--color-texto-muted); cursor: pointer; transition: background var(--transicion), color var(--transicion); }
.det-btn-icono:hover[b-az8yb2kf9i] { background: var(--color-bg); color: var(--color-oscuro); }
.det-btn-icono-peligro:hover[b-az8yb2kf9i] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.det-vacio[b-az8yb2kf9i] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--color-texto-muted); text-align: center; }
.det-vacio p[b-az8yb2kf9i] { margin: 0; font-size: 13px; }
.det-spinner[b-az8yb2kf9i] { width: 20px; height: 20px; border: 2.5px solid var(--color-borde); border-top-color: var(--color-acento); border-radius: 50%; animation: det-girar-b-az8yb2kf9i 0.7s linear infinite; }
.det-spinner-sm[b-az8yb2kf9i] { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255,255,255,0.35); border-top-color: #FFF; }
@keyframes det-girar-b-az8yb2kf9i { to { transform: rotate(360deg); } }

.det-paginacion[b-az8yb2kf9i] { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--color-texto-muted); }
.det-pag-btns[b-az8yb2kf9i] { display: flex; gap: 4px; }
.det-pag-btn[b-az8yb2kf9i] { width: 28px; height: 28px; border: 1px solid var(--color-borde); background: #FFF; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.det-pag-btn:disabled[b-az8yb2kf9i] { opacity: 0.4; cursor: default; }

.det-modal-overlay[b-az8yb2kf9i] { position: fixed; inset: 0; background: rgba(30,29,36,0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; animation: det-ov-in-b-az8yb2kf9i 0.15s ease-out; }
@keyframes det-ov-in-b-az8yb2kf9i { from { opacity: 0; } to { opacity: 1; } }
.det-modal[b-az8yb2kf9i] { background: #FFF; border-radius: 18px; box-shadow: 0 20px 50px rgba(30,29,36,0.25); width: 100%; max-width: 420px; max-height: 90vh; display: flex; flex-direction: column; animation: det-m-in-b-az8yb2kf9i 0.2s cubic-bezier(0.16,1,0.3,1); }
.det-modal-lg[b-az8yb2kf9i] { max-width: 600px; }
@keyframes det-m-in-b-az8yb2kf9i { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.det-modal-header[b-az8yb2kf9i] { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--color-borde-suave); }
.det-modal-header h4[b-az8yb2kf9i] { margin: 0; font-size: 16px; font-weight: 800; }
.det-modal-cerrar[b-az8yb2kf9i] { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: var(--color-bg); border-radius: 8px; color: var(--color-oscuro-3); cursor: pointer; }
.det-modal-cerrar:hover[b-az8yb2kf9i] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.det-modal-body[b-az8yb2kf9i] { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.det-modal-confirm[b-az8yb2kf9i] { max-width: 380px; padding: 24px 20px; text-align: center; }
.det-modal-confirm h4[b-az8yb2kf9i] { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.det-modal-confirm p[b-az8yb2kf9i] { margin: 0; font-size: 13px; color: var(--color-texto-secundario); line-height: 1.5; }
.det-form-grid[b-az8yb2kf9i] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.det-campo-full[b-az8yb2kf9i] { grid-column: 1 / -1; }
@media (max-width: 480px) { .det-form-grid[b-az8yb2kf9i] { grid-template-columns: 1fr; } }
.det-campo[b-az8yb2kf9i] { display: flex; flex-direction: column; }
.det-campo label[b-az8yb2kf9i] { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-muted); margin-bottom: 5px; }
.det-req[b-az8yb2kf9i] { color: var(--color-acento); }
.det-input[b-az8yb2kf9i] { width: 100%; box-sizing: border-box; border: 1.5px solid var(--color-borde); border-radius: 10px; background: #FFF; font-size: 13px; font-family: inherit; color: var(--color-oscuro); padding: 9px 11px; transition: border-color var(--transicion), box-shadow var(--transicion); }
.det-input:focus[b-az8yb2kf9i] { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-soft); font-weight: 600; }
.det-textarea[b-az8yb2kf9i] { resize: vertical; min-height: 50px; font-family: inherit; }
.det-alerta[b-az8yb2kf9i] { background: var(--color-peligro-bg); color: var(--color-peligro); font-size: 12.5px; padding: 10px 12px; border-radius: 8px; }
.det-modal-footer[b-az8yb2kf9i] { display: flex; justify-content: flex-end; gap: 10px; padding-top: 12px; }
.det-btn-cancelar[b-az8yb2kf9i] { background: transparent; border: 1.5px solid var(--color-borde); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--color-oscuro-2); cursor: pointer; font-family: inherit; }
.det-btn-cancelar:hover[b-az8yb2kf9i] { background: var(--color-bg); }
.det-btn-guardar[b-az8yb2kf9i] { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #FF9968, #FF7A48); color: #FFF; border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 3px 8px rgba(255,137,90,0.25); }
.det-btn-guardar:disabled[b-az8yb2kf9i] { opacity: 0.6; cursor: default; }
.det-btn-peligro[b-az8yb2kf9i] { background: var(--color-peligro); color: #FFF; border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }

/* ---------- Extras: conexión, chips, alta rápida de modelo ---------- */
.det-sub[b-az8yb2kf9i] { display: block; font-size: 11px; font-weight: 500; color: var(--color-texto-muted); }
.det-chip-conectado[b-az8yb2kf9i] { color: #16803D; background: rgba(34,197,94,0.10); border-color: transparent; }
.det-chip-sinconectar[b-az8yb2kf9i] { color: var(--color-texto-muted); }

.det-link-btn[b-az8yb2kf9i] { background: none; border: none; padding: 0; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--color-acento); cursor: pointer; font-family: inherit; text-align: left; }
.det-link-btn:hover[b-az8yb2kf9i] { text-decoration: underline; }
.det-link-peligro[b-az8yb2kf9i] { color: var(--color-peligro); margin-left: 10px; }

.det-inline-caja[b-az8yb2kf9i] { background: var(--color-bg); border: 1px dashed var(--color-borde); border-radius: 12px; padding: 12px; }
.det-inline-acciones[b-az8yb2kf9i] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.det-seccion-label[b-az8yb2kf9i] { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-muted); margin-bottom: 10px; }

/* Campo que debe centrar verticalmente su contenido (ej. el check "Es IP"
   alineado con el input de al lado, que ya tiene su label encima). */
.det-campo-centrado-v[b-az8yb2kf9i] { display: flex; align-items: center; padding-top: 22px; }

.det-conexion-actual[b-az8yb2kf9i] { display: flex; align-items: center; gap: 4px; }

.det-puertos-grid[b-az8yb2kf9i] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.det-puerto-chip[b-az8yb2kf9i] {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--color-ok);
    background: var(--color-ok-bg);
    color: #16803D;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.det-puerto-chip:hover[b-az8yb2kf9i] { filter: brightness(0.97); }
.det-puerto-chip.seleccionado[b-az8yb2kf9i] { background: var(--color-acento); border-color: var(--color-acento); color: #FFF; }
.det-puerto-chip.ocupado[b-az8yb2kf9i] { background: var(--color-borde-suave); border-color: var(--color-borde); color: var(--color-texto-muted); cursor: not-allowed; }
.det-hint[b-az8yb2kf9i] { margin: 6px 0 0; font-size: 11.5px; color: var(--color-texto-muted); }
.det-panel-texto[b-az8yb2kf9i] { margin: 0 0 8px; font-size: 13px; color: var(--color-oscuro-2); line-height: 1.5; }

.det-form-tabs[b-az8yb2kf9i] { display: flex; gap: 4px; background: var(--color-bg); padding: 3px; border-radius: 10px; width: fit-content; margin-bottom: 14px; }
.det-form-tab[b-az8yb2kf9i] { background: transparent; border: none; border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--color-texto-secundario); cursor: pointer; font-family: inherit; }
.det-form-tab.activa[b-az8yb2kf9i] { background: #FFFFFF; color: var(--color-oscuro); box-shadow: 0 1px 3px rgba(62,60,71,0.10); }

.det-input-con-boton[b-az8yb2kf9i] { display: flex; gap: 6px; }
.det-input-con-boton .det-input[b-az8yb2kf9i] { flex: 1; }
.det-btn-mostrar[b-az8yb2kf9i] { flex: none; border: 1.5px solid var(--color-borde); background: #FFF; border-radius: 10px; padding: 0 12px; font-size: 12px; font-weight: 700; color: var(--color-oscuro-2); cursor: pointer; font-family: inherit; }
.det-btn-mostrar:hover[b-az8yb2kf9i] { background: var(--color-bg); }
.det-hint-inline[b-az8yb2kf9i] { font-weight: 400; color: var(--color-texto-muted); text-transform: none; letter-spacing: normal; }

/* ---------- Patrón de desbloqueo ---------- */
/* OJO: los estilos del patrón (puntos/líneas/flecha) se MOVIERON a
   wwwroot/app.css. Este archivo es CSS aislado de Blazor: sus selectores se
   compilan como .det-patron-linea[b-xxxx] y SOLO aplican a elementos escritos
   en el markup del componente. Los <circle>/<line>/<polygon> del patrón los
   crea patron-puntos.js con createElementNS, NO reciben el atributo de
   aislamiento y por eso el patrón se veía "invisible" (líneas sin stroke,
   puntos negros). Nunca vuelvas a definirlos aquí. */
.det-patron-svg[b-az8yb2kf9i] { background: #FFFFFF; border: 1px solid var(--color-borde); border-radius: 12px; cursor: pointer; user-select: none; touch-action: none; }

/* ---------- Control de imagen QR ---------- */
.det-qr-control[b-az8yb2kf9i] {
    position: relative;
    width: 220px; height: 140px;
    border: 1.5px dashed var(--color-borde);
    border-radius: 12px;
    background: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}
.det-qr-control img[b-az8yb2kf9i] { width: 100%; height: 100%; object-fit: contain; }
.det-qr-vacio[b-az8yb2kf9i] { font-size: 12px; color: var(--color-texto-muted); padding: 10px; }
.det-qr-overlay[b-az8yb2kf9i] {
    position: absolute; inset: 0;
    background: rgba(62,60,71,0.55);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity var(--transicion);
}
.det-qr-control:hover .det-qr-overlay[b-az8yb2kf9i] { opacity: 1; }
.det-qr-btn[b-az8yb2kf9i] {
    background: #FFFFFF; color: var(--color-oscuro); border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.det-qr-btn-peligro[b-az8yb2kf9i] { background: var(--color-peligro); color: #FFFFFF; }

/* ---------- Visor de QR ampliado (lightbox) ---------- */
.det-qr-visor-overlay[b-az8yb2kf9i] { cursor: zoom-out; }
.det-qr-visor[b-az8yb2kf9i] {
    background: #FFFFFF; border-radius: 16px; padding: 18px;
    width: min(90vw, 560px); max-height: 90vh; cursor: default;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.det-qr-visor-header[b-az8yb2kf9i] { display: flex; align-items: center; justify-content: space-between; }
.det-qr-visor-header h4[b-az8yb2kf9i] { margin: 0; font-size: 16px; }
.det-qr-visor-cuerpo[b-az8yb2kf9i] {
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 1px solid var(--color-borde); border-radius: 12px;
    padding: 16px; overflow: auto; min-height: 0;
}
.det-qr-visor-cuerpo img[b-az8yb2kf9i] {
    max-width: 100%; max-height: 60vh; width: auto; height: auto;
    image-rendering: pixelated; /* QR nítido al ampliar, sin difuminar los módulos */
    display: block;
}
.det-qr-visor-hint[b-az8yb2kf9i] { text-align: center; margin: 0; }
.det-qr-visor-acciones[b-az8yb2kf9i] { display: flex; gap: 10px; justify-content: flex-end; }
.det-qr-visor-acciones a[b-az8yb2kf9i] { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Recorte de imagen ---------- */
.det-recorte-contenedor[b-az8yb2kf9i] { position: relative; display: inline-block; max-width: 100%; margin: 10px 0; }
.det-recorte-contenedor img[b-az8yb2kf9i] { max-width: 100%; max-height: 340px; display: block; border-radius: 8px; }
.det-recorte-overlay[b-az8yb2kf9i] { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

.det-lista-alimentados[b-az8yb2kf9i] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.det-lista-alimentados li[b-az8yb2kf9i] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-borde-suave); border-radius: 10px; font-size: 13px; }
.det-lista-alimentados li strong[b-az8yb2kf9i] { flex: 1; }
.det-check[b-az8yb2kf9i] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--color-oscuro-2); cursor: pointer; }
.det-check input[b-az8yb2kf9i] { width: 16px; height: 16px; accent-color: var(--color-acento); cursor: pointer; }
.det-chip-principal[b-az8yb2kf9i] { margin-left: 8px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--color-acento-hover); background: var(--color-acento-soft); padding: 1px 6px; border-radius: 999px; }
.det-sub[b-az8yb2kf9i] { display: block; font-size: 11px; font-weight: 400; color: var(--color-texto-muted); }
/* /Components/Pages/MDI/FrmMMI.razor.rz.scp.css */
/* =========================================================
   CamSeguridad · MDI Shell
   ========================================================= */
.mdi-shell[b-co3nadg8pv] {
    --color-bg: #F6F2F4;
    --color-bg-2: #FBF7F9;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-oscuro-4: #1E1D24;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #D64545;
    --color-ok: #22C55E;
    --sombra-sm: 0 1px 2px rgba(62,60,71,0.04), 0 2px 6px rgba(62,60,71,0.06);
    --sombra-md: 0 4px 12px rgba(62,60,71,0.08), 0 1px 2px rgba(62,60,71,0.04);
    --sombra-dropdown: 0 8px 24px rgba(62,60,71,0.14), 0 2px 6px rgba(62,60,71,0.06);
    --radio: 12px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    -webkit-font-smoothing: antialiased;
}

/* ===== Ícono genérico ===== */
.mdi-ic[b-co3nadg8pv] {
    width: 20px;
    height: 20px;
    flex: none;
    display: block;
}
.mdi-ic-sm[b-co3nadg8pv] { width: 16px; height: 16px; }
.mdi-ic-xs[b-co3nadg8pv] { width: 14px; height: 14px; }

/* =========================================================
   Header
   ========================================================= */
.mdi-header[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-oscuro-4);
    color: var(--color-bg);
    padding: 0 clamp(12px, 2vw, 20px);
    height: 54px;
    flex: none;
    z-index: 10;
}

.mdi-header-izq[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Logo (consistente con Login) */
.mdi-logo-mark[b-co3nadg8pv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FF9968, #FF7040);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 2px 6px rgba(255,137,90,0.35);
}
.mdi-logo-inner[b-co3nadg8pv] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--color-oscuro-4);
}

.mdi-header-empresa[b-co3nadg8pv] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.mdi-header-nombre[b-co3nadg8pv] {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mdi-header-tagline[b-co3nadg8pv] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-acento);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mdi-header-derecha[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

/* Reloj */
.mdi-header-reloj[b-co3nadg8pv] {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--color-texto-muted);
    font-variant-numeric: tabular-nums;
    padding: 5px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}

@media (min-width: 768px) {
    .mdi-header-reloj[b-co3nadg8pv] { display: inline-flex; }
}

/* Usuario */
.mdi-usuario[b-co3nadg8pv] { position: relative; }

.mdi-usuario-btn[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 8px 5px 5px;
    border-radius: 10px;
    color: var(--color-bg);
    transition: background var(--transicion);
    font-family: inherit;
}

.mdi-usuario-btn:hover[b-co3nadg8pv] { background: rgba(255,255,255,0.07); }

.mdi-usuario-avatar[b-co3nadg8pv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9968, #FF7040);
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mdi-usuario-info[b-co3nadg8pv] {
    display: none;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
@media (min-width: 768px) {
    .mdi-usuario-info[b-co3nadg8pv] { display: flex; }
}

.mdi-usuario-nombre[b-co3nadg8pv] { font-size: 12.5px; font-weight: 600; }
.mdi-usuario-rol[b-co3nadg8pv] { font-size: 10.5px; color: var(--color-texto-muted); }

.mdi-chevron-down[b-co3nadg8pv] {
    color: var(--color-texto-muted);
    transition: transform var(--transicion);
}

/* Capa invisible a pantalla completa que cierra el menú al hacer clic fuera. */
.mdi-menu-backdrop[b-co3nadg8pv] {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: transparent;
}

/* Dropdown */
.mdi-usuario-dropdown[b-co3nadg8pv] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--sombra-dropdown);
    border: 1px solid var(--color-borde);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    z-index: 30;
    animation: mdi-dropdown-in-b-co3nadg8pv 0.18s cubic-bezier(0.16,1,0.3,1);
}

@keyframes mdi-dropdown-in-b-co3nadg8pv {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mdi-dropdown-user-info[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 8px;
}

.mdi-dropdown-avatar[b-co3nadg8pv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9968, #FF7040);
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mdi-dropdown-name[b-co3nadg8pv] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-oscuro);
}

.mdi-dropdown-email[b-co3nadg8pv] {
    display: block;
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

.mdi-dropdown-sep[b-co3nadg8pv] {
    height: 1px;
    background: var(--color-borde);
    margin: 4px 8px;
}

.mdi-usuario-dropdown-item[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-oscuro-2);
    cursor: pointer;
    transition: background var(--transicion);
    font-family: inherit;
}

.mdi-usuario-dropdown-item:hover[b-co3nadg8pv] { background: var(--color-bg); }

.mdi-dropdown-salir[b-co3nadg8pv] { color: var(--color-peligro); }
.mdi-dropdown-salir:hover[b-co3nadg8pv] { background: #FEF2F2; }

/* =========================================================
   Cuerpo (sidebar + área MDI)
   ========================================================= */
.mdi-cuerpo[b-co3nadg8pv] {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
}

@media (min-width: 900px) {
    .mdi-cuerpo[b-co3nadg8pv] { flex-direction: row; }
}

/* =========================================================
   Sidebar / Menú
   ========================================================= */
.mdi-menu[b-co3nadg8pv] {
    display: flex;
    flex: none;
    background: #FFFFFF;
    border-top: 1px solid var(--color-borde);
    justify-content: space-around;
    padding: 4px 4px;
    z-index: 5;
}

@media (min-width: 900px) {
    .mdi-menu[b-co3nadg8pv] {
        flex-direction: column;
        justify-content: space-between;
        width: 220px;
        border-top: none;
        border-right: 1px solid var(--color-borde);
        padding: 20px 12px 16px;
        gap: 0;
    }
}

.mdi-menu-seccion[b-co3nadg8pv] {
    display: contents;
}

@media (min-width: 900px) {
    .mdi-menu-seccion[b-co3nadg8pv] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.mdi-menu-label[b-co3nadg8pv] {
    display: none;
}

@media (min-width: 900px) {
    .mdi-menu-label[b-co3nadg8pv] {
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--color-texto-muted);
        padding: 0 14px 10px;
    }
}

/* Ítems del menú */
.mdi-menu-item[b-co3nadg8pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-oscuro-3);
    font-family: inherit;
    flex: 1;
    transition: background var(--transicion), color var(--transicion);
}

@media (min-width: 900px) {
    .mdi-menu-item[b-co3nadg8pv] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 11px 14px;
        font-size: 13.5px;
        font-weight: 500;
        flex: none;
        border-radius: var(--radio);
    }
}

.mdi-menu-item .mdi-ic[b-co3nadg8pv] { color: var(--color-texto-muted); transition: color var(--transicion); }

.mdi-menu-item:hover[b-co3nadg8pv] {
    background: var(--color-bg);
    color: var(--color-oscuro);
}
.mdi-menu-item:hover .mdi-ic[b-co3nadg8pv] { color: var(--color-oscuro-3); }

.mdi-menu-item.activo[b-co3nadg8pv] {
    background: var(--color-acento-soft);
    color: var(--color-acento-hover);
    font-weight: 600;
}
.mdi-menu-item.activo .mdi-ic[b-co3nadg8pv] { color: var(--color-acento); }

/* Footer del sidebar */
.mdi-menu-footer[b-co3nadg8pv] {
    display: none;
}

@media (min-width: 900px) {
    .mdi-menu-footer[b-co3nadg8pv] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 14px;
        border-top: 1px solid var(--color-borde);
    }
}

.mdi-menu-version[b-co3nadg8pv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-texto-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* =========================================================
   Área MDI
   ========================================================= */
.mdi-area[b-co3nadg8pv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Pestañas */
.mdi-tabs[b-co3nadg8pv] {
    display: flex;
    overflow-x: auto;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-borde);
    flex: none;
    scrollbar-width: none;
}
.mdi-tabs[b-co3nadg8pv]::-webkit-scrollbar { display: none; }

.mdi-tab[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 40px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-texto-muted);
    border-right: 1px solid var(--color-borde);
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    transition: color var(--transicion), background var(--transicion);
    position: relative;
}

.mdi-tab[b-co3nadg8pv]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background var(--transicion);
}

.mdi-tab:hover[b-co3nadg8pv] { color: var(--color-oscuro); background: var(--color-bg-2); }

.mdi-tab.activa[b-co3nadg8pv] {
    color: var(--color-oscuro);
    background: var(--color-bg);
    font-weight: 600;
}
.mdi-tab.activa[b-co3nadg8pv]::after { background: var(--color-acento); }

.mdi-tab-titulo[b-co3nadg8pv] { pointer-events: none; }

.mdi-tab-cerrar[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--color-texto-muted);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity var(--transicion), background var(--transicion), color var(--transicion);
}

.mdi-tab:hover .mdi-tab-cerrar[b-co3nadg8pv],
.mdi-tab.activa .mdi-tab-cerrar[b-co3nadg8pv] { opacity: 1; }

.mdi-tab-cerrar:hover[b-co3nadg8pv] {
    background: rgba(214,69,69,0.10);
    color: var(--color-peligro);
}

/* Contenido */
.mdi-contenido[b-co3nadg8pv] {
    flex: 1;
    overflow: auto;
    padding: clamp(16px, 2vw, 24px);
    background: var(--color-bg);
}

/* =========================================================
   Dashboard de bienvenida
   ========================================================= */
.mdi-bienvenida[b-co3nadg8pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    gap: clamp(28px, 4vw, 44px);
    padding: 20px;
    animation: mdi-entrada-b-co3nadg8pv 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes mdi-entrada-b-co3nadg8pv {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mdi-bienvenida-hero[b-co3nadg8pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mdi-bienvenida-icono[b-co3nadg8pv] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-acento-soft), rgba(255,137,90,0.05));
    border: 1px solid rgba(255,137,90,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.mdi-bienvenida-icono svg[b-co3nadg8pv] {
    width: 36px;
    height: 36px;
    color: var(--color-acento);
}

.mdi-bienvenida h2[b-co3nadg8pv] {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-oscuro);
    margin: 0;
}

.mdi-bienvenida p[b-co3nadg8pv] {
    font-size: 14px;
    color: var(--color-texto-secundario);
    margin: 0;
    max-width: 340px;
    line-height: 1.5;
}

.mdi-bienvenida-logo-img[b-co3nadg8pv] {
    max-width: 220px;
    max-height: 120px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mdi-bienvenida-datos[b-co3nadg8pv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--color-texto-muted);
    margin-top: 4px;
}

.mdi-bienvenida-aviso[b-co3nadg8pv] {
    font-size: 12.5px;
    color: var(--color-texto-muted);
    font-style: italic;
    margin-top: 4px;
}

/* Resumen del sistema (KPIs — solo información) */
.mdi-kpis[b-co3nadg8pv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 700px;
}

.mdi-kpi[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 18px;
    text-align: left;
}

.mdi-kpi-icono[b-co3nadg8pv] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--color-acento-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.mdi-kpi-icono svg[b-co3nadg8pv] { width: 20px; height: 20px; color: var(--color-acento); }

.mdi-kpi-icono-2[b-co3nadg8pv] { background: rgba(99,102,241,0.10); }
.mdi-kpi-icono-2 svg[b-co3nadg8pv] { color: #6366F1; }

.mdi-kpi-icono-3[b-co3nadg8pv] { background: rgba(34,197,94,0.10); }
.mdi-kpi-icono-3 svg[b-co3nadg8pv] { color: #22C55E; }

.mdi-kpi-icono-4[b-co3nadg8pv] { background: rgba(214,69,69,0.10); }
.mdi-kpi-icono-4 svg[b-co3nadg8pv] { color: var(--color-peligro); }

.mdi-kpi-datos[b-co3nadg8pv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mdi-kpi-num[b-co3nadg8pv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-oscuro);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mdi-kpi-lbl[b-co3nadg8pv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-texto-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 899px) {
    .mdi-menu-item .mdi-ic[b-co3nadg8pv] { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
    .mdi-kpis[b-co3nadg8pv] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .mdi-kpi[b-co3nadg8pv] {
        padding: 14px;
        gap: 10px;
    }
    .mdi-kpi-num[b-co3nadg8pv] { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .mdi-usuario-dropdown[b-co3nadg8pv],
    .mdi-bienvenida[b-co3nadg8pv] {
        animation: none !important;
    }
}

/* ===== Modales: Mi perfil / Cambiar contraseña ===== */
/* Mismo lenguaje visual que el resto de la app (modal "Nuevo cliente", etc.):
   overlay con blur, cabecera con eyebrow naranja + título, labels en
   mayúsculas pequeñas, inputs con foco en acento. */
.mdi-modal-overlay[b-co3nadg8pv] {
    position: fixed;
    inset: 0;
    background: rgba(30, 29, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: mdi-overlay-in-b-co3nadg8pv 0.15s ease-out;
}

@keyframes mdi-overlay-in-b-co3nadg8pv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mdi-modal[b-co3nadg8pv] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 29, 36, 0.28);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: mdi-modal-in-b-co3nadg8pv 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mdi-modal-in-b-co3nadg8pv {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mdi-modal-header[b-co3nadg8pv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--color-borde-suave);
    flex: none;
}

.mdi-modal-eyebrow[b-co3nadg8pv] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 4px;
}

.mdi-modal-titulo[b-co3nadg8pv] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.mdi-modal-cerrar[b-co3nadg8pv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    border-radius: 9px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    flex: none;
    transition: background var(--transicion), color var(--transicion);
}

.mdi-modal-cerrar:hover[b-co3nadg8pv] { background: rgba(214, 69, 69, 0.1); color: var(--color-peligro); }

.mdi-modal-body[b-co3nadg8pv] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mdi-form-grid[b-co3nadg8pv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mdi-campo-full[b-co3nadg8pv] { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .mdi-form-grid[b-co3nadg8pv] { grid-template-columns: 1fr; }
}

.mdi-campo[b-co3nadg8pv] { display: flex; flex-direction: column; }

.mdi-campo label[b-co3nadg8pv] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
}

.mdi-input[b-co3nadg8pv] {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 10px 12px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.mdi-input[b-co3nadg8pv]::placeholder { color: var(--color-texto-muted); font-weight: 400; }

.mdi-input:focus[b-co3nadg8pv] {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

/* Valor de solo lectura (Mi perfil): misma caja visual que un input, sin
   permitir edición — así el modal se ve igual aunque no haya campos editables. */
.mdi-valor-solo-lectura[b-co3nadg8pv] {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde-suave);
    border-radius: 10px;
    background: var(--color-bg);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro);
    padding: 10px 12px;
}

.mdi-perfil-avatar-grande[b-co3nadg8pv] {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--color-acento); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    margin: 0 auto 4px;
}

.mdi-alerta[b-co3nadg8pv] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(214, 69, 69, 0.1);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 11px 13px;
    border-radius: 10px;
}

.mdi-alerta-exito[b-co3nadg8pv] {
    background: rgba(34, 197, 94, 0.12);
    color: #17924F;
}

.mdi-modal-footer[b-co3nadg8pv] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--color-borde-suave);
    flex: none;
}

.mdi-btn-cancelar[b-co3nadg8pv] {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}

.mdi-btn-cancelar:hover[b-co3nadg8pv] { background: var(--color-bg); border-color: var(--color-oscuro-3); }

.mdi-btn-guardar[b-co3nadg8pv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), filter var(--transicion);
}

.mdi-btn-guardar:hover:not(:disabled)[b-co3nadg8pv] { transform: translateY(-1px); filter: brightness(1.03); }
.mdi-btn-guardar:disabled[b-co3nadg8pv] { opacity: 0.7; cursor: default; transform: none; }

.mdi-spinner-sm[b-co3nadg8pv] {
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: mdi-spin-b-co3nadg8pv 0.7s linear infinite;
    flex: none;
}

@keyframes mdi-spin-b-co3nadg8pv { to { transform: rotate(360deg); } }
/* /Components/Pages/MDI/ModuloCatalogo.razor.rz.scp.css */
/* =========================================================
   Módulo Clientes — paleta y radios consistentes con el sistema
   ========================================================= */
.cat-modulo[b-1l1pc4k134] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --color-ok-bg: #EEFBF2;
    --radio: 12px;
    --radio-lg: 18px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    height: 100%;
}

.cat-ic[b-1l1pc4k134] { width: 18px; height: 18px; flex: none; display: block; }
.cat-ic-sm[b-1l1pc4k134] { width: 15px; height: 15px; }

/* =========================================================
   Toolbar
   ========================================================= */
.cat-toolbar[b-1l1pc4k134] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cat-toolbar-izq[b-1l1pc4k134] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cat-titulo[b-1l1pc4k134] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-oscuro);
}

.cat-contador[b-1l1pc4k134] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-texto-muted);
}

.cat-toolbar-der[b-1l1pc4k134] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buscador */
.cat-buscador[b-1l1pc4k134] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.cat-buscador .cat-ic[b-1l1pc4k134] {
    position: absolute;
    left: 12px;
    color: var(--color-texto-muted);
    pointer-events: none;
}

.cat-buscador input[b-1l1pc4k134] {
    width: 100%;
    min-width: 320px;
    flex: 1;
    max-width: 100%;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 9px 12px 9px 36px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.cat-buscador input:focus[b-1l1pc4k134] {
    font-weight: 600;
}

.cat-buscador input[b-1l1pc4k134]::placeholder { color: var(--color-texto-muted); }

.cat-buscador input:focus[b-1l1pc4k134] {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
}

/* Filtro select */
.cat-filtro[b-1l1pc4k134] {
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-oscuro-2);
    padding: 9px 32px 9px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--transicion);
}

.cat-filtro:focus[b-1l1pc4k134] {
    outline: none;
    border-color: var(--color-acento);
}

/* Botón nuevo */
.cat-btn-nuevo[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radio);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
    white-space: nowrap;
}

.cat-btn-nuevo:hover[b-1l1pc4k134] {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 14px rgba(255, 137, 90, 0.34);
}

/* =========================================================
   Tabla
   ========================================================= */
.cat-tabla-wrap[b-1l1pc4k134] {
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    overflow: hidden;
    flex: 0 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.cat-tabla[b-1l1pc4k134] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cat-tabla thead[b-1l1pc4k134] {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.cat-tabla th[b-1l1pc4k134] {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.cat-tabla tbody tr[b-1l1pc4k134] {
    border-bottom: 1px solid var(--color-borde-suave);
    cursor: pointer;
    transition: background var(--transicion);
}

.cat-tabla tbody tr:last-child[b-1l1pc4k134] { border-bottom: none; }
.cat-tabla tbody tr:hover[b-1l1pc4k134] { background: var(--color-acento-soft); }

.cat-tabla td[b-1l1pc4k134] {
    padding: 12px 16px;
    color: var(--color-oscuro-2);
    vertical-align: middle;
}

.cat-celda-razon[b-1l1pc4k134] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cat-razon[b-1l1pc4k134] {
    font-weight: 600;
    color: var(--color-oscuro);
}

.cat-apodo[b-1l1pc4k134] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

/* Columnas ocultas progresivamente en responsive */
.cat-col-tablet[b-1l1pc4k134] { display: none; }
.cat-col-desktop[b-1l1pc4k134] { display: none; }

@media (min-width: 640px) {
    .cat-col-tablet[b-1l1pc4k134] { display: table-cell; }
}
@media (min-width: 860px) {
    .cat-col-desktop[b-1l1pc4k134] { display: table-cell; }
}

.cat-col-acciones[b-1l1pc4k134] {
    width: 1%;
    white-space: nowrap;
}

/* Badge de estado */
.cat-badge[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.cat-badge-activo[b-1l1pc4k134] { background: var(--color-ok-bg); color: #16803D; }
.cat-badge-inactivo[b-1l1pc4k134] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.cat-badge-dot[b-1l1pc4k134] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Acciones */
.cat-acciones[b-1l1pc4k134] {
    display: flex;
    gap: 4px;
}

.cat-btn-icono[b-1l1pc4k134] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-texto-muted);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.cat-btn-icono:hover[b-1l1pc4k134] { background: var(--color-bg); color: var(--color-oscuro); }
.cat-btn-icono-peligro:hover[b-1l1pc4k134] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.cat-btn-icono-ok:hover[b-1l1pc4k134] { background: var(--color-ok-bg); color: #16803D; }

/* Estado vacío / cargando */
.cat-estado-vacio[b-1l1pc4k134] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-texto-muted);
    flex: 1;
    text-align: center;
}

.cat-estado-vacio svg[b-1l1pc4k134] {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.cat-estado-vacio p[b-1l1pc4k134] {
    margin: 0;
    font-size: 13.5px;
}

.cat-spinner[b-1l1pc4k134] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--color-borde);
    border-top-color: var(--color-acento);
    border-radius: 50%;
    animation: cli-girar-b-1l1pc4k134 0.7s linear infinite;
}

.cat-spinner-sm[b-1l1pc4k134] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
}

@keyframes cli-girar-b-1l1pc4k134 { to { transform: rotate(360deg); } }

/* =========================================================
   Paginación
   ========================================================= */
.cat-paginacion[b-1l1pc4k134] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cat-pag-info[b-1l1pc4k134] {
    font-size: 12px;
    color: var(--color-texto-muted);
}

.cat-pag-botones[b-1l1pc4k134] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cat-pag-btn[b-1l1pc4k134] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 8px;
    color: var(--color-oscuro-2);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}

.cat-pag-btn:hover:not(:disabled)[b-1l1pc4k134] {
    background: var(--color-bg);
    border-color: var(--color-acento);
}

.cat-pag-btn:disabled[b-1l1pc4k134] {
    opacity: 0.4;
    cursor: default;
}

.cat-pag-actual[b-1l1pc4k134] {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-oscuro);
}

/* =========================================================
   Modal — overlay + card
   ========================================================= */
.cat-modal-overlay[b-1l1pc4k134] {
    position: fixed;
    inset: 0;
    background: rgba(30, 29, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    animation: cli-overlay-in-b-1l1pc4k134 0.15s ease-out;
}

@keyframes cli-overlay-in-b-1l1pc4k134 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cat-modal[b-1l1pc4k134] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 29, 36, 0.28);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: cli-modal-in-b-1l1pc4k134 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cli-modal-in-b-1l1pc4k134 {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cat-modal-header[b-1l1pc4k134] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--color-borde-suave);
    flex: none;
}

.cat-modal-eyebrow[b-1l1pc4k134] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 4px;
}

.cat-modal-titulo[b-1l1pc4k134] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.cat-modal-cerrar[b-1l1pc4k134] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    border-radius: 9px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    flex: none;
    transition: background var(--transicion), color var(--transicion);
}

.cat-modal-cerrar:hover[b-1l1pc4k134] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.cat-modal-body[b-1l1pc4k134] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cat-modal-body[b-1l1pc4k134]  .cat-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cat-form-grid[b-1l1pc4k134] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cat-campo-full[b-1l1pc4k134] { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .cat-form-grid[b-1l1pc4k134] { grid-template-columns: 1fr; }
}

.cat-campo[b-1l1pc4k134] { display: flex; flex-direction: column; }

.cat-campo label[b-1l1pc4k134] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
}

.cat-req[b-1l1pc4k134] { color: var(--color-acento); }

.cat-modal-body[b-1l1pc4k134]  .cat-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 10px 12px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.cat-modal-body[b-1l1pc4k134]  .cat-textarea {
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}

.cat-modal-body[b-1l1pc4k134]  .cat-input::placeholder { color: var(--color-texto-muted); font-weight: 400; }

.cat-modal-body[b-1l1pc4k134]  .cat-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

.cat-modal-body[b-1l1pc4k134]  .cat-error {
    display: block;
    font-size: 11.5px;
    color: var(--color-peligro);
    margin-top: 4px;
    font-weight: 500;
}

.cat-alerta[b-1l1pc4k134] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--color-peligro-bg);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 11px 13px;
    border-radius: 10px;
}

.cat-modal-footer[b-1l1pc4k134] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--color-borde-suave);
    flex: none;
}

.cat-btn-cancelar[b-1l1pc4k134] {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}

.cat-btn-cancelar:hover[b-1l1pc4k134] { background: var(--color-bg); border-color: var(--color-oscuro-3); }

.cat-btn-guardar[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), filter var(--transicion);
}

.cat-btn-guardar:hover:not(:disabled)[b-1l1pc4k134] { transform: translateY(-1px); filter: brightness(1.03); }
.cat-btn-guardar:disabled[b-1l1pc4k134] { opacity: 0.7; cursor: default; transform: none; }

.cat-btn-peligro[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-peligro);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transicion);
}

.cat-btn-peligro:hover:not(:disabled)[b-1l1pc4k134] { filter: brightness(1.08); }
.cat-btn-peligro:disabled[b-1l1pc4k134] { opacity: 0.7; cursor: default; }

/* =========================================================
   Modal de confirmación (baja / reactivar)
   ========================================================= */
.cat-modal-confirm[b-1l1pc4k134] {
    max-width: 400px;
    padding: 28px 24px 22px;
    text-align: center;
    align-items: center;
}

.cat-confirm-icono[b-1l1pc4k134] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cat-confirm-icono svg[b-1l1pc4k134] { width: 26px; height: 26px; }

.cat-confirm-icono-peligro[b-1l1pc4k134] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.cat-confirm-icono-ok[b-1l1pc4k134] { background: var(--color-ok-bg); color: #16803D; }

.cat-confirm-titulo[b-1l1pc4k134] {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.cat-confirm-texto[b-1l1pc4k134] {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.cat-modal-confirm .cat-modal-footer[b-1l1pc4k134] {
    border-top: none;
    padding: 22px 0 0;
    justify-content: center;
    width: 100%;
}

/* =========================================================
   Específico de Catálogo: encabezado + sub-pestañas
   ========================================================= */
.cat-header[b-1l1pc4k134] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.cat-subtabs[b-1l1pc4k134] {
    display: flex;
    gap: 4px;
    background: var(--color-borde-suave);
    padding: 3px;
    border-radius: 11px;
}

.cat-subtab[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), color var(--transicion);
    white-space: nowrap;
}

.cat-subtab:hover[b-1l1pc4k134] { color: var(--color-oscuro); }

.cat-subtab.activa[b-1l1pc4k134] {
    background: #FFFFFF;
    color: var(--color-oscuro);
    box-shadow: 0 1px 3px rgba(62,60,71,0.10);
}

.cat-subtab.activa .cat-ic[b-1l1pc4k134] { color: var(--color-acento); }

/* Chip de categoría (Cámara / Grabador / Switch) */
.cat-chip[b-1l1pc4k134] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    background: var(--color-bg);
    border: 1px solid var(--color-borde);
    padding: 3px 9px;
    border-radius: 999px;
}

.cat-celda-nombre[b-1l1pc4k134] {
    font-weight: 600;
    color: var(--color-oscuro);
}

/* Filtro de categoría / lista con más ancho */
.cat-filtro-lista[b-1l1pc4k134] {
    min-width: 220px;
}

.cat-hint[b-1l1pc4k134] {
    font-size: 12px;
    color: var(--color-texto-muted);
    margin-top: -4px;
}

@media (max-width: 640px) {
    .cat-header[b-1l1pc4k134] { flex-direction: column; align-items: flex-start; }
    .cat-subtabs[b-1l1pc4k134] { width: 100%; overflow-x: auto; }
}
/* /Components/Pages/MDI/ModuloClientes.razor.rz.scp.css */
/* =========================================================
   Módulo Clientes — paleta y radios consistentes con el sistema
   ========================================================= */
.cli-modulo[b-ab6vgwbxfr] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --color-ok-bg: #EEFBF2;
    --radio: 12px;
    --radio-lg: 18px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    height: 100%;
}

.cli-ic[b-ab6vgwbxfr] { width: 18px; height: 18px; flex: none; display: block; }
.cli-ic-sm[b-ab6vgwbxfr] { width: 15px; height: 15px; }

/* =========================================================
   Toolbar
   ========================================================= */
.cli-toolbar[b-ab6vgwbxfr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cli-toolbar-izq[b-ab6vgwbxfr] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cli-titulo[b-ab6vgwbxfr] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-oscuro);
}

.cli-contador[b-ab6vgwbxfr] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-texto-muted);
}

.cli-toolbar-der[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buscador */
.cli-buscador[b-ab6vgwbxfr] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.cli-buscador .cli-ic[b-ab6vgwbxfr] {
    position: absolute;
    left: 12px;
    color: var(--color-texto-muted);
    pointer-events: none;
}

.cli-buscador input[b-ab6vgwbxfr] {
    width: 100%;
    min-width: 320px;
    flex: 1;
    max-width: 100%;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 9px 12px 9px 36px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.cli-buscador input:focus[b-ab6vgwbxfr] {
    font-weight: 600;
}

.cli-buscador input[b-ab6vgwbxfr]::placeholder { color: var(--color-texto-muted); }

.cli-buscador input:focus[b-ab6vgwbxfr] {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
}

/* Filtro select */
.cli-filtro-estado[b-ab6vgwbxfr] {
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-oscuro-2);
    padding: 9px 32px 9px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--transicion);
}

.cli-filtro-estado:focus[b-ab6vgwbxfr] {
    outline: none;
    border-color: var(--color-acento);
}

/* Botón nuevo */
.cli-btn-nuevo[b-ab6vgwbxfr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radio);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
    white-space: nowrap;
}

.cli-btn-nuevo:hover[b-ab6vgwbxfr] {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 14px rgba(255, 137, 90, 0.34);
}

/* =========================================================
   Tabla
   ========================================================= */
.cli-tabla-wrap[b-ab6vgwbxfr] {
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    overflow: hidden;
    flex: 0 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.cli-tabla[b-ab6vgwbxfr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cli-tabla thead[b-ab6vgwbxfr] {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.cli-tabla th[b-ab6vgwbxfr] {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.cli-tabla tbody tr[b-ab6vgwbxfr] {
    border-bottom: 1px solid var(--color-borde-suave);
    cursor: pointer;
    transition: background var(--transicion);
}

.cli-tabla tbody tr:last-child[b-ab6vgwbxfr] { border-bottom: none; }
.cli-tabla tbody tr:hover[b-ab6vgwbxfr] { background: var(--color-acento-soft); }

.cli-tabla td[b-ab6vgwbxfr] {
    padding: 12px 16px;
    color: var(--color-oscuro-2);
    vertical-align: middle;
}

.cli-celda-razon[b-ab6vgwbxfr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cli-razon[b-ab6vgwbxfr] {
    font-weight: 600;
    color: var(--color-oscuro);
}

.cli-apodo[b-ab6vgwbxfr] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

/* Columnas ocultas progresivamente en responsive */
.cli-col-tablet[b-ab6vgwbxfr] { display: none; }
.cli-col-desktop[b-ab6vgwbxfr] { display: none; }

@media (min-width: 640px) {
    .cli-col-tablet[b-ab6vgwbxfr] { display: table-cell; }
}
@media (min-width: 860px) {
    .cli-col-desktop[b-ab6vgwbxfr] { display: table-cell; }
}

.cli-col-acciones[b-ab6vgwbxfr] {
    width: 1%;
    white-space: nowrap;
}

/* Badge de estado */
.cli-badge[b-ab6vgwbxfr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.cli-badge-activo[b-ab6vgwbxfr] { background: var(--color-ok-bg); color: #16803D; }
.cli-badge-inactivo[b-ab6vgwbxfr] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.cli-badge-dot[b-ab6vgwbxfr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Acciones */
.cli-acciones[b-ab6vgwbxfr] {
    display: flex;
    gap: 4px;
}

.cli-btn-icono[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-texto-muted);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.cli-btn-icono:hover[b-ab6vgwbxfr] { background: var(--color-bg); color: var(--color-oscuro); }
.cli-btn-icono-peligro:hover[b-ab6vgwbxfr] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.cli-btn-icono-ok:hover[b-ab6vgwbxfr] { background: var(--color-ok-bg); color: #16803D; }

/* Estado vacío / cargando */
.cli-estado-vacio[b-ab6vgwbxfr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-texto-muted);
    flex: 1;
    text-align: center;
}

.cli-estado-vacio svg[b-ab6vgwbxfr] {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.cli-estado-vacio p[b-ab6vgwbxfr] {
    margin: 0;
    font-size: 13.5px;
}

.cli-spinner[b-ab6vgwbxfr] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--color-borde);
    border-top-color: var(--color-acento);
    border-radius: 50%;
    animation: cli-girar-b-ab6vgwbxfr 0.7s linear infinite;
}

.cli-spinner-sm[b-ab6vgwbxfr] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
}

/* Variante para el spinner sobre fondo claro (botón de buscar RUC/DNI, fondo
   blanco): NO se hereda el color blanco de .cli-spinner-sm porque quedaría
   invisible — aquí el anillo es gris con el segmento superior naranja. */
.cli-spinner-claro[b-ab6vgwbxfr] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: var(--color-borde);
    border-top-color: var(--color-acento);
}

@keyframes cli-girar-b-ab6vgwbxfr { to { transform: rotate(360deg); } }

/* ---------- Consulta SUNAT/RENIEC (Documento) ---------- */
.cli-campo-con-btn[b-ab6vgwbxfr] {
    display: flex;
    gap: 6px;
}
.cli-campo-con-btn .cli-input[b-ab6vgwbxfr] { flex: 1; min-width: 0; }

.cli-btn-inline[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex: none;
    border: 1.5px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 10px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    transition: background 180ms, border-color 180ms, color 180ms;
}
.cli-btn-inline:hover[b-ab6vgwbxfr] { border-color: var(--color-acento); color: var(--color-acento); }
.cli-btn-buscar:hover[b-ab6vgwbxfr] { background: var(--color-acento-soft); }
.cli-btn-inline:disabled[b-ab6vgwbxfr] { opacity: 0.6; cursor: default; }

.cli-msg-documento[b-ab6vgwbxfr] { font-size: 12.5px; margin: 6px 0 0; font-weight: 500; }
.cli-msg-ok[b-ab6vgwbxfr] { color: #16803D; }
.cli-msg-error[b-ab6vgwbxfr] { color: var(--color-peligro); }

/* =========================================================
   Paginación
   ========================================================= */
.cli-paginacion[b-ab6vgwbxfr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cli-pag-info[b-ab6vgwbxfr] {
    font-size: 12px;
    color: var(--color-texto-muted);
}

.cli-pag-botones[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cli-pag-btn[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 8px;
    color: var(--color-oscuro-2);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}

.cli-pag-btn:hover:not(:disabled)[b-ab6vgwbxfr] {
    background: var(--color-bg);
    border-color: var(--color-acento);
}

.cli-pag-btn:disabled[b-ab6vgwbxfr] {
    opacity: 0.4;
    cursor: default;
}

.cli-pag-actual[b-ab6vgwbxfr] {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-oscuro);
}

/* =========================================================
   Modal — overlay + card
   ========================================================= */
.cli-modal-overlay[b-ab6vgwbxfr] {
    position: fixed;
    inset: 0;
    background: rgba(30, 29, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    animation: cli-overlay-in-b-ab6vgwbxfr 0.15s ease-out;
}

@keyframes cli-overlay-in-b-ab6vgwbxfr {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cli-modal[b-ab6vgwbxfr] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 29, 36, 0.28);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: cli-modal-in-b-ab6vgwbxfr 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cli-modal-in-b-ab6vgwbxfr {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cli-modal-header[b-ab6vgwbxfr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--color-borde-suave);
    flex: none;
}

.cli-modal-eyebrow[b-ab6vgwbxfr] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 4px;
}

.cli-modal-titulo[b-ab6vgwbxfr] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.cli-modal-cerrar[b-ab6vgwbxfr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    border-radius: 9px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    flex: none;
    transition: background var(--transicion), color var(--transicion);
}

.cli-modal-cerrar:hover[b-ab6vgwbxfr] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.cli-modal-body[b-ab6vgwbxfr] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cli-modal-body[b-ab6vgwbxfr]  .cli-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cli-form-grid[b-ab6vgwbxfr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cli-campo-full[b-ab6vgwbxfr] { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .cli-form-grid[b-ab6vgwbxfr] { grid-template-columns: 1fr; }
}

.cli-campo[b-ab6vgwbxfr] { display: flex; flex-direction: column; }

.cli-campo label[b-ab6vgwbxfr] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
}

.cli-req[b-ab6vgwbxfr] { color: var(--color-acento); }

.cli-modal-body[b-ab6vgwbxfr]  .cli-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 10px 12px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.cli-modal-body[b-ab6vgwbxfr]  .cli-textarea {
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}

.cli-modal-body[b-ab6vgwbxfr]  .cli-input::placeholder { color: var(--color-texto-muted); font-weight: 400; }

.cli-modal-body[b-ab6vgwbxfr]  .cli-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

.cli-modal-body[b-ab6vgwbxfr]  .cli-error {
    display: block;
    font-size: 11.5px;
    color: var(--color-peligro);
    margin-top: 4px;
    font-weight: 500;
}

.cli-alerta[b-ab6vgwbxfr] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--color-peligro-bg);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 11px 13px;
    border-radius: 10px;
}

.cli-modal-footer[b-ab6vgwbxfr] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--color-borde-suave);
    flex: none;
}

.cli-btn-cancelar[b-ab6vgwbxfr] {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}

.cli-btn-cancelar:hover[b-ab6vgwbxfr] { background: var(--color-bg); border-color: var(--color-oscuro-3); }

.cli-btn-guardar[b-ab6vgwbxfr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), filter var(--transicion);
}

.cli-btn-guardar:hover:not(:disabled)[b-ab6vgwbxfr] { transform: translateY(-1px); filter: brightness(1.03); }
.cli-btn-guardar:disabled[b-ab6vgwbxfr] { opacity: 0.7; cursor: default; transform: none; }

.cli-btn-peligro[b-ab6vgwbxfr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-peligro);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transicion);
}

.cli-btn-peligro:hover:not(:disabled)[b-ab6vgwbxfr] { filter: brightness(1.08); }
.cli-btn-peligro:disabled[b-ab6vgwbxfr] { opacity: 0.7; cursor: default; }

/* =========================================================
   Modal de confirmación (baja / reactivar)
   ========================================================= */
.cli-modal-confirm[b-ab6vgwbxfr] {
    max-width: 400px;
    padding: 28px 24px 22px;
    text-align: center;
    align-items: center;
}

.cli-confirm-icono[b-ab6vgwbxfr] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cli-confirm-icono svg[b-ab6vgwbxfr] { width: 26px; height: 26px; }

.cli-confirm-icono-peligro[b-ab6vgwbxfr] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.cli-confirm-icono-ok[b-ab6vgwbxfr] { background: var(--color-ok-bg); color: #16803D; }

.cli-confirm-titulo[b-ab6vgwbxfr] {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.cli-confirm-texto[b-ab6vgwbxfr] {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.cli-modal-confirm .cli-modal-footer[b-ab6vgwbxfr] {
    border-top: none;
    padding: 22px 0 0;
    justify-content: center;
    width: 100%;
}
/* /Components/Pages/MDI/ModuloEmpresa.razor.rz.scp.css */
.emp-modulo[b-f63s3qf9gc] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-borde: #E4DFE2;
    --color-texto-muted: #9A96A3;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --color-ok-bg: #EEFBF2;
    --radio: 12px;
    --radio-lg: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    max-width: 720px;
}

.emp-titulo[b-f63s3qf9gc] { font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.emp-subtitulo[b-f63s3qf9gc] { font-size: 13px; color: var(--color-texto-muted); margin: 0 0 18px; }

.emp-vacio[b-f63s3qf9gc] { display: flex; justify-content: center; padding: 40px; }
.emp-spinner[b-f63s3qf9gc] { width: 22px; height: 22px; border: 3px solid var(--color-borde); border-top-color: var(--color-acento); border-radius: 50%; animation: emp-girar-b-f63s3qf9gc 0.8s linear infinite; }
.emp-spinner-sm[b-f63s3qf9gc] { width: 15px; height: 15px; border-width: 2px; display: inline-block; vertical-align: middle; }
@keyframes emp-girar-b-f63s3qf9gc { to { transform: rotate(360deg); } }

.emp-tarjeta[b-f63s3qf9gc] {
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    padding: 22px;
}

.emp-form-grid[b-f63s3qf9gc] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.emp-campo-full[b-f63s3qf9gc] { grid-column: 1 / -1; }
.emp-campo[b-f63s3qf9gc] { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--color-oscuro-2); }
.emp-req[b-f63s3qf9gc] { color: var(--color-peligro); }
.emp-hint-inline[b-f63s3qf9gc] { font-weight: 400; color: var(--color-texto-muted); text-transform: none; }

.emp-input[b-f63s3qf9gc] {
    padding: 9px 11px; border: 1px solid var(--color-borde); border-radius: 9px;
    font-size: 13px; font-family: inherit; color: var(--color-oscuro);
}
.emp-input:focus[b-f63s3qf9gc] { outline: none; border-color: var(--color-acento); }

.emp-logo-control[b-f63s3qf9gc] {
    position: relative;
    width: 220px; height: 120px;
    border: 1.5px dashed var(--color-borde);
    border-radius: 12px;
    background: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; text-align: center;
}
.emp-logo-control img[b-f63s3qf9gc] { max-width: 100%; max-height: 100%; object-fit: contain; }
.emp-logo-vacio[b-f63s3qf9gc] { font-size: 12px; color: var(--color-texto-muted); padding: 10px; }
.emp-logo-overlay[b-f63s3qf9gc] {
    position: absolute; inset: 0; background: rgba(62,60,71,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 180ms;
}
.emp-logo-control:hover .emp-logo-overlay[b-f63s3qf9gc] { opacity: 1; }
.emp-logo-btn[b-f63s3qf9gc] { background: #FFFFFF; border: none; border-radius: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.emp-logo-btn-peligro[b-f63s3qf9gc] { background: var(--color-peligro); color: #FFFFFF; }

.emp-alerta[b-f63s3qf9gc] { background: var(--color-peligro-bg); color: var(--color-peligro); padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-top: 12px; }
.emp-exito[b-f63s3qf9gc] { background: var(--color-ok-bg); color: #16803D; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-top: 12px; }

.emp-acciones[b-f63s3qf9gc] { margin-top: 18px; display: flex; justify-content: flex-end; }
.emp-btn-guardar[b-f63s3qf9gc] {
    background: var(--color-acento); color: #FFFFFF; border: none; border-radius: var(--radio);
    padding: 10px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.emp-btn-guardar:hover:not(:disabled)[b-f63s3qf9gc] { background: var(--color-acento-hover); }
.emp-btn-guardar:disabled[b-f63s3qf9gc] { opacity: 0.6; cursor: not-allowed; }
/* /Components/Pages/MDI/ModuloProyectos.razor.rz.scp.css */
/* =========================================================
   Módulo Clientes — paleta y radios consistentes con el sistema
   ========================================================= */
.pry-modulo[b-zh5imgz6qw] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --color-ok-bg: #EEFBF2;
    --radio: 12px;
    --radio-lg: 18px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    height: 100%;
}

.pry-ic[b-zh5imgz6qw] { width: 18px; height: 18px; flex: none; display: block; }
.pry-ic-sm[b-zh5imgz6qw] { width: 15px; height: 15px; }

/* =========================================================
   Toolbar
   ========================================================= */
.pry-toolbar[b-zh5imgz6qw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pry-toolbar-izq[b-zh5imgz6qw] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pry-titulo[b-zh5imgz6qw] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-oscuro);
}

.pry-contador[b-zh5imgz6qw] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-texto-muted);
}

.pry-toolbar-der[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buscador */
.pry-buscador[b-zh5imgz6qw] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.pry-buscador .pry-ic[b-zh5imgz6qw] {
    position: absolute;
    left: 12px;
    color: var(--color-texto-muted);
    pointer-events: none;
}

.pry-buscador input[b-zh5imgz6qw] {
    width: 100%;
    min-width: 320px;
    flex: 1;
    max-width: 100%;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 9px 12px 9px 36px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.pry-buscador input:focus[b-zh5imgz6qw] {
    font-weight: 600;
}

.pry-buscador input[b-zh5imgz6qw]::placeholder { color: var(--color-texto-muted); }

.pry-buscador input:focus[b-zh5imgz6qw] {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
}

/* Filtro select */
.pry-filtro[b-zh5imgz6qw] {
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-oscuro-2);
    padding: 9px 32px 9px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--transicion);
}

.pry-filtro:focus[b-zh5imgz6qw] {
    outline: none;
    border-color: var(--color-acento);
}

/* Botón nuevo */
.pry-btn-nuevo[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radio);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
    white-space: nowrap;
}

.pry-btn-nuevo:hover[b-zh5imgz6qw] {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 14px rgba(255, 137, 90, 0.34);
}

/* =========================================================
   Tabla
   ========================================================= */
.pry-tabla-wrap[b-zh5imgz6qw] {
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    overflow: hidden;
    flex: 0 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.pry-tabla[b-zh5imgz6qw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.pry-tabla thead[b-zh5imgz6qw] {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.pry-tabla th[b-zh5imgz6qw] {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.pry-tabla tbody tr[b-zh5imgz6qw] {
    border-bottom: 1px solid var(--color-borde-suave);
    cursor: pointer;
    transition: background var(--transicion);
}

.pry-tabla tbody tr:last-child[b-zh5imgz6qw] { border-bottom: none; }
.pry-tabla tbody tr:hover[b-zh5imgz6qw] { background: var(--color-acento-soft); }

.pry-tabla td[b-zh5imgz6qw] {
    padding: 12px 16px;
    color: var(--color-oscuro-2);
    vertical-align: middle;
}

.pry-celda-razon[b-zh5imgz6qw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pry-razon[b-zh5imgz6qw] {
    font-weight: 600;
    color: var(--color-oscuro);
}

.pry-apodo[b-zh5imgz6qw] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

/* Columnas ocultas progresivamente en responsive */
.pry-col-tablet[b-zh5imgz6qw] { display: none; }
.pry-col-desktop[b-zh5imgz6qw] { display: none; }

@media (min-width: 640px) {
    .pry-col-tablet[b-zh5imgz6qw] { display: table-cell; }
}
@media (min-width: 860px) {
    .pry-col-desktop[b-zh5imgz6qw] { display: table-cell; }
}

.pry-col-acciones[b-zh5imgz6qw] {
    width: 1%;
    white-space: nowrap;
}

/* Badge de estado */
.pry-badge[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.pry-badge-activo[b-zh5imgz6qw] { background: var(--color-ok-bg); color: #16803D; }
.pry-badge-inactivo[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.pry-badge-dot[b-zh5imgz6qw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Acciones */
.pry-acciones[b-zh5imgz6qw] {
    display: flex;
    gap: 4px;
}

.pry-btn-icono[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-texto-muted);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.pry-btn-icono:hover[b-zh5imgz6qw] { background: var(--color-bg); color: var(--color-oscuro); }
.pry-btn-icono-peligro:hover[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.pry-btn-icono-ok:hover[b-zh5imgz6qw] { background: var(--color-ok-bg); color: #16803D; }

/* Estado vacío / cargando */
.pry-estado-vacio[b-zh5imgz6qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-texto-muted);
    flex: 1;
    text-align: center;
}

.pry-estado-vacio svg[b-zh5imgz6qw] {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.pry-estado-vacio p[b-zh5imgz6qw] {
    margin: 0;
    font-size: 13.5px;
}

.pry-spinner[b-zh5imgz6qw] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--color-borde);
    border-top-color: var(--color-acento);
    border-radius: 50%;
    animation: cli-girar-b-zh5imgz6qw 0.7s linear infinite;
}

.pry-spinner-sm[b-zh5imgz6qw] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
}

@keyframes cli-girar-b-zh5imgz6qw { to { transform: rotate(360deg); } }

/* =========================================================
   Paginación
   ========================================================= */
.pry-paginacion[b-zh5imgz6qw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pry-pag-info[b-zh5imgz6qw] {
    font-size: 12px;
    color: var(--color-texto-muted);
}

.pry-pag-botones[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pry-pag-btn[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 8px;
    color: var(--color-oscuro-2);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}

.pry-pag-btn:hover:not(:disabled)[b-zh5imgz6qw] {
    background: var(--color-bg);
    border-color: var(--color-acento);
}

.pry-pag-btn:disabled[b-zh5imgz6qw] {
    opacity: 0.4;
    cursor: default;
}

.pry-pag-actual[b-zh5imgz6qw] {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-oscuro);
}

/* =========================================================
   Modal — overlay + card
   ========================================================= */
.pry-modal-overlay[b-zh5imgz6qw] {
    position: fixed;
    inset: 0;
    background: rgba(30, 29, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    animation: cli-overlay-in-b-zh5imgz6qw 0.15s ease-out;
}

@keyframes cli-overlay-in-b-zh5imgz6qw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pry-modal[b-zh5imgz6qw] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 29, 36, 0.28);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: cli-modal-in-b-zh5imgz6qw 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cli-modal-in-b-zh5imgz6qw {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pry-modal-header[b-zh5imgz6qw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--color-borde-suave);
    flex: none;
}

.pry-modal-eyebrow[b-zh5imgz6qw] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 4px;
}

.pry-modal-titulo[b-zh5imgz6qw] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.pry-modal-cerrar[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    border-radius: 9px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    flex: none;
    transition: background var(--transicion), color var(--transicion);
}

.pry-modal-cerrar:hover[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.pry-modal-body[b-zh5imgz6qw] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pry-modal-body[b-zh5imgz6qw]  .pry-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pry-form-grid[b-zh5imgz6qw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pry-campo-full[b-zh5imgz6qw] { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .pry-form-grid[b-zh5imgz6qw] { grid-template-columns: 1fr; }
}

.pry-campo[b-zh5imgz6qw] { display: flex; flex-direction: column; }

.pry-campo label[b-zh5imgz6qw] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
}

.pry-req[b-zh5imgz6qw] { color: var(--color-acento); }

.pry-modal-body[b-zh5imgz6qw]  .pry-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 10px 12px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.pry-modal-body[b-zh5imgz6qw]  .pry-textarea {
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}

.pry-modal-body[b-zh5imgz6qw]  .pry-input::placeholder { color: var(--color-texto-muted); font-weight: 400; }

.pry-modal-body[b-zh5imgz6qw]  .pry-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

.pry-modal-body[b-zh5imgz6qw]  .pry-error {
    display: block;
    font-size: 11.5px;
    color: var(--color-peligro);
    margin-top: 4px;
    font-weight: 500;
}

.pry-alerta[b-zh5imgz6qw] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--color-peligro-bg);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 11px 13px;
    border-radius: 10px;
}

.pry-modal-footer[b-zh5imgz6qw] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--color-borde-suave);
    flex: none;
}

.pry-btn-cancelar[b-zh5imgz6qw] {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}

.pry-btn-cancelar:hover[b-zh5imgz6qw] { background: var(--color-bg); border-color: var(--color-oscuro-3); }

.pry-btn-guardar[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), filter var(--transicion);
}

.pry-btn-guardar:hover:not(:disabled)[b-zh5imgz6qw] { transform: translateY(-1px); filter: brightness(1.03); }
.pry-btn-guardar:disabled[b-zh5imgz6qw] { opacity: 0.7; cursor: default; transform: none; }

.pry-btn-peligro[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-peligro);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transicion);
}

.pry-btn-peligro:hover:not(:disabled)[b-zh5imgz6qw] { filter: brightness(1.08); }
.pry-btn-peligro:disabled[b-zh5imgz6qw] { opacity: 0.7; cursor: default; }

/* =========================================================
   Modal de confirmación (baja / reactivar)
   ========================================================= */
.pry-modal-confirm[b-zh5imgz6qw] {
    max-width: 400px;
    padding: 28px 24px 22px;
    text-align: center;
    align-items: center;
}

.pry-confirm-icono[b-zh5imgz6qw] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.pry-confirm-icono svg[b-zh5imgz6qw] { width: 26px; height: 26px; }

.pry-confirm-icono-peligro[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.pry-confirm-icono-ok[b-zh5imgz6qw] { background: var(--color-ok-bg); color: #16803D; }

.pry-confirm-titulo[b-zh5imgz6qw] {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.pry-confirm-texto[b-zh5imgz6qw] {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.pry-modal-confirm .pry-modal-footer[b-zh5imgz6qw] {
    border-top: none;
    padding: 22px 0 0;
    justify-content: center;
    width: 100%;
}

/* =========================================================
   Específico de Proyectos
   ========================================================= */

/* Celda nombre + responsable debajo */
.pry-celda-nombre[b-zh5imgz6qw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pry-nombre[b-zh5imgz6qw] {
    font-weight: 600;
    color: var(--color-oscuro);
}

.pry-responsable[b-zh5imgz6qw] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

/* Chips de estado */
.pry-chip[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.pry-chip-trabajo[b-zh5imgz6qw] {
    color: #6366F1;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.pry-chip-operativo[b-zh5imgz6qw] {
    color: #16803D;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

/* Badges de equipos en la fila */
.pry-equipos[b-zh5imgz6qw] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pry-equipo-badge[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    background: var(--color-bg);
    border: 1px solid var(--color-borde);
    padding: 2px 7px;
    border-radius: 6px;
}

.pry-equipo-badge .pry-ic[b-zh5imgz6qw] { color: var(--color-texto-muted); }

.pry-sin-equipos[b-zh5imgz6qw] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
    font-style: italic;
}

.pry-ic-xs[b-zh5imgz6qw] { width: 13px; height: 13px; }

/* Modal más ancho para proyectos (más campos) */
.pry-modal-lg[b-zh5imgz6qw] {
    max-width: 640px;
}

.pry-estados-col[b-zh5imgz6qw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pry-btn-icono-acento:hover[b-zh5imgz6qw] { background: var(--color-acento-soft); color: var(--color-acento); }

.pry-mant-badge[b-zh5imgz6qw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-oscuro-2);
}

.pry-mant-label[b-zh5imgz6qw] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
}

.pry-mant-vencido[b-zh5imgz6qw] { color: var(--color-peligro); }
.pry-mant-vencido .pry-mant-label[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.pry-mant-proximo[b-zh5imgz6qw] { color: #B45309; }
.pry-mant-proximo .pry-mant-label[b-zh5imgz6qw] { background: #FEF3C7; color: #92400E; }

/* ---------- Panel de próximos mantenimientos ---------- */
.pry-mant-panel[b-zh5imgz6qw] {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    overflow: hidden;
    margin-bottom: 2px;
}
.pry-mant-panel-header[b-zh5imgz6qw] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: none; border: none;
    font-size: 13px; font-weight: 700; color: var(--color-oscuro-2);
    cursor: pointer; font-family: inherit;
}
.pry-mant-panel-header svg[b-zh5imgz6qw] { transition: transform var(--transicion); flex: none; }
.pry-mant-panel-lista[b-zh5imgz6qw] {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--color-borde-suave);
    max-height: 220px; overflow-y: auto;
}
.pry-mant-panel-item[b-zh5imgz6qw] {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px;
    border: none; border-bottom: 1px solid var(--color-borde-suave);
    background: none; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 13px;
    transition: background var(--transicion);
}
.pry-mant-panel-item:last-child[b-zh5imgz6qw] { border-bottom: none; }
.pry-mant-panel-item:hover[b-zh5imgz6qw] { background: var(--color-acento-soft); }
.pry-mant-panel-nombre[b-zh5imgz6qw] { font-weight: 600; color: var(--color-oscuro); }
.pry-mant-panel-cliente[b-zh5imgz6qw] { color: var(--color-texto-muted); font-size: 12px; margin-left: auto; }

.pry-campo-con-btn[b-zh5imgz6qw] {
    display: flex;
    gap: 6px;
}
.pry-campo-con-btn .pry-input[b-zh5imgz6qw] { flex: 1; min-width: 0; }

.pry-btn-inline[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex: none;
    border: 1.5px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 10px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    transition: background 180ms, border-color 180ms, color 180ms;
}
.pry-btn-inline:hover[b-zh5imgz6qw] { border-color: var(--color-acento); color: var(--color-acento); }
.pry-btn-buscar:hover[b-zh5imgz6qw] { background: var(--color-acento-soft); }

.pry-btn-inline-sm[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--color-texto-muted);
    cursor: pointer;
}
.pry-btn-inline-sm:hover[b-zh5imgz6qw] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.pry-panel-cliente[b-zh5imgz6qw] {
    background: var(--color-bg);
    border: 1.5px dashed var(--color-borde);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pry-panel-cliente-header[b-zh5imgz6qw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pry-panel-cliente-titulo[b-zh5imgz6qw] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-acento);
}

.pry-panel-cliente .pry-input[b-zh5imgz6qw] {
    background: #FFFFFF;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--color-oscuro);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 180ms, box-shadow 180ms;
}
.pry-panel-cliente .pry-input:focus[b-zh5imgz6qw] {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

.pry-msg-documento[b-zh5imgz6qw] { font-size: 12.5px; margin: 0; font-weight: 500; }
.pry-msg-ok[b-zh5imgz6qw] { color: #16803D; }
.pry-msg-error[b-zh5imgz6qw] { color: var(--color-peligro); }

.pry-btn-guardar-sm[b-zh5imgz6qw] {
    align-self: flex-start;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(255, 137, 90, 0.25);
}
.pry-btn-guardar-sm:disabled[b-zh5imgz6qw] { opacity: 0.5; cursor: default; }
/* /Components/Pages/MDI/ModuloUsuarios.razor.rz.scp.css */
/* =========================================================
   Módulo Clientes — paleta y radios consistentes con el sistema
   ========================================================= */
.usr-modulo[b-xhoy997swp] {
    --color-bg: #F6F2F4;
    --color-oscuro: #3E3C47;
    --color-oscuro-2: #514F5C;
    --color-oscuro-3: #65616E;
    --color-acento: #FF895A;
    --color-acento-hover: #E67548;
    --color-acento-soft: rgba(255, 137, 90, 0.12);
    --color-borde: #E4DFE2;
    --color-borde-suave: #EFE9EC;
    --color-texto-muted: #9A96A3;
    --color-texto-secundario: #6B6874;
    --color-peligro: #C4453B;
    --color-peligro-bg: #FBEBE9;
    --color-ok: #22C55E;
    --color-ok-bg: #EEFBF2;
    --radio: 12px;
    --radio-lg: 18px;
    --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-oscuro);
    height: 100%;
}

.usr-ic[b-xhoy997swp] { width: 18px; height: 18px; flex: none; display: block; }
.usr-ic-sm[b-xhoy997swp] { width: 15px; height: 15px; }

/* =========================================================
   Toolbar
   ========================================================= */
.usr-toolbar[b-xhoy997swp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.usr-toolbar-izq[b-xhoy997swp] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.usr-titulo[b-xhoy997swp] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-oscuro);
}

.usr-contador[b-xhoy997swp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-texto-muted);
}

.usr-toolbar-der[b-xhoy997swp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buscador */
.usr-buscador[b-xhoy997swp] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.usr-buscador .usr-ic[b-xhoy997swp] {
    position: absolute;
    left: 12px;
    color: var(--color-texto-muted);
    pointer-events: none;
}

.usr-buscador input[b-xhoy997swp] {
    width: 100%;
    min-width: 320px;
    flex: 1;
    max-width: 100%;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 9px 12px 9px 36px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.usr-buscador input:focus[b-xhoy997swp] {
    font-weight: 600;
}

.usr-buscador input[b-xhoy997swp]::placeholder { color: var(--color-texto-muted); }

.usr-buscador input:focus[b-xhoy997swp] {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
}

/* Filtro select */
.usr-filtro[b-xhoy997swp] {
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio);
    background: #FFFFFF;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--color-oscuro-2);
    padding: 9px 32px 9px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A96A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--transicion);
}

.usr-filtro:focus[b-xhoy997swp] {
    outline: none;
    border-color: var(--color-acento);
}

/* Botón nuevo */
.usr-btn-nuevo[b-xhoy997swp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radio);
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
    white-space: nowrap;
}

.usr-btn-nuevo:hover[b-xhoy997swp] {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 14px rgba(255, 137, 90, 0.34);
}

/* =========================================================
   Tabla
   ========================================================= */
.usr-tabla-wrap[b-xhoy997swp] {
    background: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 1px 4px rgba(62,60,71,0.07);
    overflow: hidden;
    flex: 0 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.usr-tabla[b-xhoy997swp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.usr-tabla thead[b-xhoy997swp] {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.usr-tabla th[b-xhoy997swp] {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.usr-tabla tbody tr[b-xhoy997swp] {
    border-bottom: 1px solid var(--color-borde-suave);
    cursor: pointer;
    transition: background var(--transicion);
}

.usr-tabla tbody tr:last-child[b-xhoy997swp] { border-bottom: none; }
.usr-tabla tbody tr:hover[b-xhoy997swp] { background: var(--color-acento-soft); }

.usr-tabla td[b-xhoy997swp] {
    padding: 12px 16px;
    color: var(--color-oscuro-2);
    vertical-align: middle;
}

.usr-celda-razon[b-xhoy997swp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.usr-razon[b-xhoy997swp] {
    font-weight: 600;
    color: var(--color-oscuro);
}

.usr-apodo[b-xhoy997swp] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
}

/* Columnas ocultas progresivamente en responsive */
.usr-col-tablet[b-xhoy997swp] { display: none; }
.usr-col-desktop[b-xhoy997swp] { display: none; }

@media (min-width: 640px) {
    .usr-col-tablet[b-xhoy997swp] { display: table-cell; }
}
@media (min-width: 860px) {
    .usr-col-desktop[b-xhoy997swp] { display: table-cell; }
}

.usr-col-acciones[b-xhoy997swp] {
    width: 1%;
    white-space: nowrap;
}

/* Badge de estado */
.usr-badge[b-xhoy997swp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.usr-badge-activo[b-xhoy997swp] { background: var(--color-ok-bg); color: #16803D; }
.usr-badge-inactivo[b-xhoy997swp] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.usr-badge-dot[b-xhoy997swp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Acciones */
.usr-acciones[b-xhoy997swp] {
    display: flex;
    gap: 4px;
}

.usr-btn-icono[b-xhoy997swp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-texto-muted);
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.usr-btn-icono:hover[b-xhoy997swp] { background: var(--color-bg); color: var(--color-oscuro); }
.usr-btn-icono-peligro:hover[b-xhoy997swp] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.usr-btn-icono-ok:hover[b-xhoy997swp] { background: var(--color-ok-bg); color: #16803D; }

/* Estado vacío / cargando */
.usr-estado-vacio[b-xhoy997swp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-texto-muted);
    flex: 1;
    text-align: center;
}

.usr-estado-vacio svg[b-xhoy997swp] {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.usr-estado-vacio p[b-xhoy997swp] {
    margin: 0;
    font-size: 13.5px;
}

.usr-spinner[b-xhoy997swp] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--color-borde);
    border-top-color: var(--color-acento);
    border-radius: 50%;
    animation: cli-girar-b-xhoy997swp 0.7s linear infinite;
}

.usr-spinner-sm[b-xhoy997swp] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
}

@keyframes cli-girar-b-xhoy997swp { to { transform: rotate(360deg); } }

/* =========================================================
   Paginación
   ========================================================= */
.usr-paginacion[b-xhoy997swp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.usr-pag-info[b-xhoy997swp] {
    font-size: 12px;
    color: var(--color-texto-muted);
}

.usr-pag-botones[b-xhoy997swp] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.usr-pag-btn[b-xhoy997swp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-borde);
    background: #FFFFFF;
    border-radius: 8px;
    color: var(--color-oscuro-2);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}

.usr-pag-btn:hover:not(:disabled)[b-xhoy997swp] {
    background: var(--color-bg);
    border-color: var(--color-acento);
}

.usr-pag-btn:disabled[b-xhoy997swp] {
    opacity: 0.4;
    cursor: default;
}

.usr-pag-actual[b-xhoy997swp] {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-oscuro);
}

/* =========================================================
   Modal — overlay + card
   ========================================================= */
.usr-modal-overlay[b-xhoy997swp] {
    position: fixed;
    inset: 0;
    background: rgba(30, 29, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    animation: cli-overlay-in-b-xhoy997swp 0.15s ease-out;
}

@keyframes cli-overlay-in-b-xhoy997swp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.usr-modal[b-xhoy997swp] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(30, 29, 36, 0.28);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: cli-modal-in-b-xhoy997swp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cli-modal-in-b-xhoy997swp {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.usr-modal-header[b-xhoy997swp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--color-borde-suave);
    flex: none;
}

.usr-modal-eyebrow[b-xhoy997swp] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 4px;
}

.usr-modal-titulo[b-xhoy997swp] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-oscuro);
    letter-spacing: -0.01em;
}

.usr-modal-cerrar[b-xhoy997swp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg);
    border-radius: 9px;
    color: var(--color-oscuro-3);
    cursor: pointer;
    flex: none;
    transition: background var(--transicion), color var(--transicion);
}

.usr-modal-cerrar:hover[b-xhoy997swp] { background: var(--color-peligro-bg); color: var(--color-peligro); }

.usr-modal-body[b-xhoy997swp] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usr-modal-body[b-xhoy997swp]  .usr-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usr-form-grid[b-xhoy997swp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.usr-campo-full[b-xhoy997swp] { grid-column: 1 / -1; }

@media (max-width: 480px) {
    .usr-form-grid[b-xhoy997swp] { grid-template-columns: 1fr; }
}

.usr-campo[b-xhoy997swp] { display: flex; flex-direction: column; }

.usr-campo label[b-xhoy997swp] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
}

.usr-req[b-xhoy997swp] { color: var(--color-acento); }

.usr-modal-body[b-xhoy997swp]  .usr-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-oscuro);
    padding: 10px 12px;
    transition: border-color var(--transicion), box-shadow var(--transicion), font-weight var(--transicion);
}

.usr-modal-body[b-xhoy997swp]  .usr-textarea {
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}

.usr-modal-body[b-xhoy997swp]  .usr-input::placeholder { color: var(--color-texto-muted); font-weight: 400; }

.usr-modal-body[b-xhoy997swp]  .usr-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px var(--color-acento-soft);
    font-weight: 600;
}

.usr-modal-body[b-xhoy997swp]  .usr-error {
    display: block;
    font-size: 11.5px;
    color: var(--color-peligro);
    margin-top: 4px;
    font-weight: 500;
}

.usr-alerta[b-xhoy997swp] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--color-peligro-bg);
    color: var(--color-peligro);
    font-size: 13px;
    padding: 11px 13px;
    border-radius: 10px;
}

.usr-modal-footer[b-xhoy997swp] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid var(--color-borde-suave);
    flex: none;
}

.usr-btn-cancelar[b-xhoy997swp] {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}

.usr-btn-cancelar:hover[b-xhoy997swp] { background: var(--color-bg); border-color: var(--color-oscuro-3); }

.usr-btn-guardar[b-xhoy997swp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 137, 90, 0.28);
    transition: transform var(--transicion), filter var(--transicion);
}

.usr-btn-guardar:hover:not(:disabled)[b-xhoy997swp] { transform: translateY(-1px); filter: brightness(1.03); }
.usr-btn-guardar:disabled[b-xhoy997swp] { opacity: 0.7; cursor: default; transform: none; }

.usr-btn-peligro[b-xhoy997swp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-peligro);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--transicion);
}

.usr-btn-peligro:hover:not(:disabled)[b-xhoy997swp] { filter: brightness(1.08); }
.usr-btn-peligro:disabled[b-xhoy997swp] { opacity: 0.7; cursor: default; }

/* =========================================================
   Modal de confirmación (baja / reactivar)
   ========================================================= */
.usr-modal-confirm[b-xhoy997swp] {
    max-width: 400px;
    padding: 28px 24px 22px;
    text-align: center;
    align-items: center;
}

.usr-confirm-icono[b-xhoy997swp] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.usr-confirm-icono svg[b-xhoy997swp] { width: 26px; height: 26px; }

.usr-confirm-icono-peligro[b-xhoy997swp] { background: var(--color-peligro-bg); color: var(--color-peligro); }
.usr-confirm-icono-ok[b-xhoy997swp] { background: var(--color-ok-bg); color: #16803D; }

.usr-confirm-titulo[b-xhoy997swp] {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-oscuro);
}

.usr-confirm-texto[b-xhoy997swp] {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.usr-modal-confirm .usr-modal-footer[b-xhoy997swp] {
    border-top: none;
    padding: 22px 0 0;
    justify-content: center;
    width: 100%;
}

/* =========================================================
   Específico de Usuarios: avatar + chip de rol
   ========================================================= */
.usr-celda-nombre[b-xhoy997swp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usr-avatar[b-xhoy997swp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9968, #FF7A48);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.usr-celda-textos[b-xhoy997swp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.usr-nombre[b-xhoy997swp] {
    font-weight: 600;
    color: var(--color-oscuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usr-usuario[b-xhoy997swp] {
    font-size: 11.5px;
    color: var(--color-texto-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.usr-chip[b-xhoy997swp] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-oscuro-2);
    background: var(--color-bg);
    border: 1px solid var(--color-borde);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}