/* /Features/Administration/ParametrosSistema/Pages/ParametrosSistemaPage.razor.rz.scp.css */
/* Propio de esta vista; el esqueleto común vive en components.css. */
.param-filter-grid[b-xtp1klkycx] { grid-template-columns: 2fr 1fr 1fr auto; }
@media (max-width: 1200px) { .param-filter-grid[b-xtp1klkycx] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .param-filter-grid[b-xtp1klkycx] { grid-template-columns: 1fr; } }

/* Columna de valor */
.param-valor[b-xtp1klkycx] { color: var(--lyk-color-ink-2); }
.param-valor-enc[b-xtp1klkycx] { display: inline-flex; align-items: center; gap: 6px; color: var(--lyk-color-ink-3); }

/* Checks del formulario */
.param-form-checks[b-xtp1klkycx] { display: grid; gap: var(--lyk-space-3); }
/* /Features/Administration/Tenants/Pages/TenantsPage.razor.rz.scp.css */
/* Propio del mantenedor de Tenants. El esqueleto común (modal, dialog, botones,
   header, filtros, grid-wrapper, badges, error-banner…) vive en components.css. */

/* Columnas del filtro: texto · vigencia · botón.
   El botón va en 'auto' para que mida lo que mide su contenido; si cae en una columna 'fr'
   se estira a toda la fracción (era lo que pasaba al quedar una columna de más). */
.tenants-filter-grid[b-3a3xdc6i97] { grid-template-columns: 2fr 1fr auto; }

/* El estado "aún no buscó" ya NO es propio de esta vista: lo pinta <LykEmptyFilter/> con
   .lyk-empty de components.css, igual que el resto de la consola. */

/* Bloque offline (feature ONLINE_ONLY) */
.tenant-offline-block[b-3a3xdc6i97] {
    border: 1px solid var(--lyk-color-border); border-radius: var(--lyk-radius-md); background: var(--lyk-color-surface);
    padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--lyk-space-4);
}
.tenant-offline-block__icon[b-3a3xdc6i97] {
    width: 64px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    color: var(--lyk-color-danger); background: var(--lyk-color-danger-soft);
}
.tenant-offline-block__badge-row[b-3a3xdc6i97] { display: flex; align-items: center; gap: var(--lyk-space-3); }
.tenant-offline-block__must[b-3a3xdc6i97] { font-family: var(--lyk-font-mono); font-size: var(--lyk-text-xs); color: var(--lyk-color-ink-3); }
.tenant-offline-block__title[b-3a3xdc6i97] { margin: 0; font-size: var(--lyk-text-xl); }
.tenant-offline-block__text[b-3a3xdc6i97] { margin: 0; color: var(--lyk-color-ink-3); max-width: 760px; }
.tenant-offline-block__surface[b-3a3xdc6i97] {
    background: var(--lyk-color-surface-2); border: 1px solid var(--lyk-color-border); border-radius: var(--lyk-radius-sm);
    padding: var(--lyk-space-5); display: grid; gap: var(--lyk-space-2); text-align: left; width: 100%; max-width: 620px;
}
.tenant-offline-block__actions[b-3a3xdc6i97] { display: flex; gap: var(--lyk-space-3); }

/* Celda de nombre con avatar */
/* min-width:0 en el contenedor flex y en su hijo de texto: sin esto el nombre no encoge por
   debajo de su ancho de contenido y desborda la celda cuando la columna queda angosta.
   El texto se trunca con elipsis (ver .lyk-grid .k-table td en components.css). */
.tenant-name-cell[b-3a3xdc6i97] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tenant-name-cell > div[b-3a3xdc6i97] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tenant-avatar[b-3a3xdc6i97] {
    width: 28px; height: 28px; border-radius: var(--lyk-radius-sm); background: var(--lyk-color-primary-soft); color: var(--lyk-color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.tenant-email[b-3a3xdc6i97] { color: var(--lyk-color-ink-3); font-size: 10.5px; }

/* Formulario extenso (secciones) */
.tenant-input[b-3a3xdc6i97], .tenant-select[b-3a3xdc6i97], .tenant-confirm-input[b-3a3xdc6i97] { width: 100%; }
.tenant-readonly-strip[b-3a3xdc6i97] {
    background: var(--lyk-color-surface-2); border-radius: var(--lyk-radius-sm); padding: var(--lyk-space-4) var(--lyk-space-5);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lyk-space-4);
}
.tenant-form-section[b-3a3xdc6i97] { margin-bottom: var(--lyk-space-6); }
.tenant-form-section-label[b-3a3xdc6i97] {
    margin: 0 0 var(--lyk-space-4); font-family: var(--lyk-font-mono); font-size: var(--lyk-text-xs);
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--lyk-color-ink-3);
}
/* El grid sigue sirviendo: .lyk-field (LykField) es un hijo flex-column válido aquí dentro. */
.tenant-form-grid-2[b-3a3xdc6i97] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lyk-space-5); }
/* .tenant-form-label sigue en uso en el modal de borrado; el formulario pasó a LykField. */
.tenant-form-label[b-3a3xdc6i97] { font-size: var(--lyk-text-sm); color: var(--lyk-color-ink-2); font-weight: 500; }
.tenant-form-hint[b-3a3xdc6i97] { margin: 0; font-size: var(--lyk-text-xs); color: var(--lyk-color-ink-3); }

/* Confirmación de borrado (impacto + escribir código) */
.tenant-warning-block[b-3a3xdc6i97] {
    background: var(--lyk-color-warning-soft); border: 1px solid var(--lyk-color-warning-border); border-radius: var(--lyk-radius-sm);
    padding: var(--lyk-space-4) var(--lyk-space-5); display: grid; gap: var(--lyk-space-3);
}
.tenant-warning-row[b-3a3xdc6i97] { display: flex; justify-content: space-between; color: var(--lyk-color-ink-2); font-size: var(--lyk-text-sm); }
.tenant-confirm-box[b-3a3xdc6i97] { display: grid; gap: var(--lyk-space-2); }
.tenant-confirm-input[b-3a3xdc6i97] { border-style: dashed; font-family: var(--lyk-font-mono); }

/* Al angostarse, el botón baja a una columna 'fr' y volvería a estirarse: se ancla al inicio.
   En una sola columna sí ocupa todo el ancho. Mismo patrón que .ejec-filter-grid. */
@media (max-width: 1200px) {
    .tenants-filter-grid[b-3a3xdc6i97] { grid-template-columns: 1fr 1fr; }
    .tenants-filter-grid[b-3a3xdc6i97] >  .lyk-btn { justify-self: start; }
}
@media (max-width: 900px) {
    .tenants-filter-grid[b-3a3xdc6i97],
    .tenant-form-grid-2[b-3a3xdc6i97],
    .tenant-readonly-strip[b-3a3xdc6i97] { grid-template-columns: 1fr; }
    .tenants-filter-grid[b-3a3xdc6i97] >  .lyk-btn { justify-self: stretch; }
}
/* /Features/Authentication/Components/ModalTerminosAuditoria.razor.rz.scp.css */
/* El body del modal ya scrollea (.lyk-dialog-body); aquí sólo se define la tipografía del texto
   largo, que es más densa que la de un formulario. */

.terminos__intro[b-kdp43l4eez] {
    margin: 0;
    font-size: var(--lyk-text-md);
    color: var(--lyk-color-ink-2);
    line-height: 1.65;
}

.terminos__seccion[b-kdp43l4eez] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-3);
}

.terminos__titulo[b-kdp43l4eez] {
    margin: 0;
    font-size: var(--lyk-text-md);
    font-weight: 600;
    color: var(--lyk-color-ink-1);
}

.terminos__parrafo[b-kdp43l4eez] {
    margin: 0;
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-2);
    line-height: 1.7;
}

.terminos__lista[b-kdp43l4eez] {
    margin: 0;
    padding-left: var(--lyk-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-2);
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-2);
    line-height: 1.7;
}

.terminos__nota[b-kdp43l4eez] {
    margin: 0;
    padding: var(--lyk-space-3) var(--lyk-space-4);
    background: var(--lyk-color-surface-2);
    border-radius: var(--lyk-radius-md);
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-3);
    line-height: 1.65;
}

.terminos__pie[b-kdp43l4eez] {
    margin: 0;
    padding-top: var(--lyk-space-4);
    border-top: 1px solid var(--lyk-color-divider);
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-3);
    line-height: 1.65;
}
/* /Features/Authentication/Pages/LoginPage.razor.rz.scp.css */
/* ── Shell: split-screen ──────────────────────────────────────── */
.login-shell[b-32dxt81t54] {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ── Panel izquierdo: marca ──────────────────────────────────── */
.login-brand[b-32dxt81t54] {
    background: var(--lyk-color-dark-bg);
    display: flex;
    flex-direction: column;
    padding: var(--lyk-space-8) var(--lyk-space-8);
    overflow: hidden;
    position: relative;
}

.login-brand[b-32dxt81t54]::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,165,233,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.login-brand__top[b-32dxt81t54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--lyk-space-11);
    padding-bottom: var(--lyk-space-5);
    border-bottom: 1px solid var(--lyk-color-dark-border);
}

.login-logo[b-32dxt81t54] {
    display: flex;
    align-items: center;
    gap: var(--lyk-space-3);
}

.login-logo__name[b-32dxt81t54] {
    font-size: var(--lyk-text-md);
    font-weight: 600;
    color: var(--lyk-color-dark-ink-1);
    letter-spacing: -0.01em;
}

.login-version[b-32dxt81t54] {
    font-family: var(--lyk-font-mono);
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-dark-ink-3);
    background: var(--lyk-color-dark-surface);
    border: 1px solid var(--lyk-color-dark-border);
    border-radius: var(--lyk-radius-xs);
    padding: 2px 6px;
}

.login-brand__hero[b-32dxt81t54] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--lyk-space-5);
}

.login-headline[b-32dxt81t54] {
    font-size: var(--lyk-text-4xl);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--lyk-color-dark-ink-1);
    margin: 0;
    display: flex;
    flex-direction: column;
}

.login-headline--accent[b-32dxt81t54] {
    color: var(--lyk-color-accent);
}

.login-brand__desc[b-32dxt81t54] {
    font-size: var(--lyk-text-md);
    color: var(--lyk-color-dark-ink-2);
    line-height: 1.6;
    max-width: 360px;
    margin: 0;
}

/* Grid 2x2 de features */
.login-features[b-32dxt81t54] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lyk-space-4);
    margin-top: var(--lyk-space-8);
}

.login-feature[b-32dxt81t54] {
    display: flex;
    align-items: flex-start;
    gap: var(--lyk-space-3);
}

.login-feature__icon[b-32dxt81t54] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lyk-color-dark-surface);
    border: 1px solid var(--lyk-color-dark-border);
    border-radius: var(--lyk-radius-sm);
    flex-shrink: 0;
}

.login-feature__title[b-32dxt81t54] {
    font-size: var(--lyk-text-sm);
    font-weight: 600;
    color: var(--lyk-color-dark-ink-1);
}

.login-feature__desc[b-32dxt81t54] {
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-dark-ink-3);
    margin-top: 2px;
}

.login-brand__footer[b-32dxt81t54] {
    display: flex;
    gap: var(--lyk-space-3);
    align-items: center;
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-dark-ink-3);
    margin-top: var(--lyk-space-8);
    padding-top: var(--lyk-space-5);
    border-top: 1px solid var(--lyk-color-dark-border);
}

/* ── Panel derecho: formulario ──────────────────────────────── */
.login-form-panel[b-32dxt81t54] {
    background: var(--lyk-color-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-left: 1px solid var(--lyk-color-border);
}

.login-form-panel__top[b-32dxt81t54] {
    display: flex;
    justify-content: flex-end;
    padding: var(--lyk-space-5) var(--lyk-space-8);
    border-bottom: 1px solid var(--lyk-color-border);
}

.login-form-content[b-32dxt81t54] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--lyk-space-9) var(--lyk-space-11);
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    gap: var(--lyk-space-6);
}

.login-form-header[b-32dxt81t54] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-2);
}

.login-title[b-32dxt81t54] {
    font-size: 28px;
    font-weight: 700;
    color: var(--lyk-color-ink-1);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.login-subtitle[b-32dxt81t54] {
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-3);
    margin: 0;
}

/* Warning inline (sesión expirada) */
.login-warning[b-32dxt81t54] {
    display: flex;
    align-items: flex-start;
    gap: var(--lyk-space-3);
    padding: var(--lyk-space-4);
    background: color-mix(in srgb, var(--lyk-color-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--lyk-color-warning) 30%, transparent);
    border-top: 3px solid var(--lyk-color-warning);
    border-radius: var(--lyk-radius-md);
    font-size: var(--lyk-text-sm);
    color: color-mix(in srgb, var(--lyk-color-warning) 80%, var(--lyk-color-ink-1));
    line-height: 1.5;
}

.login-warning svg[b-32dxt81t54] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Error inline */
.login-error[b-32dxt81t54] {
    display: flex;
    align-items: flex-start;
    gap: var(--lyk-space-3);
    padding: var(--lyk-space-4);
    background: var(--lyk-color-danger-soft);
    border: 1px solid rgba(220,38,38,0.2);
    border-top: 3px solid var(--lyk-color-danger);
    border-radius: var(--lyk-radius-md);
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-danger);
    line-height: 1.5;
}

.login-error svg[b-32dxt81t54] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Campos */
.login-fields[b-32dxt81t54] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-5);
}

.login-field[b-32dxt81t54] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-2);
}

.login-label[b-32dxt81t54] {
    font-size: var(--lyk-text-sm);
    font-weight: 500;
    color: var(--lyk-color-ink-2);
}

.login-required[b-32dxt81t54] {
    color: var(--lyk-color-danger);
    margin-left: 2px;
}

.login-input[b-32dxt81t54] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--lyk-color-border-strong);
    border-radius: var(--lyk-radius-sm);
    font-family: var(--lyk-font-sans);
    font-size: var(--lyk-text-base);
    color: var(--lyk-color-ink-1);
    background: var(--lyk-color-surface);
    width: 100%;
    outline: none;
    transition: border-color var(--lyk-motion-fast), box-shadow var(--lyk-motion-fast);
}

.login-input[b-32dxt81t54]::placeholder {
    color: var(--lyk-color-ink-4);
}

.login-input:focus[b-32dxt81t54] {
    border-color: var(--lyk-color-primary);
    box-shadow: var(--lyk-shadow-focus);
}

.login-input--error[b-32dxt81t54] {
    border-color: var(--lyk-color-danger);
}

/* Mensaje de validación por-campo. ::deep alcanza el <div> que renderiza
   <ValidationMessage> (componente hijo, sin el atributo de scope propio). */
[b-32dxt81t54] .validation-message {
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-danger);
    margin-top: 4px;
}

.login-input--error:focus[b-32dxt81t54] {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.16);
}

/* Grupo input + toggle password */
.login-input-group[b-32dxt81t54] {
    position: relative;
}

.login-input--password[b-32dxt81t54] {
    padding-right: 40px;
}

.login-toggle-pw[b-32dxt81t54] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--lyk-color-ink-3);
    border-radius: var(--lyk-radius-xs);
}

.login-toggle-pw:hover[b-32dxt81t54] {
    background: var(--lyk-color-surface-2);
    color: var(--lyk-color-ink-1);
}

/* Checkbox + link */
.login-extras[b-32dxt81t54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lyk-space-3);
}

.login-checkbox-label[b-32dxt81t54] {
    display: flex;
    align-items: center;
    gap: var(--lyk-space-2);
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-2);
    cursor: pointer;
}

.login-checkbox[b-32dxt81t54] {
    width: 14px;
    height: 14px;
    accent-color: var(--lyk-color-primary);
    cursor: pointer;
}

.login-link[b-32dxt81t54] {
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-primary);
    text-decoration: none;
    font-weight: 500;
}

.login-link:hover[b-32dxt81t54] {
    color: var(--lyk-color-primary-hover);
    text-decoration: underline;
}

/* Abre un modal, no navega: va como <button> por accesibilidad (teclado y lectores de
   pantalla lo anuncian como acción). Se resetean los estilos propios del botón y hereda
   el tamaño del párrafo que lo contiene. */
.login-link--inline[b-32dxt81t54] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--lyk-color-primary);
    cursor: pointer;
}

.login-link--inline:focus-visible[b-32dxt81t54] {
    outline: 2px solid var(--lyk-color-primary);
    outline-offset: 2px;
    border-radius: var(--lyk-radius-sm);
}

/* Botones y divider */
.login-actions[b-32dxt81t54] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-4);
    /* Separa el botón del bloque de campos: sin esto quedaba pegado al
       "Mantener sesión iniciada". */
    margin-top: var(--lyk-space-6);
}

.login-divider[b-32dxt81t54] {
    display: flex;
    align-items: center;
    gap: var(--lyk-space-4);
}

.login-divider__line[b-32dxt81t54] {
    flex: 1;
    height: 1px;
    background: var(--lyk-color-border);
}

.login-divider__text[b-32dxt81t54] {
    font-family: var(--lyk-font-mono);
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-ink-3);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Nota de auditoría */
.login-audit-note[b-32dxt81t54] {
    display: flex;
    align-items: flex-start;
    gap: var(--lyk-space-2);
    padding: var(--lyk-space-4);
    background: var(--lyk-color-canvas);
    border: 1px solid var(--lyk-color-border);
    border-radius: var(--lyk-radius-md);
    font-size: var(--lyk-text-xs);
    color: var(--lyk-color-ink-3);
    line-height: 1.55;
}

.login-audit-note svg[b-32dxt81t54] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Responsive: mobile (<768px) ─────────────────────────────── */
@media (max-width: 767px) {
    .login-shell[b-32dxt81t54] {
        grid-template-columns: 1fr;
    }

    .login-brand[b-32dxt81t54] {
        display: none;
    }

    .login-form-content[b-32dxt81t54] {
        padding: var(--lyk-space-8) var(--lyk-space-6);
    }
}
/* /Features/Home/HomePage.razor.rz.scp.css */
.home-wrap[b-yrdc648tz7] {
    max-width: 640px;
    margin: var(--lyk-space-11) auto;
    padding: var(--lyk-space-8) var(--lyk-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-4);
}

.home-title[b-yrdc648tz7] {
    font-size: var(--lyk-text-2xl);
    font-weight: 700;
    color: var(--lyk-color-ink-1);
    letter-spacing: -0.02em;
    margin: 0;
}

.home-subtitle[b-yrdc648tz7] {
    font-size: var(--lyk-text-md);
    color: var(--lyk-color-ink-2);
    margin: 0;
}

.home-hint[b-yrdc648tz7] {
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-3);
    line-height: 1.7;
    margin: 0;
}
/* /Features/Integraciones/Ejecuciones/Pages/EjecucionesPage.razor.rz.scp.css */
/* Filtros de ejecuciones: el texto manda (es donde se pega un correlation_id), los desplegables van
   parejos y las fechas compactas. Mismo patrón que cmr-filter-grid / usr-filter-grid. */
.ejec-filter-grid[b-1uwol1d4m8] { grid-template-columns: 1.6fr 1fr 1fr 1fr 140px 140px auto; }

/* Los quiebres NO dejan una columna "auto" al final: la última columna se dimensiona para el botón
   (~86px) y ahí caía el desplegable de API key, aplastado. Con columnas parejas los campos se reparten
   en filas completas y el botón queda solo en la última. */
@media (max-width: 1500px) { .ejec-filter-grid[b-1uwol1d4m8] { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 1000px) { .ejec-filter-grid[b-1uwol1d4m8] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .ejec-filter-grid[b-1uwol1d4m8] { grid-template-columns: 1fr; } }

/* Sin esto el botón se estira a todo el ancho de su columna (440px a 1440) al pasar a varias filas.
   Va con ::deep porque el <button> lo renderiza LykButton, no esta página. */
@media (max-width: 1500px) { .ejec-filter-grid[b-1uwol1d4m8] >  .lyk-btn { justify-self: start; } }
@media (max-width: 720px)  { .ejec-filter-grid[b-1uwol1d4m8] >  .lyk-btn { justify-self: stretch; } }
/* /Features/Integraciones/Programaciones/Pages/ProgramacionesPage.razor.rz.scp.css */
/* Chips de hora: en la grilla y en el formulario se leen igual, así que comparten estilo. */
.prog-horas[b-zuws0nffpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.prog-horas--edit[b-zuws0nffpf] {
    margin-top: 8px;
}

.prog-hora[b-zuws0nffpf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--lyk-color-border);
    background: var(--lyk-color-surface-2);
    font-family: var(--lyk-font-mono);
    font-size: .8125rem;
    line-height: 1.4;
}

.prog-hora__x[b-zuws0nffpf] {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: .6;
}

.prog-hora__x:hover[b-zuws0nffpf] {
    opacity: 1;
}

.prog-hora-input[b-zuws0nffpf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prog-editor[b-zuws0nffpf] {
    resize: vertical;
    min-height: 160px;
}

/* Días de la semana: los toggles de Telerik y los dos atajos, en una línea que se parte si no cabe. */
.prog-dias[b-zuws0nffpf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.prog-dias__atajos[b-zuws0nffpf] {
    display: flex;
    gap: 4px;
}

/* Ejemplos de cron: la expresión es clickeable, porque copiarla a mano es donde se equivoca la gente. */
.prog-cron-ejemplos[b-zuws0nffpf] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prog-cron-ejemplos li[b-zuws0nffpf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.prog-cron-ejemplo[b-zuws0nffpf] {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--lyk-font-mono);
    font-size: .8125rem;
    color: var(--lyk-color-primary);
    text-decoration: underline dotted;
}

/* Próximas corridas: la respuesta a "¿quedó bien?" sin esperar hasta mañana. */
.prog-preview[b-zuws0nffpf] {
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--lyk-color-border);
    background: var(--lyk-color-surface-2);
}

.prog-preview__titulo[b-zuws0nffpf] {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

.prog-preview__estado[b-zuws0nffpf] {
    font-size: .8125rem;
    opacity: .7;
}

.prog-preview__error[b-zuws0nffpf] {
    font-size: .8125rem;
    color: var(--lyk-color-danger);
}
/* /Features/Plataforma/Usuarios/Pages/PlataformaUsuariosPage.razor.rz.scp.css */
/* Columnas del filtro (propias de esta vista; el resto vive en components.css). */
.plt-filter-grid[b-0lo71g4eyi] { grid-template-columns: 1.4fr 1.4fr 1fr auto; }
@media (max-width: 1100px) { .plt-filter-grid[b-0lo71g4eyi] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .plt-filter-grid[b-0lo71g4eyi] { grid-template-columns: 1fr; } }
/* /Features/Procesos/Cmr/Pages/ProcesosCmrPage.razor.rz.scp.css */
/* Columnas de la tarjeta de filtros: la búsqueda manda (es el ancla del usuario), las fechas
   compactas y el tipo de solicitud al final. Mismo patrón que rol-filter-grid / usr-filter-grid. */
.cmr-filter-grid[b-8od83q2y23] { grid-template-columns: 1.6fr 140px 140px 1fr 1fr auto; }
@media (max-width: 1200px) { .cmr-filter-grid[b-8od83q2y23] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .cmr-filter-grid[b-8od83q2y23] { grid-template-columns: 1fr; } }

/* Piso de ancho = la suma de los anchos declarados (110+250+180+140+220+100+40). Sin esto Telerik
   comprime las columnas hasta romperlas: medido a 768px, "Solicitante" se aplastaba a 0px y su
   contenido desbordaba la celda. Por debajo del piso, scroll horizontal en vez de aplastar.
   El valor está calzado para que a 1366px entre justo descontando la barra de scroll vertical. */
.lyk-grid-wrapper[b-8od83q2y23]  .k-grid-table,
.lyk-grid-wrapper[b-8od83q2y23]  .k-grid-header-table { min-width: 1040px; }
/* /Features/Seguridad/Roles/Components/ModalPermisosRol.razor.rz.scp.css */
/* Propio del selector de permisos; el shell del modal vive en components.css. */
.rlp-muted[b-4vq746l8pl] { color: var(--lyk-color-ink-3); font-size: var(--lyk-text-sm); margin: 0; }

/* ── Barra de herramientas ─────────────────────────────────────────
   Va FUERA de .lyk-dialog-body a propósito: el cuerpo es el único que scrollea, así el buscador y
   el contador quedan siempre a la vista por larga que sea la lista, sin recurrir a position:sticky
   (que con el padding del cuerpo deja el elemento pegado a media altura). */
.rlp-toolbar[b-4vq746l8pl] {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--lyk-space-4);
    padding: 12px 28px;
    border-bottom: 1px solid var(--lyk-color-divider);
}
.rlp-toolbar__buscar[b-4vq746l8pl] { flex: 1 1 260px; max-width: 340px; }
.rlp-resumen[b-4vq746l8pl] { margin-left: auto; color: var(--lyk-color-ink-3); font-size: var(--lyk-text-sm); white-space: nowrap; }
.rlp-resumen strong[b-4vq746l8pl] { color: var(--lyk-color-ink-1); font-weight: 600; }

/* ── Módulo colapsable ─────────────────────────────────────────── */
.rlp-group[b-4vq746l8pl] { display: grid; gap: var(--lyk-space-2); }
.rlp-group__head[b-4vq746l8pl] { display: flex; align-items: center; gap: var(--lyk-space-3); }

.rlp-group__toggle[b-4vq746l8pl] {
    flex: 1; display: flex; align-items: center; gap: var(--lyk-space-3);
    background: transparent; border: none; cursor: pointer;
    padding: 4px 8px; border-radius: var(--lyk-radius-sm);
    color: var(--lyk-color-ink-3); text-align: left;
}
.rlp-group__toggle:hover[b-4vq746l8pl] { background: var(--lyk-color-canvas); }
/* El icono viene de <LykIcon>, otro componente: sin ::deep el CSS aislado no lo alcanza. */
.rlp-group__toggle[b-4vq746l8pl]  .lyk-icon {
    transform: rotate(-90deg);
    transition: transform var(--lyk-motion-fast);
}
.rlp-group__toggle[aria-expanded="true"][b-4vq746l8pl]  .lyk-icon { transform: rotate(0deg); }

.rlp-group__label[b-4vq746l8pl] { font-family: var(--lyk-font-mono); font-size: var(--lyk-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.rlp-group__count[b-4vq746l8pl] { margin-left: auto; font-size: var(--lyk-text-xs); color: var(--lyk-color-ink-3); }

/* ── Maestro tri-estado ────────────────────────────────────────────
   Es un <button role="checkbox"> y no un <input>: el estado intermedio de un checkbox nativo es la
   propiedad DOM `indeterminate`, que no se puede fijar desde markup Razor y obligaría a JS interop
   sólo para pintar un guion. */
.rlp-master[b-4vq746l8pl] {
    flex: 0 0 auto;
    width: 16px; height: 16px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--lyk-color-border-strong); border-radius: var(--lyk-radius-xs);
    background: var(--lyk-color-surface); color: transparent; cursor: pointer;
    transition: background var(--lyk-motion-fast), border-color var(--lyk-motion-fast);
}
.rlp-master:hover:not(:disabled)[b-4vq746l8pl] { border-color: var(--lyk-color-primary); }
.rlp-master[aria-checked="true"][b-4vq746l8pl],
.rlp-master[aria-checked="mixed"][b-4vq746l8pl] {
    background: var(--lyk-color-primary); border-color: var(--lyk-color-primary); color: #fff;
}
.rlp-master:disabled[b-4vq746l8pl] { opacity: 0.5; cursor: not-allowed; }
.rlp-master__dash[b-4vq746l8pl] { width: 8px; height: 2px; border-radius: 1px; background: currentColor; }

/* ── Ítems ─────────────────────────────────────────────────────── */
.rlp-group__panel[b-4vq746l8pl] { display: grid; gap: var(--lyk-space-2); padding-left: var(--lyk-space-6); }
.rlp-item[b-4vq746l8pl] { display: flex; align-items: center; gap: var(--lyk-space-3); padding: 6px 8px; border-radius: var(--lyk-radius-sm); cursor: pointer; }
.rlp-item:hover[b-4vq746l8pl] { background: var(--lyk-color-canvas); }
.rlp-item__text[b-4vq746l8pl] { display: flex; flex-direction: column; }
.rlp-item__nombre[b-4vq746l8pl] { font-size: var(--lyk-text-base); color: var(--lyk-color-ink-1); }
.rlp-item__codigo[b-4vq746l8pl] { font-size: var(--lyk-text-xs); color: var(--lyk-color-ink-3); }

@media (max-width: 700px) {
    .rlp-toolbar[b-4vq746l8pl] { flex-wrap: wrap; padding: 12px 20px; }
    .rlp-toolbar__buscar[b-4vq746l8pl] { flex-basis: 100%; max-width: none; }
    .rlp-resumen[b-4vq746l8pl] { margin-left: 0; }
}
/* /Features/Seguridad/Roles/Pages/RolesPage.razor.rz.scp.css */
/* Columnas del filtro (propias de esta vista; el resto vive en components.css). */
.rol-filter-grid[b-2987pgbqcq] { grid-template-columns: 2fr 1fr auto; }
@media (max-width: 1200px) { .rol-filter-grid[b-2987pgbqcq] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .rol-filter-grid[b-2987pgbqcq] { grid-template-columns: 1fr; } }
/* /Features/Seguridad/Usuarios/Pages/UsuariosPage.razor.rz.scp.css */
/* Columnas del filtro (propias de esta vista; el resto vive en components.css). */
.usr-filter-grid[b-xm9xe0hsuq] { grid-template-columns: 2fr 1fr auto; }
@media (max-width: 1200px) { .usr-filter-grid[b-xm9xe0hsuq] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .usr-filter-grid[b-xm9xe0hsuq] { grid-template-columns: 1fr; } }
/* /Layout/AuthLayout.razor.rz.scp.css */
.lyk-auth-shell[b-lsym4oaip4] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* position: relative — es el marco de referencia del catcher del menú de cuenta (y de cualquier
   overlay que deba cubrir la app entera, sidebar incluido). */
.app-shell[b-lgbg0zdzaa] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--lyk-color-canvas);
    position: relative;
}

/* Captura el click fuera del menú de cuenta. Absoluto (no fixed): en ≤1024px el sidebar es
   fixed + transform, y un hijo fixed se anclaría a él en vez de al viewport. z-index 30 lo deja
   por debajo del menú (31) y muy por debajo del scrim de los modales (400). */
.app-user-menu-catcher[b-lgbg0zdzaa] {
    position: absolute;
    inset: 0;
    z-index: 30;
}

.app-sidebar[b-lgbg0zdzaa] {
    width: 240px;
    flex-shrink: 0;
    background: var(--lyk-color-dark-bg);
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.app-main[b-lgbg0zdzaa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.app-header[b-lgbg0zdzaa] {
    height: 56px;
    background: var(--lyk-color-surface);
    border-bottom: 1px solid var(--lyk-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    gap: 16px;
}

/* min-width: 0 es imprescindible: un flex item arranca con min-width:auto y NO encoge por debajo
   del ancho de su contenido. Sin esto, entre 768px y ~1000px el bloque izquierdo (breadcrumbs +
   buscador) empujaba a .app-header__right fuera del viewport, y como .app-shell tiene
   overflow-x:hidden, el toggle de tema y el avatar quedaban recortados e inalcanzables. */
.app-header__left[b-lgbg0zdzaa] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

/* Los controles de la derecha (conectividad, tema, avatar) nunca se comprimen ni se desplazan
   fuera de pantalla: son la única vía a esas acciones. */
.app-header__right[b-lgbg0zdzaa] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.app-breadcrumbs[b-lgbg0zdzaa] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lyk-color-ink-3);
    font-size: 12px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-breadcrumbs span[b-lgbg0zdzaa] {
    font-weight: 400;
}

.app-breadcrumbs span.is-current[b-lgbg0zdzaa] {
    color: var(--lyk-color-ink-1);
    font-weight: 600;
}

.app-global-search[b-lgbg0zdzaa] {
    flex: 1;
    min-width: 0;
    max-width: 360px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid var(--lyk-color-border);
    border-radius: var(--lyk-radius-sm);
    background: var(--lyk-color-canvas);
    color: var(--lyk-color-ink-3);
}

.app-global-search input[b-lgbg0zdzaa] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--lyk-font-sans);
    font-size: 13px;
    color: var(--lyk-color-ink-1);
}

.app-global-search__shortcut[b-lgbg0zdzaa] {
    font-family: var(--lyk-font-mono);
    font-size: 10px;
    color: var(--lyk-color-ink-3);
    padding: 2px 5px;
    border: 1px solid var(--lyk-color-border);
    border-radius: 3px;
    background: var(--lyk-color-surface);
}

.app-header__avatar[b-lgbg0zdzaa] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--lyk-color-border);
    background: var(--lyk-color-surface-2);
    color: var(--lyk-color-ink-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.app-content[b-lgbg0zdzaa] {
    flex: 1;
    overflow-y: auto;
    padding: var(--lyk-space-8);
    background: var(--lyk-color-canvas);
}

/* Botón hamburguesa: oculto en desktop, visible en mobile. */
.app-hamburger[b-lgbg0zdzaa] {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lyk-color-border);
    border-radius: var(--lyk-radius-sm);
    background: var(--lyk-color-surface);
    color: var(--lyk-color-ink-2);
    cursor: pointer;
    flex-shrink: 0;
}
.app-hamburger:hover[b-lgbg0zdzaa] { background: var(--lyk-color-surface-2); color: var(--lyk-color-ink-1); }

/* Backdrop del drawer (solo mobile, cuando está abierto). */
.app-nav-backdrop[b-lgbg0zdzaa] {
    position: fixed;
    inset: 0;
    background: var(--lyk-color-scrim);
    z-index: 1100;
}

/* Breakpoint del drawer: 1024px, no 767px.
   Con el corte en 767px el sidebar quedaba fijo en 240px desde 768px hacia arriba y se comía el 31%
   del ancho: a 768px dejaba 528px de contenido, y las grillas (880-990px) obligaban a scroll
   horizontal. Tablets en horizontal y laptops chicos entran en ese rango, así que ahí también
   conviene el drawer. La navegación no se pierde: aparece la hamburguesa. */
@media (max-width: 1024px) {
    /* El sidebar pasa a drawer off-canvas deslizable. */
    .app-sidebar[b-lgbg0zdzaa] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 82vw;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform var(--lyk-motion-base);
        box-shadow: var(--lyk-shadow-lg);
    }
    .app-sidebar.is-open[b-lgbg0zdzaa] {
        transform: translateX(0);
    }

    .app-hamburger[b-lgbg0zdzaa] {
        display: inline-flex;
    }

    .app-breadcrumbs[b-lgbg0zdzaa],
    .app-global-search[b-lgbg0zdzaa] {
        display: none;
    }

    .app-content[b-lgbg0zdzaa] {
        padding: var(--lyk-space-6);
    }
}

/* /Layout/NavMenu.razor.rz.scp.css */
.sidebar-nav[b-j5wxb5hq0z] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 16px;
}

.sidebar-brand[b-j5wxb5hq0z] {
    display: flex;
    align-items: center;
    gap: var(--lyk-space-3);
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--lyk-color-dark-border);
    margin-bottom: 18px;
}

.sidebar-brand__logo[b-j5wxb5hq0z] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sidebar-brand__meta[b-j5wxb5hq0z] {
    display: flex;
    flex-direction: column;
    gap: var(--lyk-space-1);
    min-width: 0;
    margin-right: auto;
}

.sidebar-brand__name[b-j5wxb5hq0z] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lyk-color-dark-ink-1);
}

.sidebar-brand__role[b-j5wxb5hq0z] {
    font-family: var(--lyk-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    /* ink-2 y no ink-3: a 10px, ink-3 sobre el fondo del sidebar queda en 3.9:1 (bajo AA). */
    color: var(--lyk-color-dark-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand__version[b-j5wxb5hq0z] {
    font-size: 10px;
    font-family: var(--lyk-font-mono);
    color: var(--lyk-color-dark-ink-3);
    padding: 2px 6px;
    border: 1px solid var(--lyk-color-dark-border);
    border-radius: 3px;
}

.sidebar-nav__primary[b-j5wxb5hq0z] {
    flex: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}

.sidebar-nav__section[b-j5wxb5hq0z] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: none;
    margin-top: 0;
}

.sidebar-nav__section-label[b-j5wxb5hq0z] {
    margin-top: 18px;
    margin-bottom: 6px;
    padding: 0 10px;
    font-family: var(--lyk-font-mono);
    font-size: 10px;
    color: var(--lyk-color-dark-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.sidebar-nav__bottom[b-j5wxb5hq0z] {
    padding: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-j5wxb5hq0z] .sidebar-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--lyk-radius-sm);
    color: var(--lyk-color-dark-ink-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-left: none;
    transition: background var(--lyk-motion-fast), color var(--lyk-motion-fast);
    margin-left: 0;
}

[b-j5wxb5hq0z] .sidebar-nav__item:hover {
    background: rgba(14, 165, 233, 0.1);
    color: var(--lyk-color-dark-ink-1);
}

[b-j5wxb5hq0z] .sidebar-nav__item.active {
    background: rgba(14, 165, 233, 0.1);
    color: var(--lyk-color-dark-ink-1);
    position: relative;
}

[b-j5wxb5hq0z] .sidebar-nav__item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--lyk-color-accent);
}

.sidebar-nav__icon[b-j5wxb5hq0z] {
    flex-shrink: 0;
    opacity: 1;
    color: var(--lyk-color-dark-ink-3);
}

[b-j5wxb5hq0z] .sidebar-nav__item.active .sidebar-nav__icon,
[b-j5wxb5hq0z] .sidebar-nav__item:hover .sidebar-nav__icon {
    color: var(--lyk-color-accent);
}

/* ── Grupo Administración expandible ── */
.sidebar-nav__group[b-j5wxb5hq0z] {
    display: flex;
    flex-direction: column;
}

.sidebar-nav__group-header[b-j5wxb5hq0z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--lyk-radius-sm);
    color: var(--lyk-color-dark-ink-2);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    text-align: left;
    transition: background var(--lyk-motion-fast), color var(--lyk-motion-fast);
    margin-bottom: 2px;
}

.sidebar-nav__group-header:hover[b-j5wxb5hq0z] {
    background: rgba(14, 165, 233, 0.1);
    color: var(--lyk-color-dark-ink-1);
}

.sidebar-nav__group-label[b-j5wxb5hq0z] {
    flex: 1;
}

.sidebar-nav__chevron[b-j5wxb5hq0z] {
    color: var(--lyk-color-dark-ink-3);
    transition: transform 180ms ease;
    flex-shrink: 0;
}

.sidebar-nav__chevron.is-expanded[b-j5wxb5hq0z] {
    transform: rotate(180deg);
}

.sidebar-nav__group-body[b-j5wxb5hq0z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid var(--lyk-color-dark-border);
    margin-left: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
}

[b-j5wxb5hq0z] .sidebar-nav__item--sub {
    font-size: 13px;
    padding: 8px 10px;
    border-left: none;
    margin-left: 0;
}

[b-j5wxb5hq0z] .sidebar-nav__item--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.sidebar-nav__badge[b-j5wxb5hq0z] {
    margin-left: auto;
    font-size: 10.5px;
    font-family: var(--lyk-font-mono);
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.16);
    color: var(--lyk-color-dark-ink-2);
}

.sidebar-nav__badge--warning[b-j5wxb5hq0z] {
    background: rgba(217, 119, 6, 0.18);
    color: #FBBF24;
}

/* ── Chip de usuario + menú de cuenta ──────────────────────────────────────
   El sidebar es oscuro en AMBOS temas (tokens --lyk-color-dark-*), así que el
   menú también: un popup blanco sobre el panel navy se vería pegoteado. */
.sidebar-user[b-j5wxb5hq0z] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--lyk-color-dark-border);
    position: relative;
}

.sidebar-user-chip[b-j5wxb5hq0z] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--lyk-radius-sm);
    /* Explícito, no `inherit`: el sidebar es oscuro en ambos temas, así que heredar la tinta del
       tema claro pintaría navy sobre navy. */
    color: var(--lyk-color-dark-ink-2);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sidebar-user-chip:hover[b-j5wxb5hq0z],
.sidebar-user-chip.is-open[b-j5wxb5hq0z] {
    background: rgba(148, 163, 184, 0.12);
}

.sidebar-user-chip__avatar[b-j5wxb5hq0z] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #334155;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-chip__meta[b-j5wxb5hq0z] {
    min-width: 0;
    flex: 1;
    display: block;
}

.sidebar-user-chip__name[b-j5wxb5hq0z] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--lyk-color-dark-ink-1);
}

.sidebar-user-chip__email[b-j5wxb5hq0z] {
    display: block;
    font-size: 10px;
    font-family: var(--lyk-font-mono);
    color: var(--lyk-color-dark-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-chip__chevron[b-j5wxb5hq0z] {
    flex-shrink: 0;
    display: flex;
    color: var(--lyk-color-dark-ink-3);
    transition: transform var(--lyk-motion-fast);
}

.sidebar-user-chip__chevron.is-open[b-j5wxb5hq0z] {
    transform: rotate(180deg);
}

/* Se abre hacia ARRIBA: el chip está al pie del sidebar y no hay espacio abajo. */
.sidebar-user-menu[b-j5wxb5hq0z] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 31;
    background: var(--lyk-color-dark-surface);
    border: 1px solid var(--lyk-color-dark-border);
    border-radius: var(--lyk-radius-md);
    box-shadow: var(--lyk-shadow-lg);
    overflow: hidden;
}

.sidebar-user-menu__head[b-j5wxb5hq0z] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lyk-color-dark-border);
}

.sidebar-user-menu__name[b-j5wxb5hq0z] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lyk-color-dark-ink-1);
}

.sidebar-user-menu__email[b-j5wxb5hq0z] {
    font-size: 10px;
    color: var(--lyk-color-dark-ink-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-menu__items[b-j5wxb5hq0z] {
    padding: 4px;
    display: grid;
    gap: 1px;
}

.sidebar-user-menu__item[b-j5wxb5hq0z] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    background: transparent;
    border: none;
    border-radius: var(--lyk-radius-sm);
    color: var(--lyk-color-dark-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.sidebar-user-menu__item:hover[b-j5wxb5hq0z] {
    background: rgba(148, 163, 184, 0.14);
    color: var(--lyk-color-dark-ink-1);
}

.sidebar-user-chip:focus-visible[b-j5wxb5hq0z],
.sidebar-user-menu__item:focus-visible[b-j5wxb5hq0z] {
    outline: none;
    box-shadow: var(--lyk-shadow-focus);
}
/* /Shared/Components/ConnectivityBadge.razor.rz.scp.css */
.conn-badge[b-30elhrye90] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--lyk-radius-sm);
    border: 1px solid var(--lyk-color-border);
    background: var(--lyk-color-surface);
    font-family: var(--lyk-font-mono);
    font-size: var(--lyk-text-xs);
    font-weight: 500;
    color: var(--lyk-color-ink-2);
}

.conn-dot[b-30elhrye90] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.conn-badge--online .conn-dot[b-30elhrye90]    { background: var(--lyk-color-online); }
.conn-badge--syncing .conn-dot[b-30elhrye90]   { background: var(--lyk-color-syncing); }
.conn-badge--offline .conn-dot[b-30elhrye90]   { background: var(--lyk-color-offline); }

.conn-separator[b-30elhrye90] {
    color: var(--lyk-color-ink-4);
}

.conn-tenant[b-30elhrye90] {
    color: var(--lyk-color-ink-3);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Shared/Components/LykBadge.razor.rz.scp.css */
.lyk-badge[b-z8lo7bug9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--lyk-radius-sm);
    padding: 2px 8px;
    font-size: var(--lyk-text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    /* Nunca desborda su contenedor: en una celda angosta se recorta con "…" (ver __text). */
    max-width: 100%;
}

.lyk-badge__text[b-z8lo7bug9a] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lyk-badge__dot[b-z8lo7bug9a] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.lyk-badge--primary[b-z8lo7bug9a] { background: var(--lyk-color-primary-soft); color: var(--lyk-color-primary); }
.lyk-badge--info[b-z8lo7bug9a]    { background: var(--lyk-color-accent-soft);  color: var(--lyk-color-accent); }
.lyk-badge--neutral[b-z8lo7bug9a] { background: var(--lyk-color-surface-2);    color: var(--lyk-color-ink-3); }
.lyk-badge--success[b-z8lo7bug9a] { background: var(--lyk-color-success-soft); color: var(--lyk-color-success); }
.lyk-badge--warning[b-z8lo7bug9a] { background: var(--lyk-color-warning-soft); color: var(--lyk-color-warning); }
.lyk-badge--danger[b-z8lo7bug9a]  { background: var(--lyk-color-danger-soft);  color: var(--lyk-color-danger); }
/* /Shared/Components/LykButton.razor.rz.scp.css */
.lyk-btn[b-rbjs6ubpiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--lyk-radius-sm);
    font-family: var(--lyk-font-sans);
    font-size: var(--lyk-text-md);
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: background var(--lyk-motion-fast), border-color var(--lyk-motion-fast), color var(--lyk-motion-fast), box-shadow var(--lyk-motion-fast);
    white-space: nowrap;
    text-decoration: none;
    outline: none;
}

.lyk-btn:focus-visible[b-rbjs6ubpiq] {
    box-shadow: var(--lyk-shadow-focus);
}

.lyk-btn:disabled[b-rbjs6ubpiq],
.lyk-btn--loading[b-rbjs6ubpiq] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tamaños */
.lyk-btn--sm[b-rbjs6ubpiq] { height: 28px; padding: 0 10px; font-size: var(--lyk-text-sm); }
.lyk-btn--md[b-rbjs6ubpiq] { height: 34px; padding: 0 14px; }
.lyk-btn--lg[b-rbjs6ubpiq] { height: 40px; padding: 0 18px; font-size: var(--lyk-text-md); }

/* Full width */
.lyk-btn--full[b-rbjs6ubpiq] { width: 100%; }

/* Variante primary */
.lyk-btn--primary[b-rbjs6ubpiq] {
    background: var(--lyk-color-primary);
    color: #ffffff;
    border-color: var(--lyk-color-primary);
}
.lyk-btn--primary:hover:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-primary-hover);
    border-color: var(--lyk-color-primary-hover);
}
.lyk-btn--primary:active:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-primary-pressed);
    border-color: var(--lyk-color-primary-pressed);
}

/* Variante secondary */
.lyk-btn--secondary[b-rbjs6ubpiq] {
    background: var(--lyk-color-surface);
    color: var(--lyk-color-ink-1);
    border-color: var(--lyk-color-border-strong);
}
.lyk-btn--secondary:hover:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-surface-2);
}

/* Variante ghost */
.lyk-btn--ghost[b-rbjs6ubpiq] {
    background: transparent;
    color: var(--lyk-color-ink-2);
    border-color: transparent;
}
.lyk-btn--ghost:hover:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-surface-2);
    color: var(--lyk-color-ink-1);
}

/* Variante danger */
.lyk-btn--danger[b-rbjs6ubpiq] {
    background: var(--lyk-color-danger);
    color: #ffffff;
    border-color: var(--lyk-color-danger);
}
.lyk-btn--danger:hover:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-danger-hover);
    border-color: var(--lyk-color-danger-hover);
}

/* Variante success */
.lyk-btn--success[b-rbjs6ubpiq] {
    background: var(--lyk-color-success);
    color: #ffffff;
    border-color: var(--lyk-color-success);
}
.lyk-btn--success:hover:not(:disabled)[b-rbjs6ubpiq] {
    background: var(--lyk-color-success-hover);
    border-color: var(--lyk-color-success-hover);
}
/* /Shared/Components/LykCard.razor.rz.scp.css */
.lyk-card[b-h9gbx3blj9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--lyk-color-surface);
    border: 1px solid var(--lyk-color-border);
    border-radius: var(--lyk-radius-lg);
}

.lyk-card__head[b-h9gbx3blj9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lyk-color-divider);
}

.lyk-card__title[b-h9gbx3blj9] {
    font-size: var(--lyk-text-md);
    font-weight: 600;
    color: var(--lyk-color-ink-1);
}

.lyk-card__hint[b-h9gbx3blj9] {
    margin-top: 2px;
    font-size: var(--lyk-text-sm);
    color: var(--lyk-color-ink-3);
}

.lyk-card__right[b-h9gbx3blj9] {
    flex-shrink: 0;
}

.lyk-card__body[b-h9gbx3blj9] {
    flex: 1;
    min-height: 0;
    padding: 18px;
}
/* /Shared/Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-8fgf1epfiv] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--lyk-color-border);
    border-radius: var(--lyk-radius-sm);
    background: transparent;
    color: var(--lyk-color-ink-2);
    cursor: pointer;
    transition: background var(--lyk-motion-fast), color var(--lyk-motion-fast), border-color var(--lyk-motion-fast);
}

.theme-toggle:hover[b-8fgf1epfiv] {
    background: var(--lyk-color-surface-2);
    color: var(--lyk-color-ink-1);
    border-color: var(--lyk-color-border-strong);
}

.theme-toggle:focus-visible[b-8fgf1epfiv] {
    outline: none;
    box-shadow: var(--lyk-shadow-focus);
}