/* LGRT — chrome de modales / confirms / wizards (plan 12). */

:root {
    --lgrt-modal-glass-bg: rgba(28, 30, 38, 0.94);
    --lgrt-modal-glass-border: rgba(255, 255, 255, 0.08);
    --lgrt-modal-glass-shadow: 0 20px 56px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --lgrt-modal-backdrop: rgba(0, 0, 0, 0.55);
    --lgrt-modal-badge: var(--color-accent, #f97316);
    --lgrt-modal-badge-danger: #dc2626;
    --lgrt-modal-facts-bg: rgba(255, 255, 255, 0.04);
    --lgrt-modal-facts-border: rgba(255, 255, 255, 0.1);
}

.lgrt-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    line-height: 0;
}
.lgrt-ui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* —— Header chrome —— */
.lgrt-modal-chrome__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    margin: 0 0 12px;
    min-width: 0;
}
.lgrt-modal-chrome__badge {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--lgrt-modal-badge);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lgrt-modal-chrome__badge .lgrt-ui-icon {
    width: 1.3rem;
    height: 1.3rem;
}
.lgrt-modal-chrome__badge--danger {
    background: var(--lgrt-modal-badge-danger);
}
.lgrt-modal-chrome__titles {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}
.lgrt-modal-chrome__title {
    margin: 0;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lgrt-control-fg);
    letter-spacing: 0.01em;
    /* app-modal pone user-select:none en el panel; el título (nombres dinámicos) sí copiable */
    user-select: text;
    -webkit-user-select: text;
}
.lgrt-modal-chrome__close {
    /* Legacy: la X del header se eliminó; ocultar restos en DOM viejo/cache. */
    display: none !important;
}

/* —— Facts box —— */
.lgrt-modal-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--lgrt-modal-facts-border);
    background: var(--lgrt-modal-facts-bg);
}
.lgrt-modal-facts__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.lgrt-modal-facts__ico {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--lgrt-modal-badge);
    margin-top: 1px;
}
.lgrt-modal-facts__text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 0.9rem;
    line-height: 1.45;
    color: #cbd5e1;
}

/* —— Secciones wizard / form —— */
.lgrt-modal-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 12px 14px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.lgrt-modal-section:last-child {
    margin-bottom: 0;
}
.lgrt-modal-section__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.lgrt-modal-section__ico {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--lgrt-modal-badge);
    margin-top: 2px;
}
.lgrt-modal-section__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.02em;
}
.lgrt-modal-section__hint {
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--color-text-label);
}
.lgrt-modal-section__body {
    min-width: 0;
}

/* El paso es solo contenedor; la jerarquía visual la da .lgrt-modal-section interno. */
.vs-wizard-step[hidden] {
    display: none !important;
}

/* —— Glass en shells existentes —— */
.lgrt-inm-modal {
    background: var(--lgrt-modal-backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lgrt-inm-modal__card,
.lgrt-inm-modal .cluster-node-card.lgrt-inm-modal__card {
    background: var(--lgrt-modal-glass-bg) !important;
    border: 1px solid var(--lgrt-modal-glass-border) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--lgrt-modal-glass-shadow) !important;
    padding: 16px 18px 14px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.lgrt-inm-modal .cluster-node-card.lgrt-inm-modal__card:hover {
    transform: none;
    box-shadow: var(--lgrt-modal-glass-shadow) !important;
    border-color: var(--lgrt-modal-glass-border) !important;
}

.app-modal:not([hidden]) {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.app-modal__backdrop {
    background: var(--lgrt-modal-backdrop);
}
.app-modal__panel {
    background: var(--lgrt-modal-glass-bg);
    border: 1px solid var(--lgrt-modal-glass-border);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--lgrt-modal-glass-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.fw-rule-modal__backdrop {
    background: var(--lgrt-modal-backdrop) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.fw-rule-modal__card {
    background: var(--lgrt-modal-glass-bg) !important;
    border: 1px solid var(--lgrt-modal-glass-border) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--lgrt-modal-glass-shadow) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Cancelar outline en pies de modal / confirm (refuerza .btn-cancel global) */
.lgrt-inm-modal__footer .btn-cancel,
.app-modal__actions .btn-cancel,
.fw-rule-modal .btn-cancel,
.vs-wizard-footer .btn-cancel,
.admin-users-modal__card .btn-cancel,
.admin-users-confirm__actions .btn-cancel,
.app-confirm__actions .btn-cancel,
#app-confirm-dialog .app-confirm-cancel {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    box-shadow: none !important;
    min-height: 34px;
    min-width: 7.5rem;
    padding: 0.4rem 1rem;
    border-radius: 10px;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.lgrt-inm-modal__footer .btn-cancel:hover,
.app-modal__actions .btn-cancel:hover,
.vs-wizard-footer .btn-cancel:hover,
.admin-users-confirm__actions .btn-cancel:hover,
.app-confirm__actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(226, 232, 240, 0.55) !important;
}

/*
 * Pie canónico (DISENO_UI §3.3):
 * - Formulario simple: Cancelar · [secundarios] · Aceptar; justify flex-start.
 * - Mismo fondo que la card (transparente): sin barra más oscura.
 * - Wizards (.vs-wizard-footer): Cancelar · [extra] · Atrás · Siguiente · Guardar (flex-start; Atrás|Siguiente contiguos).
 * - Confirms: Cancelar · OK; también justify flex-start (misma regla de alineación).
 */
.lgrt-inm-modal__footer,
.lgrt-inm-modal__actions-row,
.app-modal__actions,
.fw-rule-modal__card .lgrt-inm-modal__footer,
.fw-rule-modal__card .lgrt-inm-modal__actions-row,
.admin-users-modal__card .lgrt-inm-modal__footer,
.admin-users-modal__card .modal-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent !important;
    box-shadow: none;
    position: static;
}
.vs-wizard-footer,
.au-wizard-footer {
    justify-content: flex-start !important;
}
.app-confirm__actions,
.admin-users-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    margin: 16px 0 0;
    padding: 0;
    border-top: 0;
    background: transparent !important;
}

/* —— Confirm canónico (card propia; sin md-dialog) —— */
#app-confirm-dialog.app-confirm,
.app-confirm {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
}
#app-confirm-dialog.app-confirm[hidden],
.app-confirm[hidden] {
    display: none !important;
}
.app-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.app-confirm__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    margin: 0;
    padding: 20px 24px 22px;
    border-radius: 10px;
    background: rgba(28, 30, 38, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #cbd5e1;
}
.app-confirm .lgrt-modal-chrome__header {
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
}
.app-confirm .lgrt-modal-chrome__titles {
    padding-top: 0;
}
.app-confirm .lgrt-modal-chrome__title {
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lgrt-control-fg);
}
.app-confirm .lgrt-modal-chrome__badge {
    width: 2.5rem;
    height: 2.5rem;
}
.app-confirm .lgrt-modal-chrome__badge .lgrt-ui-icon {
    width: 1.3rem;
    height: 1.3rem;
}
.app-confirm-body {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 0.9rem;
    line-height: 1.55;
    color: #cbd5e1;
}
#app-confirm-facts {
    margin-top: 12px;
}
#app-confirm-facts:empty,
#app-confirm-facts[hidden] {
    display: none !important;
}
.app-confirm__actions {
    /* fuente canónica: bloque pie unificado arriba; no redefinir justify/bg acá */
    margin: 16px 0 0;
}
.app-confirm__actions .btn-enable,
.app-confirm__actions .btn-remove {
    min-height: 34px;
    min-width: 7.5rem;
    padding: 0.4rem 1rem;
    border-radius: 10px;
    border: 0;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}
.app-confirm__actions .btn-enable {
    background: var(--color-action-accept, #22c55e) !important;
}
.app-confirm__actions .btn-remove {
    background: var(--color-action-remove, #dc2626) !important;
}

/* —— Wizard stepper: burbuja (track pill) + paso activo naranja sólido ——
 * Canónico para TODOS los wizards (.vs-wizard-* y .au-wizard-*).
 * Premisa: UNA fila mientras haya espacio en pantalla (nowrap + ellipsis).
 * Solo en viewports muy angostos se permite wrap para no cortar usabilidad. */
.vs-wizard-steps,
.au-wizard-steps {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 14px;
    padding: 4px;
    list-style: none;
    background: rgba(15, 17, 23, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.vs-wizard-dot,
.au-wizard-dot {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--color-text-label);
    border: 0;
    border-radius: 999px;
    padding: 5px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.vs-wizard-dot__num,
.au-wizard-dot__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.65rem;
    background: var(--color-border);
    color: #a1a1aa;
    flex: 0 0 auto;
}
.vs-wizard-dot__lab,
.au-wizard-dot__lab {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: none;
}
@media (max-width: 420px) {
    .vs-wizard-steps,
    .au-wizard-steps {
        flex-wrap: wrap;
        border-radius: 14px;
    }
    .vs-wizard-dot,
    .au-wizard-dot {
        flex: 1 1 calc(33.333% - 2px);
    }
}

/* Card de wizard multi-paso: usa el ancho de pantalla disponible (hasta 56rem). */
.lgrt-inm-modal__card--wizard {
    max-width: min(56rem, calc(100vw - 32px)) !important;
    width: 100%;
}
.lgrt-inm-modal__card--wizard-md {
    max-width: min(42rem, calc(100vw - 32px)) !important;
    width: 100%;
}
.vs-wizard-dot.is-active,
.au-wizard-dot.is-active {
    color: #fff;
    background: var(--color-primary, #f97316);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.vs-wizard-dot.is-active .vs-wizard-dot__num,
.au-wizard-dot.is-active .au-wizard-dot__num {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.vs-wizard-dot.is-done,
.au-wizard-dot.is-done {
    color: #cbd5e1;
}
.vs-wizard-dot.is-done .vs-wizard-dot__num,
.au-wizard-dot.is-done .au-wizard-dot__num {
    background: rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
}
.vs-wizard-dot--jump .vs-wizard-dot__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.vs-wizard-dot--jump .vs-wizard-dot__btn:hover {
    color: #fff;
}
.vs-wizard-dot--jump.is-active .vs-wizard-dot__btn {
    cursor: default;
}
.vs-wizard-dot--jump .vs-wizard-dot__btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
    border-radius: 999px;
}
.au-wizard-step[hidden] {
    display: none !important;
}

/* Admin users confirm / modal glass */
.admin-users-confirm {
    background: var(--lgrt-modal-backdrop) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.admin-users-confirm__card,
.admin-users-modal__card {
    background: var(--lgrt-modal-glass-bg) !important;
    border: 1px solid var(--lgrt-modal-glass-border) !important;
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--lgrt-modal-glass-shadow) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.admin-users-confirm__card {
    max-width: min(26rem, calc(100vw - 32px));
    padding: 16px 18px 14px;
}