/* =========================================================
   WORKPLACE CENTRAL PREMIUM THEME
   Sistema de diseño global para Workplace, CheckInnova, Validoc y Rexia
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* --- Workplace Core Tokens --- */
    --wp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wp-bg: #f8fafc;
    --wp-surface: #ffffff;
    --wp-border: #e2e8f0;
    --wp-border-hover: #cbd5e1;
    --wp-text-main: #0f172a;
    --wp-text-muted: #64748b;
    --wp-text-light: #94a3b8;
    --wp-radius-sm: 8px;
    --wp-radius-md: 14px;
    --wp-radius-lg: 20px;
    --wp-shadow-sm: 0 1px 3px rgba(0,0,0,0.02), 0 2px 6px rgba(15, 23, 42, 0.03);
    --wp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    --wp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.06), 0 16px 48px rgba(15, 23, 42, 0.08);
    --wp-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    /* --- Soluciones Brand Colors --- */
    /* CheckInnova (Azul) */
    --ci-primary: #2563eb;
    --ci-primary-hover: #1d4ed8;
    --ci-primary-soft: rgba(37, 99, 235, 0.07);
    --ci-primary-border: rgba(37, 99, 235, 0.16);
    --ci-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    /* Validoc (Verde Esmeralda/Teal) */
    --vl-primary: #0f766e;
    --vl-primary-hover: #115e59;
    --vl-primary-soft: rgba(13, 148, 136, 0.07);
    --vl-primary-border: rgba(13, 148, 136, 0.16);
    --vl-gradient: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
    /* Rexia (Índigo/Violeta) */
    --rx-primary: #4f46e5;
    --rx-primary-hover: #4338ca;
    --rx-primary-soft: rgba(79, 70, 229, 0.07);
    --rx-primary-border: rgba(79, 70, 229, 0.16);
    --rx-gradient: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    
    
    /* Reclamo Facil (Naranja Amber - asociado a atención / incidencias) */
    --rf-primary: #f59e0b;
    --rf-primary-hover: #d97706;
    --rf-primary-soft: rgba(245, 158, 11, 0.07);
    --rf-primary-border: rgba(245, 158, 11, 0.16);
    --rf-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    
    /* Transformation Hub (Azul Marino Ejecutivo) */
    --tf-primary: #1e3a8a;
    --tf-primary-hover: #1d4ed8;
    --tf-primary-soft: rgba(30, 58, 138, 0.07);
    --tf-primary-border: rgba(30, 58, 138, 0.16);
    --tf-gradient: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

/* --- Global Override --- */
body {
    font-family: var(--wp-font) !important;
    background-color: var(--wp-bg) !important;
    color: var(--wp-text-main) !important;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout Contenedor Shell --- */
.wp-layout {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.wp-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1.5rem;
}

.wp-content-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/* --- Sidebar Estandarizado --- */
.wp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1020;
    background: #ffffff;
    border-right: 1px solid var(--wp-border);
    box-shadow: var(--wp-shadow-sm);
    transition: width var(--wp-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.wp-sidebar-expanded {
    width: 260px;
}

.wp-sidebar-collapsed {
    width: 68px;
}

/* Sidebar Header & Brand */
.wp-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--wp-border);
}

.wp-sidebar-collapsed .wp-sidebar-header {
    justify-content: center;
    padding: 1.25rem 0.5rem;
}

.wp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wp-brand-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Temas específicos para el icono de la marca */
.wp-theme-validoc .wp-brand-icon {
    background: var(--vl-gradient);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

.wp-theme-rexia .wp-brand-icon {
    background: var(--rx-gradient);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.wp-theme-checkinnova .wp-brand-icon {
    background: var(--ci-gradient);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.wp-theme-transformation .wp-brand-icon {
    background: var(--tf-gradient);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.wp-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wp-brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wp-text-main);
    line-height: 1.1;
}

.wp-brand-desc {
    font-size: 0.7rem;
    color: var(--wp-text-muted);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Toggle */
.wp-sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--wp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--wp-text-muted);
    transition: all var(--wp-transition);
    cursor: pointer;
    padding: 0;
}

.wp-sidebar-toggle:hover {
    background: var(--wp-bg);
    color: var(--wp-text-main);
    transform: scale(1.05);
}

/* Sidebar Body & Navigation */
.wp-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
}

.wp-sidebar-nav-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.wp-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

/* Botones e items de navegación */
.wp-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all var(--wp-transition);
    cursor: pointer;
    position: relative;
}

.wp-icon-btn:hover {
    background: var(--wp-bg);
    color: var(--wp-text-main);
}

.wp-theme-validoc .wp-icon-btn.active {
    background: var(--vl-primary-soft);
    border-color: var(--vl-primary-border);
    color: var(--vl-primary);
}

.wp-theme-rexia .wp-icon-btn.active {
    background: var(--rx-primary-soft);
    border-color: var(--rx-primary-border);
    color: var(--rx-primary);
}

.wp-theme-checkinnova .wp-icon-btn.active {
    background: var(--ci-primary-soft);
    border-color: var(--ci-primary-border);
    color: var(--ci-primary);
}

.wp-theme-transformation .wp-icon-btn.active {
    background: var(--tf-primary-soft);
    border-color: var(--tf-primary-border);
    color: var(--tf-primary);
}

/* Item único sin expandir */
.wp-nav-item-single {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    color: var(--wp-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--wp-transition);
    border: 1px solid transparent;
}

.wp-nav-item-single:hover {
    background: var(--wp-bg);
    color: var(--wp-text-main);
}

.wp-theme-validoc .wp-nav-item-single.active {
    background: var(--vl-primary-soft);
    border-color: var(--vl-primary-border);
    color: var(--vl-primary);
    font-weight: 600;
}

.wp-theme-rexia .wp-nav-item-single.active {
    background: var(--rx-primary-soft);
    border-color: var(--rx-primary-border);
    color: var(--rx-primary);
    font-weight: 600;
}

.wp-theme-checkinnova .wp-nav-item-single.active {
    background: var(--ci-primary-soft);
    border-color: var(--ci-primary-border);
    color: var(--ci-primary);
    font-weight: 600;
}

.wp-theme-transformation .wp-nav-item-single.active {
    background: var(--tf-primary-soft);
    border-color: var(--tf-primary-border);
    color: var(--tf-primary);
    font-weight: 600;
}

/* Grupo de acordeón */
.wp-nav-group {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
}

.wp-nav-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--wp-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    transition: all var(--wp-transition);
}

.wp-nav-group-header:hover {
    background: var(--wp-bg);
    color: var(--wp-text-main);
}

.wp-nav-group-header i:first-child {
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}

.wp-nav-group .toggle-arrow {
    font-size: 0.75rem;
    transition: transform var(--wp-transition);
}

.wp-nav-group.open .toggle-arrow {
    transform: rotate(180deg);
}

.wp-nav-group-body {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
    margin-top: 0.15rem;
    gap: 0.2rem;
}

.wp-nav-item {
    display: block;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    color: var(--wp-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--wp-transition);
    border-left: 2px solid transparent;
}

.wp-nav-item:hover {
    background: var(--wp-bg);
    color: var(--wp-text-main);
}

.wp-theme-validoc .wp-nav-item.active {
    color: var(--vl-primary);
    border-left-color: var(--vl-primary);
    background: var(--vl-primary-soft);
    font-weight: 600;
}

.wp-theme-rexia .wp-nav-item.active {
    color: var(--rx-primary);
    border-left-color: var(--rx-primary);
    background: var(--rx-primary-soft);
    font-weight: 600;
}

.wp-theme-checkinnova .wp-nav-item.active {
    color: var(--ci-primary);
    border-left-color: var(--ci-primary);
    background: var(--ci-primary-soft);
    font-weight: 600;
}

.wp-theme-transformation .wp-nav-item.active {
    color: var(--tf-primary);
    border-left-color: var(--tf-primary);
    background: var(--tf-primary-soft);
    font-weight: 600;
}

/* Badges e indicadores */
.wp-badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

.wp-badge-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 99px;
    margin-left: auto;
}

/* --- Cards Premium con Elevación y Hover --- */
.card {
    background-color: var(--wp-surface) !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: var(--wp-radius-md) !important;
    box-shadow: var(--wp-shadow-sm) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
}

.card.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp-shadow-md) !important;
}

/* Efectos de borde activo según el tema */
.wp-theme-validoc .card.card-hover:hover {
    border-color: var(--vl-primary-border) !important;
}

.wp-theme-rexia .card.card-hover:hover {
    border-color: var(--rx-primary-border) !important;
}

.wp-theme-transformation .card.card-hover:hover {
    border-color: var(--tf-primary-border) !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--wp-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
}

/* --- Tablas Modernas y Limpias --- */
.table-responsive {
    border-radius: var(--wp-radius-md);
    border: 1px solid var(--wp-border);
    background: #ffffff;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--wp-shadow-sm);
}

.table {
    margin-bottom: 0 !important;
}

.table th {
    background-color: #f8fafc !important;
    color: var(--wp-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid var(--wp-border) !important;
}

.table td {
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    font-size: 0.85rem !important;
    color: var(--wp-text-main) !important;
}

.table tbody tr {
    transition: background-color var(--wp-transition);
}

.table tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.75) !important;
}

/* --- Botones Premium --- */
.btn {
    border-radius: 10px !important;
    padding: 0.5rem 1.2rem !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transition: all var(--wp-transition) !important;
}

/* Botón Primary - Workplace General (Azul) */
.btn-primary {
    background-color: var(--ci-primary) !important;
    border-color: var(--ci-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ci-primary-hover) !important;
    border-color: var(--ci-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28) !important;
    transform: translateY(-1px);
}

/* Botón Primary - Validoc */
.wp-theme-validoc .btn-primary {
    background-color: var(--vl-primary) !important;
    border-color: var(--vl-primary) !important;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.18) !important;
}

.wp-theme-validoc .btn-primary:hover {
    background-color: var(--vl-primary-hover) !important;
    border-color: var(--vl-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28) !important;
}

/* Botón Primary - Rexia */
.wp-theme-rexia .btn-primary {
    background-color: var(--rx-primary) !important;
    border-color: var(--rx-primary) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18) !important;
}

.wp-theme-rexia .btn-primary:hover {
    background-color: var(--rx-primary-hover) !important;
    border-color: var(--rx-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28) !important;
}

/* Botón Primary - Transformation */
.wp-theme-transformation .btn-primary {
    background-color: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.18) !important;
}

.wp-theme-transformation .btn-primary:hover, .wp-theme-transformation .btn-primary:focus {
    background-color: var(--tf-primary-hover) !important;
    border-color: var(--tf-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.28) !important;
    transform: translateY(-1px);
}

/* Botón Secondary / Outline */
.btn-outline-secondary {
    border-color: var(--wp-border) !important;
    color: var(--wp-text-muted) !important;
    background-color: #ffffff !important;
}

.btn-outline-secondary:hover {
    background-color: var(--wp-bg) !important;
    border-color: var(--wp-border-hover) !important;
    color: var(--wp-text-main) !important;
}

/* --- Inputs y Formularios --- */
.form-control, .form-select {
    border-radius: 10px !important;
    border: 1px solid var(--wp-border) !important;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem !important;
    background-color: #ffffff !important;
    transition: all var(--wp-transition) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ci-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.wp-theme-validoc .form-control:focus, 
.wp-theme-validoc .form-select:focus {
    border-color: var(--vl-primary) !important;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12) !important;
}

.wp-theme-rexia .form-control:focus, 
.wp-theme-rexia .form-select:focus {
    border-color: var(--rx-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

.wp-theme-transformation .form-control:focus, 
.wp-theme-transformation .form-select:focus {
    border-color: var(--tf-primary) !important;
    box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12) !important;
}

.form-label {
    font-weight: 550 !important;
    color: var(--wp-text-muted) !important;
    font-size: 0.82rem !important;
}

/* --- Fondo e Iluminación para Autenticación --- */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, #f1f5f9 0%, #e2e8f0 100%);
}

/* Efectos de luz flotante tras la tarjeta */
.auth-container::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    top: -150px;
    left: -150px;
    pointer-events: none;
}

.auth-container::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.05) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    pointer-events: none;
}

.auth-card-premium {
    background: #ffffff !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 20px 40px -10px rgba(15, 23, 42, 0.04) !important;
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 480px;
    z-index: 10;
}

.auth-card-premium-wide {
    background: #ffffff !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 20px 40px -10px rgba(15, 23, 42, 0.04) !important;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 960px;
    z-index: 10;
}

/* =========================================================
   AUTH ENTERPRISE SPLIT LAYOUT (Login & Portal)
   ========================================================= */

.auth-split-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #f8fafc;
}

@media (min-width: 992px) {
    .auth-split-wrapper {
        flex-direction: row;
    }
}

/* Columna de autenticación / formulario (izquierda) */
.auth-split-form-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    min-height: 100vh;
    position: relative;
    z-index: 10;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
}

@media (min-width: 576px) {
    .auth-split-form-col {
        padding: 2.5rem 3rem;
    }
}

@media (min-width: 992px) {
    .auth-split-form-col {
        width: 48%;
        padding: 2.5rem 3.5rem;
        box-shadow: none;
    }
}

@media (min-width: 1200px) {
    .auth-split-form-col {
        width: 44%;
        padding: 3rem 4.5rem;
    }
}

/* Header del Formulario */
.auth-split-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.auth-header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.auth-header-logo {
    height: 38px;
    max-height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

.auth-brand-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    flex-shrink: 0;
}

.auth-brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.auth-brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.4rem;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-brand-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
    margin-top: 0.2rem;
    margin-bottom: 0;
}

.auth-header-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    transition: all var(--wp-transition);
}

.auth-header-help-link:hover {
    color: #1d4ed8;
    background-color: #f8fafc;
}

/* Cuerpo del formulario (Centrado vertical) */
.auth-split-body {
    margin: auto 0;
    padding: 2rem 0;
    max-width: 420px;
    width: 100%;
    align-self: center;
}

.auth-heading {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.auth-subheading {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.auth-form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 0.4rem;
}

.auth-input-wrapper {
    position: relative;
    border-radius: 8px;
}

.auth-input-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 0.875rem;
    color: #94a3b8;
    pointer-events: none;
    z-index: 4;
}

.auth-icon-at {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
}

.auth-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0.625rem 0.875rem 0.625rem 2.6rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all var(--wp-transition);
}

.auth-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.auth-input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    outline: none;
    color: #0f172a;
    background-color: #ffffff;
}

.auth-input-password {
    padding-right: 2.75rem;
}

.auth-toggle-password-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    z-index: 5;
    transition: color var(--wp-transition);
}

.auth-toggle-password-btn:hover {
    color: #475569;
}

.auth-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.auth-forgot-link {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    transition: color var(--wp-transition);
}

.auth-forgot-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    margin-top: 0.5rem;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #1d4ed8;
    border: none;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
    transition: all var(--wp-transition);
    cursor: pointer;
}

.auth-submit-btn:hover:not(:disabled) {
    background-color: #1e40af;
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35);
}

.auth-submit-btn:active:not(:disabled) {
    background-color: #1e3a8a;
}

.auth-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25);
}

.auth-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Aviso de protocolo corporativo */
.auth-notice-card {
    margin-top: 1.5rem;
    border-radius: 12px;
    background-color: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.auth-notice-icon {
    color: #1d4ed8;
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.auth-notice-text {
    font-size: 0.775rem;
    color: #475569;
    line-height: 1.5;
}

.auth-notice-text strong {
    color: #1e293b;
    font-weight: 600;
}

.auth-notice-link {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
}

.auth-notice-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

.auth-register-prompt {
    font-size: 0.8rem;
    text-align: center;
    color: #64748b;
    margin-top: 1rem;
    margin-bottom: 0;
}

.auth-register-link {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
}

.auth-register-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* Micro-badge de seguridad y cumplimiento */
.auth-security-badge {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: -0.01em;
}

.auth-security-icon {
    color: #059669;
    font-size: 0.85rem;
}

.auth-security-bullet {
    color: #cbd5e1;
}

/* Footer del Formulario */
.auth-split-footer {
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #64748b;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .auth-split-footer {
        flex-direction: row;
        gap: 1rem;
    }
}

.auth-footer-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #94a3b8;
}

.auth-footer-link {
    color: #64748b;
    text-decoration: none;
    transition: color var(--wp-transition);
}

.auth-footer-link:hover {
    color: #0f172a;
}

.auth-footer-sep {
    color: #e2e8f0;
}

/* =========================================================
   Showcase Column (Columna derecha visual / corporativa)
   ========================================================= */
.auth-showcase-col {
    display: none;
}

@media (min-width: 992px) {
    .auth-showcase-col {
        display: flex;
        flex: 1 1 0%;
        width: 52%;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        background-color: #0a0f1d;
        padding: 2.75rem 3rem;
        color: #ffffff;
        border-left: 1px solid rgba(30, 41, 59, 0.8);
    }
}

@media (min-width: 1200px) {
    .auth-showcase-col {
        width: 56%;
        padding: 3rem 4rem;
    }
}

.auth-showcase-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auth-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.auth-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 13, 26, 0.92) 0%, rgba(10, 15, 29, 0.78) 50%, rgba(8, 13, 26, 0.88) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.auth-showcase-tint {
    position: absolute;
    inset: 0;
    background-color: rgba(23, 37, 84, 0.2);
    mix-blend-mode: overlay;
}

.auth-tech-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(29, 78, 216, 0.16) 0%, rgba(10, 15, 29, 0) 70%),
                radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.auth-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.auth-showcase-topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.auth-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.6);
    font-family: monospace;
    font-size: 0.7rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
    font-weight: 500;
}

.auth-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: authPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.auth-version-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: monospace;
    font-size: 0.7rem;
    color: #cbd5e1;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.auth-showcase-center {
    position: relative;
    z-index: 10;
    margin: auto;
    padding: 2.5rem 0;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-glass-card {
    padding: 2.25rem 2.25rem;
    border-radius: 20px;
    background-color: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(51, 65, 85, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.auth-glass-isotype-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.auth-isotype-glow {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background-color: rgba(37, 99, 235, 0.3);
    filter: blur(16px);
}

.auth-glass-logo-badge {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 0.85rem 1.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 25px rgba(37, 99, 235, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.auth-glass-logo-img {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.auth-glass-isotype {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.35);
}

.auth-glass-isotype svg {
    width: 34px;
    height: 34px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.auth-glass-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.auth-glass-subtitle {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-family: monospace;
    letter-spacing: 0.25em;
    color: #94a3b8;
    font-weight: 600;
}

.auth-suite-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
    justify-content: center;
}

.auth-suite-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    letter-spacing: 0.03em;
}

.auth-showcase-bottombar {
    position: relative;
    z-index: 10;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: monospace;
    font-size: 0.7rem;
    color: #cbd5e1;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.auth-node-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-node-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.auth-node-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #64748b;
}

.auth-edition-badge {
    color: #cbd5e1;
    letter-spacing: 0.08em;
    font-weight: 600;
}

@keyframes authPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* --- Dashboard Welcome Banner --- */
.welcome-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--wp-radius-lg);
    padding: 2.25rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--wp-shadow-md);
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.welcome-banner::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 80%);
    top: -50px;
    right: -50px;
    pointer-events: none;
}

.welcome-banner h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

/* --- Cards de Aplicaciones en Dashboard --- */
.app-grid-card {
    border-radius: var(--wp-radius-md) !important;
    border: 1px solid var(--wp-border) !important;
    background: #ffffff !important;
    box-shadow: var(--wp-shadow-sm) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
}

.app-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--wp-shadow-lg) !important;
}

.app-grid-card.app-checkinnova:hover {
    border-color: rgba(37, 99, 235, 0.3) !important;
}

.app-grid-card.app-validoc:hover {
    border-color: rgba(15, 118, 110, 0.3) !important;
}

.app-grid-card.app-rexia:hover {
    border-color: rgba(79, 70, 229, 0.3) !important;
}

.app-card-icon-container {
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    box-shadow: var(--wp-shadow-sm);
}

.app-checkinnova .app-card-icon-container {
    background: var(--ci-gradient);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.app-validoc .app-card-icon-container {
    background: var(--vl-gradient);
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

.app-rexia .app-card-icon-container {
    background: var(--rx-gradient);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.app-transformation .app-card-icon-container,
.app-transformation-hub .app-card-icon-container {
    background: var(--tf-gradient);
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25);
}

.app-facturacion .app-card-icon-container {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.app-reclamos .app-card-icon-container {
    background: var(--rf-gradient);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}


/* =========================================================
   WIZARD REGISTRO DEMO & ENTERPRISE PRECISION
   ========================================================= */

.wizard-progress-wrapper {
    margin-bottom: 1.75rem;
}

.wizard-progress-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wizard-progress-subtitle {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wp-text-main);
}

.wizard-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e9eef5;
    overflow: hidden;
}

.wizard-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ci-gradient);
    transition: width 220ms ease;
}

.wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 0;
    text-align: center;
}

.wizard-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--wp-border);
    background: #ffffff;
    color: var(--wp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 180ms ease;
}

.wizard-step-text {
    font-size: 0.74rem;
    color: var(--wp-text-muted);
    font-weight: 600;
}

.wizard-step.active .wizard-step-circle {
    background: var(--ci-primary);
    border-color: var(--ci-primary);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.wizard-step.active .wizard-step-text {
    color: var(--wp-text-main);
}

.wizard-step.done .wizard-step-circle {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    color: var(--ci-primary);
}

.wizard-step.done .wizard-step-text {
    color: var(--wp-text-main);
}

/* =========================================================
   REGISTRO ENTERPRISE PRECISION (Pages/Registro.razor)
   ========================================================= */

.reg-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f6f8fc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(224, 231, 255, 0.5) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(219, 234, 254, 0.6) 0px, transparent 50%);
}

/* Top Navigation Bar */
.reg-top-nav {
    width: 100%;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 40;
}

.reg-top-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reg-brand-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.reg-brand-logo {
    height: 38px;
    max-height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.reg-brand-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid rgba(191, 219, 254, 0.7);
    border-radius: 999px;
    padding: 2px 8px;
}

.reg-header-login-btn {
    font-size: 0.825rem;
    font-weight: 600;
    color: #1d4ed8;
    background: #ffffff;
    border: 1px solid rgba(191, 219, 254, 0.85);
    border-radius: 8px;
    padding: 6px 14px;
    text-decoration: none;
    transition: all 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.reg-header-login-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

/* Hero Section */
.reg-hero-section {
    text-align: center;
    max-width: 600px;
    margin: 2.5rem auto 2rem auto;
    padding: 0 1rem;
}

.reg-hero-brand-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.reg-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.45rem;
}

.reg-hero-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 0;
}

/* Registration Card Container */
.reg-card {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 3rem auto;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

/* Stepper Header */
.reg-stepper-header {
    padding: 2rem 2.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.reg-stepper-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.reg-stepper-counter {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.reg-stepper-context {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.reg-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.reg-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: #1d4ed8;
    transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-progress-bar.step-1 { width: 25%; }
.reg-progress-bar.step-2 { width: 50%; }
.reg-progress-bar.step-3 { width: 75%; }
.reg-progress-bar.step-4 { width: 100%; }

.reg-stepper-nodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.reg-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: all 180ms ease;
}

.reg-step-node:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.reg-step-badge {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 200ms ease;
}

.reg-step-badge.pending {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: #94a3b8;
}

.reg-step-badge.active {
    background: #1d4ed8;
    border: 2px solid #1d4ed8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.reg-step-badge.done {
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    color: #1d4ed8;
}

.reg-step-label {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition: color 180ms ease;
}

.reg-step-label.pending {
    color: #94a3b8;
    font-weight: 500;
}

.reg-step-label.active {
    color: #1d4ed8;
    font-weight: 700;
}

.reg-step-label.done {
    color: #1d4ed8;
    font-weight: 600;
}

/* Form Body */
.reg-form-body {
    padding: 2.25rem 2.25rem 1.75rem;
}

.reg-step-head {
    margin-bottom: 1.5rem;
}

.reg-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.reg-step-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0;
}

.reg-label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.4rem;
}

.reg-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.reg-badge-autofill {
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid rgba(191, 219, 254, 0.6);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.reg-input, .reg-select, .reg-textarea {
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #1e293b;
    background-color: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

.reg-input:focus, .reg-select:focus, .reg-textarea:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
    outline: none !important;
}

.reg-input[readonly] {
    background-color: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

.reg-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.reg-input-group .reg-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.reg-input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.85rem;
    font-size: 0.875rem;
    color: #64748b;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.reg-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.35rem;
    display: block;
}

/* Step 4 Review */
.reg-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.reg-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
}

.reg-summary-item-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.reg-summary-item-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.reg-terms-row {
    margin-bottom: 1.25rem;
}

.reg-notice-badge {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-top: 1rem;
}

.reg-notice-icon {
    font-size: 1rem;
    color: #059669;
    flex-shrink: 0;
}

/* Nav Actions */
.reg-nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.reg-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #1d4ed8;
    border: 1px solid #1d4ed8;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.7rem 1.6rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.22);
    transition: all 180ms ease;
    cursor: pointer;
    text-decoration: none;
}

.reg-btn-next:hover:not(:disabled) {
    background: #1e40af;
    border-color: #1e40af;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}

.reg-btn-next:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.reg-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 180ms ease;
    cursor: pointer;
    text-decoration: none;
}

.reg-btn-back:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Bottom card inline login strip */
.reg-card-footer-strip {
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    font-size: 0.825rem;
    color: #64748b;
}

.reg-card-footer-link {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
}

.reg-card-footer-link:hover {
    text-decoration: underline;
    color: #1e40af;
}

/* Page footer */
.reg-page-footer {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
}

.reg-footer-sig-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    margin-bottom: 0.6rem;
    opacity: 0.85;
    transition: opacity 180ms ease;
}

.reg-footer-sig-logo:hover {
    opacity: 1;
}

/* Success view */
.reg-success-container {
    text-align: center;
    padding: 3rem 1.5rem;
}

.reg-success-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 2px solid #a7f3d0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.reg-success-icon {
    font-size: 38px;
    color: #059669;
}

.reg-success-card {
    max-width: 600px;
    margin: 1.5rem auto;
    text-align: left;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

/* Modal helper classes */
.reg-modal-zindex {
    z-index: 1045;
}

.reg-modal-scrollable {
    max-height: 500px;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .wizard-steps {
        gap: 0.35rem;
    }

    .wizard-step-text {
        font-size: 0.67rem;
    }

    .auth-card-premium-wide {
        padding: 1.5rem 1.2rem;
    }

    .reg-stepper-header {
        padding: 1.5rem 1.2rem 1.25rem;
    }

    .reg-form-body {
        padding: 1.5rem 1.2rem;
    }

    .reg-stepper-nodes {
        gap: 0.25rem;
    }

    .reg-step-label {
        font-size: 0.7rem;
    }

    .reg-step-badge {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }

    .reg-summary-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .reg-hero-title {
        font-size: 1.25rem;
    }

    .reg-hero-brand-title {
        font-size: 1.75rem;
    }
}



/* =========================================================
   MARKETPLACE V2 - Enterprise Precision
   Reutiliza el sistema base wp-* y tokens globales
   ========================================================= */
.cursor-pointer {
    cursor: pointer;
}

.desc-trunc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Breadcrumbs */
.market-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--wp-text-muted);
    margin-bottom: 1rem;
}

.market-breadcrumb a {
    color: var(--wp-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--wp-transition);
}

.market-breadcrumb a:hover {
    color: var(--ci-primary);
}

.market-breadcrumb .separator {
    color: var(--wp-text-light);
    font-size: 0.75rem;
}

.market-breadcrumb .current {
    color: var(--wp-text-main);
    font-weight: 600;
}

/* Pulse badge & Header Metrics */
.market-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid #dbeafe;
}

.market-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--ci-primary);
    animation: marketPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes marketPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.market-header-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--wp-text-main);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.market-header-desc {
    font-size: 0.92rem;
    color: var(--wp-text-muted);
    line-height: 1.5;
    max-width: 650px;
    margin-bottom: 0;
}

.market-metric-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 0.65rem 1.15rem;
    box-shadow: var(--wp-shadow-sm);
    gap: 1.25rem;
}

.market-metric-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.market-metric-item:not(:last-child) {
    border-right: 1px solid var(--wp-border);
    padding-right: 1.25rem;
}

.market-metric-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wp-text-main);
    line-height: 1;
}

.market-metric-label {
    font-size: 0.75rem;
    color: var(--wp-text-muted);
    line-height: 1;
    margin-top: 0.2rem;
}

/* Search & Filter Nav Bar */
.market-filter-bar {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 0.85rem 1.15rem;
    box-shadow: var(--wp-shadow-sm);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 992px) {
    .market-filter-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.market-search-box {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.market-search-box i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wp-text-light);
    font-size: 0.95rem;
    pointer-events: none;
}

.market-search-input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.45rem;
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    border-radius: 9px;
    font-size: 0.88rem;
    color: var(--wp-text-main);
    transition: var(--wp-transition);
}

.market-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.market-search-input::placeholder {
    color: var(--wp-text-light);
}

.market-category-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 2px;
}

.market-category-nav::-webkit-scrollbar {
    display: none;
}

.market-category-btn {
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: #f1f5f9;
    color: var(--wp-text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--wp-transition);
}

.market-category-btn:hover {
    background: #e2e8f0;
    color: var(--wp-text-main);
}

.market-category-btn.active {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

/* Soluciones Catalog Cards (Left Column) */
.market-catalog-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.market-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.25rem 0.25rem;
}

.market-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin: 0;
}

.market-solution-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    cursor: pointer;
    transition: var(--wp-transition);
    overflow: hidden;
    box-shadow: var(--wp-shadow-sm);
}

.market-solution-card:hover {
    border-color: var(--wp-border-hover);
    box-shadow: var(--wp-shadow-md);
    transform: translateY(-1px);
}

.market-solution-card.active {
    border-color: var(--ci-primary) !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12) !important;
}

.market-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--ci-primary);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.market-solution-card.active .market-accent-bar {
    opacity: 1;
}

.market-solution-body {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding-left: 0.35rem;
}

.market-sol-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.market-sol-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin: 0;
}

.market-sol-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: var(--wp-text-muted);
    white-space: nowrap;
}

.market-solution-card.active .market-sol-badge {
    background: #eff6ff;
    color: #1d4ed8;
}

.market-sol-desc {
    font-size: 0.83rem;
    color: var(--wp-text-muted);
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.market-sol-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.45rem;
    border-top: 1px solid #f8fafc;
    font-size: 0.8rem;
}

.market-sol-category {
    color: var(--wp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    font-size: 0.78rem;
}

.market-sol-price {
    font-weight: 700;
    color: var(--ci-primary);
    font-size: 0.84rem;
}

/* Detail Showcase Card (Right Column) */
.market-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.market-showcase-card {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--wp-shadow-sm);
}

.market-showcase-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 576px) {
    .market-showcase-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.market-showcase-brand {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
}

.market-detail-icon {
    width: 62px;
    min-width: 62px;
    height: 62px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.app-checkinnova .market-detail-icon {
    background: var(--ci-gradient);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.app-rexia .market-detail-icon {
    background: var(--rx-gradient);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.25);
}

.app-validoc .market-detail-icon {
    background: var(--vl-gradient);
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25);
}

.app-transformation .market-detail-icon,
.app-transformation-hub .market-detail-icon {
    background: var(--tf-gradient);
    box-shadow: 0 6px 18px rgba(30, 58, 138, 0.25);
}

.app-facturacion .market-detail-icon {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.25);
}

.app-reclamos .market-detail-icon {
    background: var(--rf-gradient);
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.25);
}

.market-showcase-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.market-showcase-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--wp-text-main);
    margin: 0;
}

.market-badge-oficial {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid #a7f3d0;
}

.market-showcase-desc {
    font-size: 0.9rem;
    color: var(--wp-text-muted);
    line-height: 1.5;
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.market-showcase-sla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .market-showcase-sla {
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }
}

.market-sla-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--wp-text-muted);
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
}

.market-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding-top: 1.15rem;
}

@media (min-width: 576px) {
    .market-features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.market-feature-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--wp-text-main);
    font-weight: 500;
}

.market-feature-item i {
    color: #059669;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Plan Cards Grid */
.market-plan-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: var(--wp-transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    box-shadow: var(--wp-shadow-sm);
}

.market-plan-card:hover {
    border-color: var(--wp-border-hover);
    box-shadow: var(--wp-shadow-md);
}

.market-plan-card.selected {
    border-color: var(--ci-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--wp-shadow-md) !important;
    background: #ffffff;
}

.market-plan-badge-savings {
    position: absolute;
    top: -10px;
    right: 16px;
    background: #059669;
    color: #ffffff;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.market-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.market-plan-period-pill {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: var(--wp-text-muted);
}

.market-plan-card.selected .market-plan-period-pill {
    background: #eff6ff;
    color: #1d4ed8;
}

.market-radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid var(--wp-border);
    color: transparent;
    font-size: 0.75rem;
    transition: var(--wp-transition);
}

.market-plan-card.selected .market-radio-circle {
    background: var(--ci-primary);
    border-color: var(--ci-primary);
    color: #ffffff;
}

.market-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin-bottom: 0.35rem;
}

.market-plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.market-plan-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wp-text-main);
    letter-spacing: -0.02em;
    line-height: 1;
}

.market-plan-period {
    font-size: 0.85rem;
    color: var(--wp-text-muted);
    font-weight: 500;
}

.market-plan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.market-tag-igv {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #ecfdf5;
    color: #065f46;
}

.market-tag-trial {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
}

.market-tag-free {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
}

.market-plan-desc {
    font-size: 0.84rem;
    color: var(--wp-text-muted);
    line-height: 1.45;
    margin-bottom: 1rem;
}

.market-plan-select-status {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid #f8fafc;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wp-text-muted);
}

.market-plan-card.selected .market-plan-select-status {
    color: var(--ci-primary);
}

.market-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--wp-text-main);
    line-height: 1.1;
}

.market-highlight {
    border-style: dashed !important;
    border-color: var(--wp-border-hover) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%) !important;
}

/* Sticky Purchase Confirmation & Summary Action Bar */
.market-summary-bar {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: var(--wp-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .market-summary-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.market-summary-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.market-summary-bag {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--ci-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.market-summary-badge-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp-text-muted);
    display: block;
}

.market-summary-plan-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp-text-main);
}

.market-summary-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ci-primary);
}

.market-summary-subtitle {
    font-size: 0.78rem;
    color: var(--wp-text-muted);
    display: block;
}

.market-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.market-btn-cta {
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    background: #1d4ed8;
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--wp-transition);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
    cursor: pointer;
}

.market-btn-cta:hover:not(:disabled) {
    background: #1e40af;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
    color: #ffffff;
}

.market-btn-cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Complementos (Add-ons) & Selección Agrupada en Marketplace */
.market-category-btn-addon {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-color: #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.market-category-btn-addon:hover {
    background: #dbeafe;
    color: #1e40af;
}

.market-category-btn-addon.active {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.market-sol-addon-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #e0e7ff;
    white-space: nowrap;
}

.market-sol-grouped-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

.market-baseplan-selector-bar {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--wp-shadow-sm);
}

.market-baseplan-selector-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.market-baseplan-selector-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wp-text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.market-baseplan-selector-label i {
    color: var(--ci-primary);
}

.market-baseplan-selector-hint {
    font-size: 0.78rem;
    color: var(--wp-text-muted);
}

.market-baseplan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.market-baseplan-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.18s ease;
}

.market-baseplan-pill:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--wp-text-main);
}

.market-baseplan-pill.active {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.market-addons-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #cbd5e1;
}

.market-addons-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 0.25rem;
}

.market-addons-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.market-addons-active-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.market-addon-box {
    background-color: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--wp-shadow-sm);
    transition: var(--wp-transition);
}

.market-addon-box:hover {
    border-color: var(--wp-border-hover);
    box-shadow: var(--wp-shadow-md);
}

.market-addon-box.selected {
    border-color: var(--ci-primary) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--wp-shadow-md) !important;
}

.market-addon-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.market-addon-title-group {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 1;
    min-width: 240px;
}

.market-addon-icon-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--ci-primary);
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.market-addon-box.selected .market-addon-icon-badge {
    background: var(--ci-primary);
    color: #ffffff;
    border-color: var(--ci-primary);
}

.market-addon-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wp-text-main);
}

.market-addon-rule-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid var(--wp-border);
}

.market-addon-subtitle {
    font-size: 0.84rem;
    color: var(--wp-text-muted);
    display: block;
    margin-top: 0.25rem;
    line-height: 1.45;
}

.market-addon-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.market-addon-box.selected .market-addon-price-block {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.market-addon-price-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--wp-text-main);
    line-height: 1.1;
}

.market-addon-price-unit {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wp-text-muted);
}

.market-addon-demo-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.8rem;
}

.market-addon-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.95rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
}

.market-addon-counter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.market-addon-counter-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0;
}

.market-addon-counter {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.market-btn-counter {
    border: none;
    background-color: #f8fafc;
    color: #1e293b;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.market-btn-counter:hover:not(:disabled) {
    background-color: #e2e8f0;
    color: var(--wp-text-main);
}

.market-btn-counter:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.market-counter-value {
    padding: 0 0.95rem;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 2.6rem;
    text-align: center;
    color: var(--wp-text-main);
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.market-addon-actions-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.market-addon-subtotal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
}

.market-addon-btn-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--ci-primary);
    background: #ffffff;
    color: var(--ci-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.market-addon-btn-toggle:hover:not(:disabled) {
    background: #eff6ff;
}

.market-addon-btn-toggle:disabled {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.market-addon-box.disabled-box {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.92;
}

.market-addon-box.disabled-box .market-addon-icon-badge {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}

.market-addon-price-locked {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    line-height: 1.2;
}

.market-summary-empty-text {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.4;
}

.market-addon-btn-toggle.active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.market-addon-btn-toggle.active:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.market-addon-note {
    font-size: 0.78rem;
    color: var(--wp-text-muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.market-addon-note i {
    color: var(--ci-primary);
}

.market-summary-content {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.market-summary-group-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.market-summary-group-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.market-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.market-summary-chip-plan {
    background: #f1f5f9;
    color: var(--wp-text-main);
    border: 1px solid #cbd5e1;
}

.market-summary-chip-plan i {
    color: var(--ci-primary);
}

.market-summary-chip-addon {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.market-summary-chip-addon i {
    color: #4f46e5;
}

.market-summary-chip-remove {
    border: none;
    background: rgba(55, 48, 163, 0.1);
    color: #3730a3;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.15rem;
    transition: all 0.15s ease;
}

.market-summary-chip-remove:hover {
    background: #ef4444;
    color: #ffffff;
}

.market-summary-total-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.market-summary-total-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
}

.market-existing-sub-addon-card {
    background: #ffffff;
    border: 1px solid #bae6fd;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: var(--wp-shadow-sm);
}

.market-existing-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.market-existing-sub-badge {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* Trust & Compliance Banner */
.market-trust-banner {
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    border-radius: 12px;
    padding: 0.85rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--wp-text-muted);
}

@media (min-width: 576px) {
    .market-trust-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.market-trust-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.market-trust-info i {
    color: var(--ci-primary);
    font-size: 1.05rem;
}

.market-trust-link {
    color: var(--ci-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.market-trust-link:hover {
    text-decoration: underline;
}

/* Toast Container */
.market-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1060;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}

.market-toast-container.toast-hidden {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
}

.market-toast-container.toast-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.market-toast {
    background: #0f172a;
    color: #ffffff;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
}

.market-toast.toast-danger {
    background: #991b1b;
}

.market-toast.toast-info {
    background: #1e3a8a;
}

.market-toast.toast-warning {
    background: #92400e;
}

.market-toast i {
    font-size: 1.1rem;
}

/* Empty State Card */
.market-empty-card {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 16px;
    padding: 3.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wp-shadow-sm);
}

.market-empty-icon {
    font-size: 2.75rem;
    color: var(--wp-text-light);
    margin-bottom: 1rem;
}

/* --- Fixes para Modales y Stacking Context --- */
body:has(.modal) .wp-main, body:has(.modal) .ci-main,
body.modal-open .wp-main, body.modal-open .ci-main {
    z-index: 1040 !important;
    position: relative !important;
}

body:has(.modal) .card, body.modal-open .card {
    transform: none !important;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1040 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal.fade.show.d-block {
    z-index: 1050 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body:has(.modal-backdrop) .modal.fade.show.d-block {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal {
    z-index: 1050 !important;
}

/* --- Modales Premium --- */
.modal-content {
    background-color: var(--wp-surface) !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--wp-border) !important;
    padding: 1.25rem 1.5rem !important;
    background-color: #fafafa !important;
    border-left: 4px solid var(--wp-primary) !important;
}

.wp-theme-validoc .modal-header {
    border-left: 4px solid var(--vl-primary) !important;
}

.wp-theme-rexia .modal-header {
    border-left: 4px solid var(--rx-primary) !important;
}

.wp-theme-transformation .modal-header {
    border-left: 4px solid var(--tf-primary) !important;
}

.modal-title {
    font-weight: 700 !important;
    color: var(--wp-text-main) !important;
    font-size: 1.15rem !important;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--wp-border) !important;
    padding: 1.25rem 1.5rem !important;
    background-color: #fafafa !important;
}

/* --- Registro: Panel de Resumen de Dirección Sunat --- */
.wp-verified-panel {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--wp-radius-md);
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.wp-verified-badge {
    background-color: #dcfce7;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}



/* Estilos Premium para Dashboard Rexia */
.rexia-dashboard-card {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

    .rexia-dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

.rexia-badge-rank {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
}

.rexia-rank-1 {
    background-color: #ffd700;
    color: #5c4300;
}

.rexia-rank-2 {
    background-color: #c0c0c0;
    color: #404040;
}

.rexia-rank-3 {
    background-color: #cd7f32;
    color: #503010;
}

.rexia-rank-other {
    background-color: #e9ecef;
    color: #6c757d;
}

.rexia-status-badge {
    padding: 4px 10px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}

.rexia-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.rexia-pulse-red {
    background-color: #e02424;
    box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.7);
    animation: rexia-pulse-red-anim 1.5s infinite;
}

.rexia-pulse-yellow {
    background-color: #d97706;
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    animation: rexia-pulse-yellow-anim 1.5s infinite;
}

@keyframes rexia-pulse-red-anim {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(224, 36, 36, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(224, 36, 36, 0);
    }
}

@keyframes rexia-pulse-yellow-anim {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

/* Custom styles extracted from Dashboard.razor */
.filter-date-input {
    width: 160px;
}
.filter-select-moneda {
    width: 120px;
}
.th-width-100 {
    width: 100px;
}
.th-width-150 {
    width: 150px;
}
.th-width-50 {
    width: 50px;
}
.th-width-85 {
    width: 85px;
}
.th-width-120 {
    width: 120px;
}
.progress-bar-height-6 {
    height: 6px;
    background: #f1f5f9;
}
.max-width-160 {
    max-width: 160px;
}
.max-width-380 {
    max-width: 380px;
}
.gradient-dark-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.banner-button-style {
    border-radius: 8px;
    transition: background 0.2s;
}
.compras-chart-container {
    height: 350px;
    position: relative;
}
.dashboard-chart-container {
    height: 300px;
    position: relative;
}
.filter-select-anio {
    width: 100px;
}

.wp-context-switcher {
    min-width: 280px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--wp-radius-md);
    border: 1px solid var(--wp-border);
    background: #ffffff;
    box-shadow: var(--wp-shadow-sm);
    transition: all var(--wp-transition);
}

    .wp-context-switcher:hover {
        background: var(--wp-bg);
        border-color: var(--wp-border-hover);
    }

.wp-context-icon {
    font-size: 0.95rem;
    color: var(--rx-primary, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wp-context-name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--wp-text-main);
    max-width: 240px;
}

.wp-context-caret {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--wp-text-muted);
}

.wp-context-panel {
    min-width: 340px;
    border-radius: var(--wp-radius-md);
    border: 1px solid var(--wp-border);
    background: #ffffff;
}

.wp-context-item {
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    transition: background 0.2s ease;
}

    .wp-context-item:hover {
        background: var(--wp-bg);
    }

    .wp-context-item.active {
        background: var(--rx-primary-soft);
        color: var(--rx-primary);
        font-weight: 600;
    }

.wp-context-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp-text-main);
}

.wp-context-item-ruc {
    font-size: 0.75rem;
    color: var(--wp-text-muted);
}

.wp-context-badge-sm {
    font-size: 0.625rem;
}

/* ==========================================================================
   Componente: WorkplaceLogo
   ========================================================================== */
.wp-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Tamaño para el Header (compacto) */
.wp-logo-container.wp-logo-sm {
    height: 40px;
    max-width: 180px;
}

.wp-logo-container.wp-logo-sm .wp-logo-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Tamaño para páginas de autenticación (Login, Registro, etc.) */
.wp-logo-container.wp-logo-lg {
    height: 70px;
    max-width: 280px;
}

.wp-logo-container.wp-logo-lg .wp-logo-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Componente: AppHeader & Contexto de Organización
   ========================================================================== */
.app-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid var(--wp-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.wp-header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.wp-header-org-context {
    max-width: 280px;
    padding-right: 0.75rem;
    border-right: 1px solid var(--wp-border);
    line-height: 1.2;
}

.wp-header-org-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wp-text-main);
    max-width: 210px;
}

.wp-header-org-ruc {
    font-size: 0.7rem;
    color: var(--wp-text-muted);
    margin-top: 1px;
}

.wp-header-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.wp-header-user-menu {
    min-width: 220px;
    border-radius: 12px !important;
    border: 1px solid var(--wp-border) !important;
}

.wp-header-mobile-org-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wp-text-main);
}

.wp-header-mobile-org-ruc {
    font-size: 0.7rem;
    color: var(--wp-text-muted);
}

.app-header .btn-outline-secondary {
    border-color: var(--wp-border);
    color: var(--wp-text-muted);
    font-weight: 500;
}

.app-header .btn-outline-secondary:hover {
    background-color: var(--wp-bg);
    border-color: var(--wp-border-hover);
    color: var(--wp-text-main);
}

.badge-context-vinculado {
    background-color: #ffeeba !important;
    border: 1px solid #ffe8a1 !important;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 0.2em 0.45em;
    text-transform: uppercase;
    border-radius: 4px;
}

.badge-context-principal {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 0.2em 0.45em;
    text-transform: uppercase;
    border-radius: 4px;
}

/* ==========================================================================
   Sidebar Rexia: Selector de Empresa RUC, Comprobantes y Última Sincronización
   ========================================================================== */
.wp-sidebar-ruc-collapsed {
    text-align: center;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wp-border);
    position: relative;
}

.wp-ruc-secondary-dot {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f59e0b;
    border: 1.5px solid #ffffff;
}

.wp-sidebar-ruc-card {
    margin: 0.85rem 0.5rem 0 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid var(--wp-border);
    box-shadow: var(--wp-shadow-sm);
    transition: border-color var(--wp-transition), background-color var(--wp-transition);
}

.wp-sidebar-ruc-card.ruc-card-vinculado {
    background-color: #fffdf5;
    border-color: #fde68a;
}

.wp-sidebar-ruc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.wp-sidebar-ruc-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wp-text-muted);
}

.wp-sidebar-ruc-select {
    font-size: 0.78rem !important;
    padding: 0.38rem 1.75rem 0.38rem 0.6rem !important;
    font-weight: 600;
    color: var(--wp-text-main);
    border-radius: 8px !important;
}

.wp-sidebar-consumption-collapsed {
    text-align: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wp-border);
    position: relative;
}

.wp-consumption-alert-dot {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    border: 1.5px solid #ffffff;
}

.wp-sidebar-consumption-card {
    margin: 0.6rem 0.5rem 0 0.5rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid var(--wp-border);
    box-shadow: var(--wp-shadow-sm);
    font-size: 0.8125rem;
}

.wp-consumption-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: #e2e8f0;
    display: block;
    margin: 0.35rem 0;
}

.wp-consumption-progress::-webkit-progress-bar {
    background-color: #e2e8f0;
    border-radius: 999px;
}

.wp-consumption-progress::-webkit-progress-value {
    border-radius: 999px;
    transition: width 0.3s ease;
}

.wp-consumption-progress.progress-success::-webkit-progress-value {
    background-color: #10b981;
}

.wp-consumption-progress.progress-warning::-webkit-progress-value {
    background-color: #f59e0b;
}

.wp-consumption-progress.progress-danger::-webkit-progress-value {
    background-color: #ef4444;
}

.wp-consumption-progress.progress-success::-moz-progress-bar {
    background-color: #10b981;
}

.wp-consumption-progress.progress-warning::-moz-progress-bar {
    background-color: #f59e0b;
}

.wp-consumption-progress.progress-danger::-moz-progress-bar {
    background-color: #ef4444;
}

.wp-sidebar-consumption-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    color: var(--wp-text-muted);
    font-size: 0.6875rem;
}

.wp-sidebar-upgrade-btn {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Última Sincronización en Sidebar */
.wp-sidebar-sync-collapsed {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

.wp-sync-status-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}

.wp-sync-status-dot.dot-ok,
.wp-sync-indicator.dot-ok {
    background-color: #10b981;
}

.wp-sync-status-dot.dot-error,
.wp-sync-indicator.dot-error {
    background-color: #ef4444;
}

.wp-sync-btn-error {
    color: #ef4444;
}

.wp-sidebar-sync-card {
    margin: 0.5rem 0.5rem 0 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background-color: #f8fafc;
    border: 1px solid var(--wp-border);
    font-size: 0.75rem;
    transition: border-color var(--wp-transition), background-color var(--wp-transition);
}

.wp-sidebar-sync-card.sync-card-error {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.wp-sidebar-sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.wp-sidebar-sync-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--wp-text-muted);
    font-size: 0.72rem;
}

.wp-sidebar-sync-refresh {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wp-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all var(--wp-transition);
    padding: 0;
}

.wp-sidebar-sync-refresh:hover {
    background-color: #ffffff;
    border-color: var(--wp-border);
    color: var(--rx-primary, #4f46e5);
}

.wp-sidebar-sync-body {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wp-sync-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.wp-sidebar-sync-timestamp {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wp-text-main);
    font-family: monospace;
}

.wp-sidebar-sync-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.73rem;
    margin-bottom: 0.15rem;
}

.wp-sidebar-sync-time {
    font-size: 0.7rem;
    color: var(--wp-text-muted);
}

.wp-mobile-launcher-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--wp-border);
    background-color: #ffffff;
    color: var(--wp-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--wp-transition);
}

.wp-mobile-launcher-btn:hover {
    background-color: var(--wp-bg);
    color: var(--rx-primary, #4f46e5);
}

/* =========================================================
   Tema Facturacion
   ========================================================= */
:root {
    /* Facturacion (Cyan) */
    --fe-primary: #0891b2;
    --fe-primary-hover: #0e7490;
    --fe-primary-soft: rgba(8, 145, 178, 0.07);
    --fe-primary-border: rgba(8, 145, 178, 0.16);
    --fe-gradient: linear-gradient(135deg, #0891b2 0%, #155e75 100%);
}

.wp-theme-facturacion .wp-brand-icon {
    background: var(--fe-gradient);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}
.wp-theme-facturacion .wp-icon-btn.active {
    background: var(--fe-primary-soft);
    border-color: var(--fe-primary-border);
    color: var(--fe-primary);
}
.wp-theme-facturacion .wp-nav-item-single.active {
    background: var(--fe-primary-soft);
    border-color: var(--fe-primary-border);
    color: var(--fe-primary);
    font-weight: 600;
}
.wp-theme-facturacion .wp-nav-item.active {
    color: var(--fe-primary);
    border-left-color: var(--fe-primary);
    background: var(--fe-primary-soft);
    font-weight: 600;
}
.wp-theme-facturacion .card.card-hover:hover {
    border-color: var(--fe-primary-border) !important;
}
.wp-theme-facturacion .btn-primary {
    background-color: var(--fe-primary) !important;
    border-color: var(--fe-primary) !important;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.18) !important;
}
.wp-theme-facturacion .btn-primary:hover {
    background-color: var(--fe-primary-hover) !important;
    border-color: var(--fe-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(8, 145, 178, 0.28) !important;
}
.wp-theme-facturacion .form-control:focus, 
.wp-theme-facturacion .form-select:focus {
    border-color: var(--fe-primary) !important;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12) !important;
}
.wp-theme-facturacion .modal-header {
    border-left: 4px solid var(--fe-primary) !important;
}
.app-grid-card.app-facturacion:hover {
    border-color: rgba(8, 145, 178, 0.3) !important;
}
.app-facturacion .app-card-icon-container {
    background: var(--fe-gradient);
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.25);
}

/* =========================================================
   SCROLLBARS VISIBLES Y AJUSTE DE ESTRUCTURA MÓVIL
   ========================================================= */

/* Habilitar desbordamiento horizontal globalmente para layouts en móvil */
@media (max-width: 767.98px) {
    .wp-layout, body, html {
        overflow-x: hidden;
    }
    .wp-main {
        overflow-x: hidden;
        width: 100vw; 
    }
    .wp-content-container {
        overflow-x: hidden;
    }
}

/* =========================================================
   OFF-CANVAS MOBILE DRAWER & LAYOUT FIXES
   ========================================================= */

/* Solo para móviles */
@media (max-width: 767.98px) {
    /* El layout debe ser bloque o columna, y no desbordar */
    .wp-layout {
        display: block;
        width: 100vw;
        overflow-x: hidden;
    }
    
    .wp-main {
        padding: 1rem;
        width: 100vw;
        overflow-x: hidden;
    }

    .wp-content-container {
        overflow-x: hidden;
    }

    /* Mobile Header */
    .wp-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        background: #ffffff;
        border-bottom: 1px solid var(--wp-border);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 1010;
        width: 100%;
    }

    .wp-mobile-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .wp-sidebar-toggle-mobile {
        background: transparent;
        border: 1px solid var(--wp-border);
        border-radius: 8px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: var(--wp-text-main);
    }

    /* Ocultar el Sidebar por defecto en móvil y hacerlo flotante */
    .wp-sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Oculto a la izquierda */
        width: 280px !important;
        height: 100vh;
        z-index: 1030;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    }

    .wp-sidebar-mobile-open {
        left: 0; /* Aparece */
    }

    /* Backdrop oscuro cuando el menú está abierto */
    .wp-sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(15, 23, 42, 0.5);
        z-index: 1025;
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .wp-sidebar-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ocultar el AppHeader global en CheckInnova, Transformation, Rexia y Validoc móvil ya que usamos el Drawer lateral para Perfil/Cerrar Sesión */
    .wp-theme-checkinnova .app-header,
    .wp-theme-transformation .app-header,
    .wp-theme-rexia .app-header,
    .wp-theme-validoc .app-header {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .wp-main {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .wp-content-container {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .card {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =========================================================
   TABLAS Y BOTONES DE ACCIÓN (DISEÑO REFINADO / ENTERPRISE)
   Inspirado en Enterprise Precision (Revisar/DESIGN.md)
   ========================================================= */

/* Contenedor y alineación de acciones en filas de tablas */
.table td .btn-group,
.table td .btn-group-sm,
.table td .acciones,
.wp-table-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
}

/* Botones de acción compactos de alta calidad (32x32px) */
.table td .btn-group > .btn,
.table td .btn-group-sm > .btn,
.table td .btn.btn-sm,
.wp-table-actions .btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0 !important;
}

/* Tamaño proporcionado y nítido de iconos de acción */
.table td .btn-group > .btn i,
.table td .btn-group-sm > .btn i,
.table td .btn.btn-sm i,
.wp-table-actions .btn i {
    font-size: 0.82rem !important; /* ~13px */
    line-height: 1 !important;
    display: inline-block !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

/* Interacciones semánticas sutiles */
/* 1. Botón Editar (Gris neutro -> Azul sutil) */
.table td .btn-outline-secondary,
.wp-table-actions .btn-outline-secondary {
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    background-color: #ffffff !important;
}
.table td .btn-outline-secondary:hover,
.wp-table-actions .btn-outline-secondary:hover {
    color: #1d4ed8 !important;
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    transform: translateY(-1px);
}

/* 2. Botón Inhabilitar / Bloquear (Ámbar) */
.table td .btn-outline-warning,
.wp-table-actions .btn-outline-warning {
    color: #d97706 !important;
    border-color: #fde68a !important;
    background-color: #fffbeb !important;
}
.table td .btn-outline-warning:hover,
.wp-table-actions .btn-outline-warning:hover {
    color: #b45309 !important;
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    transform: translateY(-1px);
}

/* 3. Botón Habilitar / Activar (Verde esmeralda) */
.table td .btn-outline-success, .table td .btn-success,
.wp-table-actions .btn-outline-success {
    color: #059669 !important;
    border-color: #a7f3d0 !important;
    background-color: #ecfdf5 !important;
}
.table td .btn-outline-success:hover, .table td .btn-success:hover,
.wp-table-actions .btn-outline-success:hover {
    color: #047857 !important;
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    transform: translateY(-1px);
}

/* 4. Botón Eliminar / Destructivo (Rojo) */
.table td .btn-outline-danger, .table td .btn-outline-info,
.wp-table-actions .btn-outline-danger {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
}
.table td .btn-outline-danger:hover, .table td .btn-outline-info:hover,
.wp-table-actions .btn-outline-danger:hover {
    color: #b91c1c !important;
    background-color: #fee2e2 !important;
    border-color: #f87171 !important;
    transform: translateY(-1px);
}

/* 5. Botón Restablecer credenciales / Llave (Azul/Índigo) */
.table td .btn-outline-primary,
.wp-table-actions .btn-outline-primary {
    color: #2563eb !important;
    border-color: #dbeafe !important;
    background-color: #eff6ff !important;
}
.table td .btn-outline-primary:hover,
.wp-table-actions .btn-outline-primary:hover {
    color: #1e40af !important;
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    transform: translateY(-1px);
}

/* Badges y chips de estado / rol dentro de tablas */
.wp-badge-access {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.73rem;
    font-weight: 600;
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}

.wp-badge-no-access {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 500;
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.wp-badge-status-active {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.73rem;
    font-weight: 600;
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.wp-badge-status-active .wp-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
}

.wp-badge-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.73rem;
    font-weight: 500;
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.wp-badge-status-inactive .wp-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #94a3b8;
}

/* Avatar circular de colaborador con iniciales */
.wp-avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    background-color: #e0e7ff;
    color: #4338ca;
    border: 1px solid rgba(199, 210, 254, 0.7);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   MÓDULO DE CONFIGURACIÓN Y GESTIÓN EMPRESARIAL
   Estilos centralizados para páginas de Configuración, Empresa, Sedes y Componentes
   ========================================================= */

/* Migas de pan / Breadcrumb */
.wp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--wp-text-muted);
    margin-bottom: 0.35rem;
}
.wp-breadcrumb a {
    color: var(--wp-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.wp-breadcrumb a:hover {
    color: var(--ci-primary);
}
.wp-breadcrumb .separator {
    color: var(--wp-text-light);
    font-size: 0.65rem;
}

/* Badges de estado de empresa (Header) */
.wp-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.wp-status-chip-active {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.wp-status-chip-secondary {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.wp-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: wpPulse 2s infinite;
}
@keyframes wpPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Tarjeta de Configuración con Cabecera Estilizada */
.wp-config-card {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(15, 23, 42, 0.02);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.wp-config-card-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--wp-border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.wp-config-card-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wp-config-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.wp-config-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin: 0;
    line-height: 1.2;
}
.wp-config-card-subtitle {
    font-size: 0.75rem;
    color: var(--wp-text-muted);
    margin: 0;
}

/* Cajas de Información Resaltada (RUC, etc.) */
.wp-info-highlight-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wp-info-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp-text-muted);
    margin-bottom: 0.25rem;
}
.wp-info-value-ruc {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp-text-main);
    letter-spacing: -0.01em;
}
.wp-copy-btn {
    border: none;
    background: transparent;
    color: var(--wp-text-light);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}
.wp-copy-btn:hover {
    color: var(--ci-primary);
    background: rgba(37, 99, 235, 0.08);
}
.wp-info-value-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wp-text-main);
    line-height: 1.3;
}
.wp-info-value-address {
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.wp-location-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.wp-location-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
}
.wp-location-divider {
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* Componente Uploader de Logotipo Centralizado */
.wp-logo-card-container {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 250px;
    transition: border-color 0.2s ease;
}
.wp-logo-card-container:hover {
    border-color: #94a3b8;
}
.wp-logo-preview-box {
    position: relative;
    width: 140px;
    height: 110px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.wp-logo-preview-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.wp-logo-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
}
.wp-logo-hint {
    font-size: 0.72rem;
    color: var(--wp-text-light);
    margin-top: 0.4rem;
    line-height: 1.2;
}

/* Toolbar de Sedes / Sucursales */
.wp-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.wp-search-group {
    position: relative;
    min-width: 230px;
}
.wp-search-group i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}
.wp-search-group input {
    padding-left: 2.1rem !important;
    padding-right: 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    height: 34px;
}
.wp-search-group input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}
.wp-select-sm {
    height: 34px;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    border-color: #cbd5e1 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Tabla Estilizada de Sedes */
.wp-sede-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2563eb;
    display: inline-block;
}
.wp-badge-principal {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 0.2rem;
}
.wp-btn-action-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-decoration: none;
}
.wp-btn-action-edit:hover {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

/* Badges de Estado */
.wp-badge-status-activo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 0.75rem;
    font-weight: 600;
}
.wp-badge-status-activo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
}
.wp-badge-status-pendiente {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    font-size: 0.75rem;
    font-weight: 600;
}
.wp-badge-status-pendiente::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #f59e0b;
}
.wp-badge-status-inactivo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
}
.wp-badge-status-inactivo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #94a3b8;
}

/* Pie de tarjeta con paginación integrada */
.wp-card-footer-pagination {
    background: #f8fafc;
    border-top: 1px solid var(--wp-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--wp-text-muted);
}

/* =========================================================
   CENTRO DE ADMINISTRACIÓN / CONFIGURACIÓN HUB
   ========================================================= */

/* Badge de Organización Verificada */
.wp-org-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    font-size: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-org-badge:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}
.wp-org-badge-icon {
    color: #2563eb;
    font-size: 0.95rem;
}
.wp-org-badge-name {
    font-weight: 600;
    color: #1e293b;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wp-org-badge-ruc {
    background: #eff6ff;
    color: #1d4ed8;
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    border: 1px solid #dbeafe;
}

/* Buscador de opciones en cabecera */
.wp-hub-search-container {
    position: relative;
    width: 100%;
    max-width: 380px;
}
.wp-hub-search-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}
.wp-hub-search-input {
    width: 100%;
    padding: 0.6rem 4.5rem 0.6rem 2.4rem;
    font-size: 0.82rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}
.wp-hub-search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.wp-hub-search-input::placeholder {
    color: #94a3b8;
}
.wp-hub-search-kbds {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    pointer-events: none;
}
.wp-hub-search-kbd {
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    font-family: monospace;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

/* Tarjetas de Métricas / Snapshot */
.wp-hub-metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wp-hub-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
.wp-hub-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.wp-hub-metric-icon-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}
.wp-hub-metric-icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
}
.wp-hub-metric-icon-emerald {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.25);
}
.wp-hub-metric-icon-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.25);
}
.wp-hub-metric-content {
    min-width: 0;
}
.wp-hub-metric-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}
.wp-hub-metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.wp-hub-metric-value-emerald {
    color: #047857;
}

/* Tarjetas Principales del Hub */
.wp-hub-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wp-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.wp-hub-theme-blue {
    border-color: rgba(37, 99, 235, 0.18);
}
.wp-hub-theme-blue:hover {
    border-color: rgba(37, 99, 235, 0.45);
}
.wp-hub-theme-purple {
    border-color: rgba(124, 58, 237, 0.18);
}
.wp-hub-theme-purple:hover {
    border-color: rgba(124, 58, 237, 0.45);
}
.wp-hub-theme-emerald {
    border-color: rgba(5, 150, 105, 0.18);
}
.wp-hub-theme-emerald:hover {
    border-color: rgba(5, 150, 105, 0.45);
}
.wp-hub-theme-amber {
    border-color: rgba(217, 119, 6, 0.18);
}
.wp-hub-theme-amber:hover {
    border-color: rgba(217, 119, 6, 0.45);
}
.wp-hub-theme-slate {
    border-color: #cbd5e1;
}
.wp-hub-theme-slate:hover {
    border-color: #64748b;
}
.wp-hub-theme-teal {
    border-color: rgba(13, 148, 136, 0.22);
}
.wp-hub-theme-teal:hover {
    border-color: rgba(13, 148, 136, 0.48);
}
.wp-hub-theme-neutral {
    border-color: #e2e8f0;
}
.wp-hub-theme-neutral:hover {
    border-color: #94a3b8;
}

/* Cabecera de la Tarjeta */
.wp-hub-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.wp-hub-card-header-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.wp-hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.wp-hub-card:hover .wp-hub-card-icon {
    transform: scale(1.06);
}
.wp-hub-icon-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.wp-hub-icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.wp-hub-icon-emerald {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.wp-hub-icon-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}
.wp-hub-icon-slate {
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25);
}
.wp-hub-icon-teal {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}
.wp-hub-icon-indigo {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.wp-hub-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin: 0;
    transition: color 0.15s ease;
}
.wp-hub-theme-blue:hover .wp-hub-card-title {
    color: #2563eb;
}
.wp-hub-theme-purple:hover .wp-hub-card-title {
    color: #7c3aed;
}
.wp-hub-theme-emerald:hover .wp-hub-card-title {
    color: #059669;
}
.wp-hub-theme-amber:hover .wp-hub-card-title {
    color: #d97706;
}
.wp-hub-theme-slate:hover .wp-hub-card-title,
.wp-hub-theme-neutral:hover .wp-hub-card-title {
    color: #1d4ed8;
}
.wp-hub-theme-teal:hover .wp-hub-card-title {
    color: #0d9488;
}
.wp-hub-card-subtitle {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 0.15rem;
}

/* Badges Tags de Categoría */
.wp-hub-tag {
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.wp-hub-tag-blue {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.wp-hub-tag-purple {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.wp-hub-tag-emerald {
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.wp-hub-tag-amber {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}
.wp-hub-tag-slate {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.wp-hub-tag-teal {
    background: #ccfbf1;
    color: #0f766e;
    border: 1px solid #99f6e4;
}
.wp-hub-tag-neutral {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Descripción del Módulo */
.wp-hub-card-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* Snapshot Pills */
.wp-hub-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
}
.wp-hub-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}
.wp-hub-pill-blue {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
}
.wp-hub-pill-purple {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ede9fe;
}
.wp-hub-pill-emerald {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-weight: 600;
}
.wp-hub-pill-amber {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.wp-hub-pill-excel {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}
.wp-hub-pill-slate {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.wp-hub-pill-teal {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #ccfbf1;
}
.wp-hub-pill-neutral {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.wp-hub-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
}

/* Footer y Acciones de la Tarjeta */
.wp-hub-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}
.wp-hub-link {
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.2s ease, color 0.15s ease;
}
.wp-hub-link:hover {
    gap: 0.55rem;
}
.wp-hub-link-blue {
    color: #2563eb;
}
.wp-hub-link-blue:hover {
    color: #1d4ed8;
}
.wp-hub-link-purple {
    color: #7c3aed;
}
.wp-hub-link-purple:hover {
    color: #5b21b6;
}
.wp-hub-link-emerald {
    color: #059669;
}
.wp-hub-link-emerald:hover {
    color: #047857;
}
.wp-hub-link-amber {
    color: #d97706;
}
.wp-hub-link-amber:hover {
    color: #b45309;
}

.wp-hub-btn-manage {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
}
.wp-hub-btn-manage:hover {
    color: #ffffff;
    transform: translateY(-1px);
}
.wp-hub-btn-blue {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}
.wp-hub-btn-blue:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.38);
}
.wp-hub-btn-purple {
    background: #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}
.wp-hub-btn-purple:hover {
    background: #6d28d9;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.38);
}
.wp-hub-btn-emerald {
    background: #059669;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
}
.wp-hub-btn-emerald:hover {
    background: #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.38);
}
.wp-hub-btn-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.28);
}
.wp-hub-btn-amber:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.38);
}
.wp-hub-actions-twin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.wp-hub-btn-primary {
    background: #1d4ed8;
    color: #ffffff !important;
    border: 1px solid #1d4ed8;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.22);
}
.wp-hub-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.wp-hub-btn-secondary {
    background: #f8fafc;
    color: #334155 !important;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.wp-hub-btn-secondary:hover {
    background: #f1f5f9;
    color: #0f172a !important;
    border-color: #94a3b8;
}
.wp-hub-btn-excel {
    background: #166534;
    color: #ffffff !important;
    border: 1px solid #166534;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.25);
}
.wp-hub-btn-excel:hover {
    background: #14532d;
    border-color: #14532d;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.35);
}

/* Fila Inferior: Banner de Ayuda y Seguridad */
.wp-hub-banner {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wp-hub-banner-glow-blue {
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(37, 99, 235, 0.07);
    border-radius: 9999px;
    filter: blur(28px);
    pointer-events: none;
}
.wp-hub-banner-glow-emerald {
    position: absolute;
    right: -2rem;
    top: -2rem;
    width: 8rem;
    height: 8rem;
    background: rgba(16, 185, 129, 0.07);
    border-radius: 9999px;
    filter: blur(24px);
    pointer-events: none;
}
.wp-hub-banner-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.wp-hub-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.wp-hub-banner-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}
.wp-hub-banner-desc {
    font-size: 0.82rem;
    color: #475569;
    margin: 0.25rem 0 0 0;
    line-height: 1.45;
}

/* Enlaces rápidos del banner de ayuda */
.wp-hub-quick-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.wp-hub-quick-item:hover {
    transform: translateY(-2px);
}
.wp-hub-quick-blue {
    background: #eff6ff;
    border-color: #dbeafe;
}
.wp-hub-quick-blue:hover {
    background: #dbeafe;
    border-color: #bfdbfe;
}
.wp-hub-quick-purple {
    background: #f5f3ff;
    border-color: #ede9fe;
}
.wp-hub-quick-purple:hover {
    background: #ede9fe;
    border-color: #ddd6fe;
}
.wp-hub-quick-emerald {
    background: #ecfdf5;
    border-color: #d1fae5;
}
.wp-hub-quick-emerald:hover {
    background: #d1fae5;
    border-color: #a7f3d0;
}
.wp-hub-quick-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.wp-hub-quick-icon {
    font-size: 1.05rem;
}
.wp-hub-quick-arrow {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}
.wp-hub-quick-item:hover .wp-hub-quick-arrow {
    transform: translate(2px, -2px);
    color: #334155;
}
.wp-hub-quick-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
}
.wp-hub-quick-desc {
    font-size: 0.72rem;
    color: #64748b;
}

/* Filas de seguridad */
.wp-hub-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    transition: background 0.15s ease;
}
.wp-hub-security-row:hover {
    background: #f1f5f9;
}
.wp-hub-security-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #334155;
}
.wp-hub-security-badge-active {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.wp-hub-security-tag-info {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: #e2e8f0;
    color: #0f172a;
}
.wp-hub-security-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: auto;
}
.wp-hub-security-ip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: monospace;
}

/* =========================================================
   CONFIGURACIÓN DE PERSONAL - ENTERPRISE PRECISION
   ========================================================= */

/* Header & Meta */
.wp-personal-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .wp-personal-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-personal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 0.15rem;
    line-height: 1.25;
}

.wp-personal-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0;
}

.wp-personal-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wp-personal-org-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wp-personal-org-name {
    font-weight: 600;
    color: #334155;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-personal-org-divider {
    color: #cbd5e1;
    font-weight: 400;
}

.wp-personal-org-ruc {
    font-family: monospace;
    font-size: 0.72rem;
    color: #64748b;
}

.wp-personal-count-chip {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Métricas del Personal */
.wp-personal-metrics-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .wp-personal-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .wp-personal-metrics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wp-personal-metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wp-personal-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}

.wp-personal-metric-info {
    min-width: 0;
}

.wp-personal-metric-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.wp-personal-metric-number {
    font-size: 1.65rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wp-personal-metric-subtext {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wp-personal-metric-subtext-success {
    color: #059669;
    font-weight: 500;
}

.wp-personal-metric-subtext-primary {
    color: #1d4ed8;
    font-weight: 500;
}

.wp-personal-metric-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.wp-personal-metric-icon-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.wp-personal-metric-icon-emerald {
    background: #ecfdf5;
    color: #059669;
}

.wp-personal-metric-icon-indigo {
    background: #eef2ff;
    color: #4f46e5;
}

.wp-personal-metric-icon-amber {
    background: #fffbeb;
    color: #d97706;
}

/* Tabs Estandarizadas de Alta Precisión */
.wp-personal-tabs-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.wp-personal-tabs-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1rem;
}

.wp-personal-nav-tabs {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.wp-personal-nav-tabs::-webkit-scrollbar {
    display: none;
}

.wp-personal-tab-item {
    margin-bottom: -1px;
}

.wp-personal-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
}

.wp-personal-tab-btn:hover {
    color: #0f172a;
    border-bottom-color: #cbd5e1;
}

.wp-personal-tab-btn.active,
.wp-personal-tab-btn[aria-selected="true"] {
    color: #1d4ed8;
    font-weight: 600;
    border-bottom-color: #1d4ed8;
    background: transparent;
}

.wp-personal-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.18s ease;
}

.wp-personal-tab-btn.active .wp-personal-tab-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.wp-personal-tab-body {
    padding: 1.25rem 1.5rem 1.75rem 1.5rem;
    background: #ffffff;
}

.wp-personal-tab-body .wp-content-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-personal-tab-body .card {
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

/* =========================================================
   MODAL WIZARD: REGISTRO DE COLABORADOR Y GESTIÓN DE ACCESOS
   ========================================================= */

.wp-modal-wizard-dialog {
    max-width: 860px;
    margin: 1.75rem auto;
}

.wp-modal-form-dialog {
    max-width: 520px;
    margin: 1.75rem auto;
}

.wp-modal-wizard-content {
    border-radius: var(--wp-radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--wp-border) !important;
    box-shadow: var(--wp-shadow-lg) !important;
    background-color: #ffffff !important;
}

.wp-wizard-header {
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid var(--wp-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.wp-wizard-title-group {
    display: flex;
    flex-direction: column;
}

.wp-wizard-title-badge-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.wp-wizard-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp-text-main);
    line-height: 1.25;
    margin: 0;
}

.wp-wizard-step-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background-color: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.wp-wizard-subtitle {
    font-size: 0.8rem;
    color: var(--wp-text-muted);
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* Stepper Bar */
.wp-wizard-stepper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--wp-border);
}

.wp-wizard-step-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--wp-border);
    background: #ffffff;
    text-align: left;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.wp-wizard-step-btn:hover:not(.disabled) {
    border-color: var(--wp-border-hover);
    background: #ffffff;
}

.wp-wizard-step-btn.active {
    border-color: #bfdbfe;
    background-color: #eff6ff;
}

.wp-wizard-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wp-wizard-step-badge-default {
    background: #f1f5f9;
    color: var(--wp-text-muted);
}

.wp-wizard-step-badge-active {
    background: var(--ci-primary);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}

.wp-wizard-step-badge-done {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.wp-wizard-step-text {
    min-width: 0;
    flex: 1;
}

.wp-wizard-step-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-wizard-step-btn.active .wp-wizard-step-title {
    color: #1d4ed8;
}

.wp-wizard-step-desc {
    display: block;
    font-size: 0.72rem;
    color: var(--wp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Modal Body */
.wp-wizard-body {
    max-height: calc(85vh - 180px);
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    background-color: #ffffff;
}

.wp-wizard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wp-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.wp-wizard-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wp-text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-wizard-section-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid #dbeafe;
}

.wp-wizard-required-legend {
    font-size: 0.72rem;
    color: #e11d48;
    font-weight: 500;
}

/* Step 2: Employee Summary Banner */
.wp-colab-summary {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wp-colab-summary-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wp-colab-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ci-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.wp-colab-info {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

.wp-colab-name {
    font-weight: 700;
    color: var(--wp-text-main);
}

.wp-colab-divider {
    color: #cbd5e1;
    font-weight: 600;
}

.wp-colab-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    color: var(--wp-text-main);
}

.wp-colab-email {
    color: #2563eb;
    font-weight: 500;
    font-size: 0.78rem;
}

/* Master Access Switch Card */
.wp-access-switch-box {
    padding: 0.9rem 1.15rem;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.wp-access-switch-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.wp-access-switch-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.wp-access-switch-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--wp-text-main);
    margin-bottom: 0.15rem;
}

.wp-access-switch-desc {
    font-size: 0.75rem;
    color: #475569;
    margin: 0;
}

/* Toggle Switch Element */
.wp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}

.wp-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.wp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .22s ease;
    border-radius: 24px;
}

.wp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: .22s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wp-toggle-switch input:checked + .wp-toggle-slider {
    background-color: #2563eb;
}

.wp-toggle-switch input:checked + .wp-toggle-slider:before {
    transform: translateX(20px);
}

/* Access Content Container & Dimmed State */
.wp-access-content-grid {
    transition: opacity 0.2s ease;
}

.wp-access-content-grid.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* Role Selection Cards */
.wp-role-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--wp-border);
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 0.5rem;
    user-select: none;
}

.wp-role-card:hover {
    border-color: var(--wp-border-hover);
    background: #f8fafc;
}

.wp-role-card.selected {
    border-color: #93c5fd;
    background: #eff6ff;
}

.wp-role-card-check {
    margin-top: 0.2rem;
    cursor: pointer;
}

.wp-role-card-body {
    flex: 1;
    min-width: 0;
}

.wp-role-card-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--wp-text-main);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}

.wp-role-card-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #dbeafe;
    color: #1d4ed8;
    text-transform: uppercase;
}

.wp-role-card-desc {
    font-size: 0.72rem;
    color: var(--wp-text-muted);
    margin: 0;
    line-height: 1.35;
}

/* Subscribed Applications Grid & Cards */
.wp-app-container {
    padding: 0.85rem;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    margin-top: 1rem;
}

.wp-app-container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.wp-app-container-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.wp-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.wp-app-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #fed7aa;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.wp-app-card:hover {
    border-color: #f97316;
}

.wp-app-card.selected {
    border-color: #f59e0b;
    background: #fffdf5;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15);
}

.wp-app-card-check {
    margin-top: 0.15rem;
    cursor: pointer;
}

.wp-app-card-body {
    flex: 1;
    min-width: 0;
}

.wp-app-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wp-text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.1rem;
}

.wp-app-badge {
    font-size: 0.62rem;
    font-weight: 700;
    background: #ecfdf5;
    color: #047857;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
}

.wp-app-desc {
    font-size: 0.68rem;
    color: #78350f;
    margin: 0;
    line-height: 1.25;
}

/* Right Column Matrix / Permission Guide */
.wp-role-matrix-card {
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    border-radius: 12px;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wp-matrix-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wp-border);
    margin-bottom: 0.75rem;
}

.wp-matrix-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #dbeafe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.wp-matrix-header-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wp-text-main);
    margin: 0;
}

.wp-matrix-header-subtitle {
    font-size: 0.68rem;
    color: var(--wp-text-muted);
    margin: 0;
}

.wp-matrix-items {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wp-matrix-item {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--wp-border);
}

.wp-matrix-item-title {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--wp-text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}

.wp-matrix-item-desc {
    font-size: 0.7rem;
    color: var(--wp-text-muted);
    margin: 0;
    line-height: 1.35;
}

.wp-matrix-note {
    font-size: 0.72rem;
    color: var(--wp-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--wp-border);
}

/* Modal Footer Actions */
.wp-wizard-footer {
    padding: 0.85rem 1.5rem;
    background-color: #f8fafc;
    border-top: 1px solid var(--wp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wp-wizard-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================
   VISTA MIS SUSCRIPCIONES (ENTERPRISE PRECISION)
   ========================================================= */

/* Header y Breadcrumbs */
.wp-sub-page-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .wp-sub-page-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.wp-sub-page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.wp-sub-page-desc {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 42rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.wp-sub-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* KPI Summary Grid */
.wp-sub-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .wp-sub-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .wp-sub-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wp-sub-kpi-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-sub-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}

.wp-sub-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.wp-sub-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.wp-sub-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.wp-sub-kpi-card:hover .wp-sub-kpi-icon {
    transform: scale(1.05);
}

.wp-sub-kpi-icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.wp-sub-kpi-icon-amber {
    background: #fffbeb;
    color: #d97706;
}

.wp-sub-kpi-icon-emerald {
    background: #ecfdf5;
    color: #059669;
}

.wp-sub-kpi-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.wp-sub-kpi-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.wp-sub-kpi-value-sm {
    font-size: 1.2rem;
}

.wp-sub-kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.wp-sub-kpi-badge-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(167, 243, 208, 0.7);
}

.wp-sub-kpi-badge-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid rgba(253, 230, 138, 0.7);
}

.wp-sub-kpi-badge-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid rgba(191, 219, 254, 0.7);
}

.wp-sub-kpi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.wp-sub-kpi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 0.25rem;
}

.wp-sub-kpi-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.wp-sub-kpi-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.wp-sub-kpi-action-btn {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
}

/* Section Header */
.wp-sub-section-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .wp-sub-section-header {
        flex-direction: row;
        align-items: center;
    }
}

.wp-sub-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
    margin-bottom: 0.15rem;
}

.wp-sub-section-desc {
    font-size: 0.825rem;
    color: #64748b;
    margin-bottom: 0;
}

.wp-sub-count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

@media (min-width: 640px) {
    .wp-sub-count-badge {
        align-self: auto;
    }
}

/* Subscriptions Cards Grid */
.wp-sub-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .wp-sub-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Individual Subscription Card */
.wp-sub-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-sub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.wp-sub-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wp-sub-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.wp-sub-header-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.wp-sub-app-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wp-sub-card.app-rexia .wp-sub-app-icon,
.wp-sub-modal-header.app-rexia .wp-sub-app-icon,
.wp-sub-app-icon.app-rexia,
.wp-sub-modal-app-icon.app-rexia,
.app-rexia .wp-sub-app-icon,
.app-rexia .wp-sub-modal-app-icon {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.wp-sub-card.app-checkinnova .wp-sub-app-icon,
.wp-sub-modal-header.app-checkinnova .wp-sub-app-icon,
.wp-sub-app-icon.app-checkinnova,
.wp-sub-modal-app-icon.app-checkinnova,
.app-checkinnova .wp-sub-app-icon,
.app-checkinnova .wp-sub-modal-app-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #0284c7 50%, #06b6d4 100%);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}

.wp-sub-card.app-validoc .wp-sub-app-icon,
.wp-sub-modal-header.app-validoc .wp-sub-app-icon,
.wp-sub-app-icon.app-validoc,
.wp-sub-modal-app-icon.app-validoc,
.app-validoc .wp-sub-app-icon,
.app-validoc .wp-sub-modal-app-icon {
    background: linear-gradient(135deg, #10b981 0%, #0f766e 100%);
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

.wp-sub-card.app-transformation .wp-sub-app-icon,
.wp-sub-modal-header.app-transformation .wp-sub-app-icon,
.wp-sub-app-icon.app-transformation,
.wp-sub-modal-app-icon.app-transformation,
.app-transformation .wp-sub-app-icon,
.app-transformation .wp-sub-modal-app-icon {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25);
}

.wp-sub-card.app-reclamos .wp-sub-app-icon,
.wp-sub-modal-header.app-reclamos .wp-sub-app-icon,
.wp-sub-app-icon.app-reclamos,
.wp-sub-modal-app-icon.app-reclamos,
.app-reclamos .wp-sub-app-icon,
.app-reclamos .wp-sub-modal-app-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}

.wp-sub-title-wrap {
    min-width: 0;
}

.wp-sub-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wp-sub-app-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}

.wp-sub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.wp-sub-status-active {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(167, 243, 208, 0.7);
}

.wp-sub-status-inactive {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.wp-sub-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.wp-sub-meta-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.wp-sub-plan-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    padding: 0.15rem 0.55rem;
}

.wp-sub-cycle-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.15rem 0.55rem;
}

.wp-sub-id-badge {
    font-size: 0.72rem;
    font-family: monospace;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.15rem 0.55rem;
}

.wp-sub-open-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.wp-sub-open-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.wp-sub-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Inner Metrics Container */
.wp-sub-metrics-box {
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wp-sub-coverage-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(238, 242, 255, 0.7);
    border: 1px solid #e0e7ff;
}

.wp-sub-coverage-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.wp-sub-coverage-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #4f46e5;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.wp-sub-card.app-checkinnova .wp-sub-coverage-icon {
    background: #0284c7;
}

.wp-sub-card.app-validoc .wp-sub-coverage-icon {
    background: #0f766e;
}

.wp-sub-coverage-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e1b4b;
    display: block;
    line-height: 1.2;
}

.wp-sub-coverage-desc {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    display: block;
    margin-top: 0.1rem;
}

.wp-sub-coverage-pill {
    background: #ffffff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.wp-sub-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.wp-sub-date-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    display: block;
    margin-bottom: 0.2rem;
}

.wp-sub-date-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.wp-sub-date-cut {
    color: #4338ca;
}

.wp-sub-card.app-checkinnova .wp-sub-date-cut {
    color: #0284c7;
}

.wp-sub-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.wp-sub-price-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.wp-sub-price-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.wp-sub-price-period {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

/* Card Footer */
.wp-sub-card-footer {
    background: rgba(248, 250, 252, 0.7);
    border-top: 1px solid #f1f5f9;
    padding: 0.95rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wp-sub-colabs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.wp-sub-colabs-icon {
    font-size: 0.95rem;
    color: #4f46e5;
}

.wp-sub-card.app-checkinnova .wp-sub-colabs-icon {
    color: #0284c7;
}

.wp-sub-colabs-count {
    font-weight: 800;
    color: #0f172a;
}

.wp-sub-manage-btn {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    transition: all 0.2s ease;
}

.wp-sub-manage-btn:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Modal Cuentas Bancarias */
.wp-bank-modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.wp-bank-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    transition: border-color 0.2s ease;
}

.wp-bank-card:hover {
    border-color: #cbd5e1;
}

.wp-bank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.wp-bank-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-bank-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.wp-bank-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.825rem;
    gap: 0.5rem;
}

.wp-bank-data-label {
    color: #64748b;
    font-weight: 500;
}

.wp-bank-data-val-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wp-bank-data-val {
    font-family: monospace;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
}

.wp-bank-copy-btn {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.wp-bank-copy-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.wp-bank-copy-btn.copied {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.wp-sub-empty-state {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    padding: 3rem 1.5rem;
    text-align: center;
}

.wp-sub-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem auto;
}

/* =========================================================
   MODAL: DETALLE Y GESTIÓN DE SUSCRIPCIÓN (ENTERPRISE PRECISION)
   ========================================================= */

.wp-sub-modal-dialog {
    max-width: 1040px;
    width: 95%;
    margin: 1.5rem auto;
}

.wp-sub-modal-content {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    position: relative;
}

/* Ambient Glows */
.wp-sub-modal-glow {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

.wp-sub-modal-glow-top {
    top: -5rem;
    right: -5rem;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
}

.wp-sub-modal-glow-bottom {
    bottom: -5rem;
    left: -5rem;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.07) 0%, transparent 70%);
}

/* Modal Header */
.wp-sub-modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.35rem 1.75rem 1rem 1.75rem;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.wp-sub-modal-header-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.wp-sub-modal-app-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wp-sub-modal-title-wrap {
    min-width: 0;
}

.wp-sub-modal-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wp-sub-modal-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
}

.wp-sub-modal-id-pill {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: monospace;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.wp-sub-modal-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
    line-height: 1.45;
}

.wp-sub-modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.wp-sub-modal-close-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Modal Body */
.wp-sub-modal-body {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.75rem;
    background: #ffffff;
}

.wp-sub-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .wp-sub-modal-grid {
        grid-template-columns: 5fr 7fr;
    }
}

.wp-sub-modal-col-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.wp-sub-modal-col-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

/* Columna Izquierda: Tarjeta Overview */
.wp-sub-overview-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wp-sub-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.wp-sub-overview-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}

.wp-sub-overview-domain {
    font-size: 0.78rem;
    color: #64748b;
}

.wp-sub-verified-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.wp-sub-overview-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.wp-sub-overview-desc {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* Métricas en Columna Izquierda */
.wp-sub-overview-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.wp-sub-metric-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wp-sub-metric-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.wp-sub-metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.wp-sub-metric-sub {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Ciclo de Vida y Progreso */
.wp-sub-lifecycle-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wp-sub-lifecycle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.wp-sub-lifecycle-label {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.wp-sub-lifecycle-val {
    font-weight: 700;
    color: #0f172a;
}

.wp-sub-lifecycle-cut {
    color: #2563eb;
    font-weight: 700;
}

.wp-sub-lifecycle-progress-bg {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.wp-sub-lifecycle-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Progress Percentage classes without inline styles */
.wp-sub-progress-0   { width: 0%; }
.wp-sub-progress-5   { width: 5%; }
.wp-sub-progress-10  { width: 10%; }
.wp-sub-progress-15  { width: 15%; }
.wp-sub-progress-20  { width: 20%; }
.wp-sub-progress-25  { width: 25%; }
.wp-sub-progress-30  { width: 30%; }
.wp-sub-progress-35  { width: 35%; }
.wp-sub-progress-40  { width: 40%; }
.wp-sub-progress-45  { width: 45%; }
.wp-sub-progress-50  { width: 50%; }
.wp-sub-progress-55  { width: 55%; }
.wp-sub-progress-60  { width: 60%; }
.wp-sub-progress-65  { width: 65%; }
.wp-sub-progress-70  { width: 70%; }
.wp-sub-progress-75  { width: 75%; }
.wp-sub-progress-80  { width: 80%; }
.wp-sub-progress-85  { width: 85%; }
.wp-sub-progress-90  { width: 90%; }
.wp-sub-progress-95  { width: 95%; }
.wp-sub-progress-100 { width: 100%; }

.wp-sub-lifecycle-progress-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #64748b;
    padding-top: 0.15rem;
}

.wp-sub-lifecycle-remaining {
    font-weight: 700;
    color: #2563eb;
}

/* Botones de acción columna izquierda */
.wp-sub-launch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.wp-sub-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 38px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #fee2e2;
    background: #fff5f5;
    color: #dc2626;
    transition: all 0.15s ease;
}

.wp-sub-cancel-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.wp-sub-reactivate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 38px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    transition: all 0.15s ease;
}

.wp-sub-reactivate-btn:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #047857;
}

/* Columna Derecha: Renovaciones y Vencimientos */
.wp-sub-renewals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wp-sub-renewals-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.wp-sub-renewals-title-icon {
    font-size: 1.25rem;
    color: #2563eb;
}

.wp-sub-renewals-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

.wp-sub-renewals-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.wp-sub-renewal-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: all 0.15s ease;
}

.wp-sub-renewal-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.wp-sub-renewal-item-highlight {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.05);
}

.wp-sub-renewal-item-highlight:hover {
    background: #e0f2fe;
    border-color: #93c5fd;
}

.wp-sub-renewal-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wp-sub-renewal-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #64748b;
}

.wp-sub-renewal-icon-highlight {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.wp-sub-renewal-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wp-sub-renewal-date-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.wp-sub-renewal-date {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.wp-sub-renewal-sub {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.wp-sub-autorenew-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.wp-sub-autorenew-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wp-sub-autorenew-icon {
    font-size: 1.35rem;
    color: #2563eb;
    flex-shrink: 0;
}

.wp-sub-autorenew-title {
    font-size: 0.825rem;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.wp-sub-autorenew-sub {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
    margin-top: 0.1rem;
}

/* Modal Footer */
.wp-sub-modal-footer {
    position: relative;
    z-index: 1;
    padding: 1rem 1.75rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .wp-sub-modal-footer {
        flex-direction: row;
        align-items: center;
    }
}

.wp-sub-footer-bank {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.78rem;
    color: #64748b;
    max-width: 36rem;
}

.wp-sub-footer-bank-icon {
    font-size: 1.25rem;
    color: #2563eb;
    flex-shrink: 0;
}

.wp-sub-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    justify-content: flex-end;
}

@media (min-width: 640px) {
    .wp-sub-footer-actions {
        width: auto;
    }
}

.wp-sub-confirm-modal {
    z-index: 1065 !important;
}

.wp-sub-confirm-backdrop {
    z-index: 1060 !important;
}

/* =========================================================
   VISTA CREDENCIALES DE API (ENTERPRISE PRECISION)
   ========================================================= */

/* Ambient & Breadcrumbs */
.wp-api-breadcrumbs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.wp-api-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wp-api-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: wpApiPulse 2s infinite;
}

@keyframes wpApiPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Page Header Banner Card */
.wp-api-banner-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .wp-api-banner-card {
        flex-direction: row;
        align-items: center;
    }
}

.wp-api-banner-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 52rem;
}

.wp-api-banner-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border: 1px solid #dbeafe;
}

.wp-api-banner-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wp-api-banner-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.wp-api-banner-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
}

.wp-api-tag-oauth {
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.wp-api-banner-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

.wp-api-banner-desc code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    border: 1px solid #e2e8f0;
}

.wp-api-doc-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.wp-api-doc-link-btn:hover {
    background: #f1f5f9;
    color: #1d4ed8;
    border-color: #cbd5e1;
}

/* Form Container Card */
.wp-api-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    margin-bottom: 2rem;
}

.wp-api-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1.25rem;
}

.wp-api-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wp-api-card-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1d4ed8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.wp-api-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-api-card-subtitle {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0.15rem 0 0 0;
}

.wp-api-toggle-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-api-toggle-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Inputs & Form layout */
.wp-api-form-row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .wp-api-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wp-api-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wp-api-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
}

.wp-api-label-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
}

.wp-api-input {
    height: 40px;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.85rem;
    color: #0f172a;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.wp-api-input:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.wp-api-input::placeholder {
    color: #94a3b8;
}

/* Scopes Grid */
.wp-api-scopes-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.wp-api-scopes-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .wp-api-scopes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .wp-api-scopes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wp-api-scope-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.wp-api-scope-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.wp-api-scope-card.selected {
    background: #ffffff;
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.wp-api-scope-checkbox {
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: #1d4ed8;
    width: 16px;
    height: 16px;
}

.wp-api-scope-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.wp-api-scope-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.wp-api-scope-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    background: #1d4ed8;
}

.wp-api-scope-avatar-rexia {
    background: #6366f1;
}

.wp-api-scope-avatar-checkinnova {
    background: #0284c7;
}

.wp-api-scope-avatar-validoc {
    background: #0f766e;
}

.wp-api-scope-avatar-core {
    background: #334155;
}

.wp-api-scope-avatar-reclamos {
    background: #d97706;
}

.wp-api-scope-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.wp-api-scope-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
}

.wp-api-scope-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Security Notice Box */
.wp-api-notice-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.wp-api-notice-icon {
    color: #1d4ed8;
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.wp-api-notice-box code {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #0f172a;
    font-family: monospace;
}

/* Form Action Bar */
.wp-api-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.wp-api-btn-clear {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-api-btn-clear:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.wp-api-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.825rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.25);
}

.wp-api-btn-submit:hover:not(:disabled) {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.3);
}

.wp-api-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Active Credentials Table Section */
.wp-api-table-wrapper {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    margin-bottom: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wp-api-table-toolbar {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 768px) {
    .wp-api-table-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-api-table-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wp-api-table-toolbar-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.wp-api-table-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-api-table-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-api-table-badge {
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
}

.wp-api-table-subtitle {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0.15rem 0 0 0;
}

.wp-api-table-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.wp-api-search-wrapper {
    position: relative;
    width: 100%;
}

@media (min-width: 576px) {
    .wp-api-search-wrapper {
        width: 240px;
    }
}

.wp-api-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}

.wp-api-search-input {
    width: 100%;
    height: 36px;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.8rem;
    color: #0f172a;
    transition: all 0.2s ease;
}

.wp-api-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.wp-api-filter-tabs {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 8px;
}

.wp-api-filter-tab {
    background: transparent;
    border: none;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-api-filter-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Table styling */
.wp-api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #0f172a;
}

.wp-api-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.wp-api-table thead th:first-child {
    padding-left: 1.5rem;
}

.wp-api-table thead th:last-child {
    padding-right: 1.5rem;
}

.wp-api-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.wp-api-table tbody tr:hover {
    background-color: #f8fafc;
}

.wp-api-table tbody td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
}

.wp-api-table tbody td:first-child {
    padding-left: 1.5rem;
}

.wp-api-table tbody td:last-child {
    padding-right: 1.5rem;
}

.wp-api-app-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.wp-api-app-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.wp-api-scopes-pill-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.wp-api-scope-pill {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1e40af;
    background: #dbeafe;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
}

.wp-api-cid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-family: monospace;
    font-size: 0.78rem;
    color: #0f172a;
}

.wp-api-cid-copy-btn {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.wp-api-cid-copy-btn:hover {
    color: #1d4ed8;
}

.wp-api-secret-masked-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wp-api-secret-bullets {
    font-family: monospace;
    letter-spacing: 0.18em;
    color: #64748b;
    font-size: 0.85rem;
}

.wp-api-badge-cipher {
    font-size: 0.65rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.wp-api-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-api-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wp-api-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wp-api-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
}

.wp-api-user-sub {
    font-size: 0.7rem;
    color: #64748b;
}

.wp-api-date-row {
    display: flex;
    flex-direction: column;
}

.wp-api-date-val {
    font-size: 0.8rem;
    color: #0f172a;
    font-weight: 500;
}

.wp-api-date-sub {
    font-size: 0.7rem;
    color: #94a3b8;
}

.wp-api-status-active {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(167, 243, 208, 0.7);
}

.wp-api-status-revoked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid rgba(254, 202, 202, 0.7);
}

.wp-api-status-dot-green {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #059669;
}

.wp-api-status-dot-red {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dc2626;
}

.wp-api-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.wp-api-action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.wp-api-action-icon-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.wp-api-action-revoke-btn {
    color: #64748b;
}

.wp-api-action-revoke-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Table Footer / Audit bar */
.wp-api-table-footer {
    padding: 0.85rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: #64748b;
}

.wp-api-audit-tag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wp-api-audit-tag i {
    color: #10b981;
}

/* Showcase & Reference Card */
.wp-api-showcase-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .wp-api-showcase-card {
        flex-direction: row;
        align-items: center;
    }
}

.wp-api-showcase-left {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 44rem;
}

.wp-api-sdk-pills {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.wp-api-sdk-pill-main {
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
}

.wp-api-sdk-pill-sub {
    color: #64748b;
    font-size: 0.72rem;
}

.wp-api-showcase-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-api-showcase-desc {
    font-size: 0.825rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.wp-api-showcase-desc code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Modals */
.wp-api-secret-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wp-api-secret-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wp-api-secret-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.wp-api-secret-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.wp-api-secret-text-danger {
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #dc2626;
    word-break: break-all;
}

.wp-api-secret-text-dark {
    font-family: monospace;
    font-size: 0.85rem;
    color: #0f172a;
    word-break: break-all;
}

/* Code Preview Box in Docs Modal */
.wp-api-code-snippet {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    margin: 0;
}

/* Toast */
.wp-api-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    background: #0f172a;
    color: #ffffff;
    padding: 0.65rem 1.15rem;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    font-size: 0.825rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: wpApiFadeIn 0.25s ease;
}

@keyframes wpApiFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-api-toast i {
    color: #34d399;
}

/* =========================================================
   DETALLE DE PEDIDO (ENTERPRISE PRECISION)
   ========================================================= */

.wp-order-header-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.wp-order-header-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 768px) {
    .wp-order-header-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-order-title-group {
    display: flex;
    flex-direction: column;
}

.wp-order-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wp-order-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.25;
}

.wp-order-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.wp-order-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #1d4ed8;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.5rem 0.95rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    align-self: flex-start;
}

@media (min-width: 768px) {
    .wp-order-back-btn {
        align-self: center;
    }
}

.wp-order-back-btn:hover {
    background-color: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

/* Order Status Badges */
.wp-order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wp-order-status-pending {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid rgba(253, 230, 138, 0.85);
}

.wp-order-status-paid {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid rgba(167, 243, 208, 0.85);
}

.wp-order-status-cancelled {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid rgba(254, 202, 202, 0.85);
}

.wp-order-status-default {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.wp-order-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    animation: wpPulse 1.8s infinite;
}

@keyframes wpPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

/* Order Meta Specs Grid */
.wp-order-specs-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 1.25rem;
}

@media (min-width: 576px) {
    .wp-order-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .wp-order-specs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wp-order-spec-card {
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wp-order-spec-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.wp-order-spec-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-order-spec-value.is-code {
    color: #1d4ed8;
    font-family: monospace;
}

/* Standard Order Card */
.wp-order-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.wp-order-card-header {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid #f1f5f9;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wp-order-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.wp-order-card-body {
    padding: 1.35rem;
}

.wp-order-count-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
}

/* Products in Order */
.wp-order-product-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.wp-order-product-item:last-child {
    margin-bottom: 0;
}

.wp-order-product-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

@media (min-width: 576px) {
    .wp-order-product-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-order-product-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.wp-order-product-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.wp-order-product-icon i {
    color: #ffffff !important;
    display: inline-block;
}

.wp-order-product-icon.app-checkinnova {
    background: var(--ci-gradient) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.wp-order-product-icon.app-rexia {
    background: var(--rx-gradient) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.wp-order-product-icon.app-validoc {
    background: var(--vl-gradient) !important;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

.wp-order-product-icon.app-transformation {
    background: var(--tf-gradient) !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25);
}

.wp-order-product-icon.app-facturacion {
    background: var(--fe-gradient) !important;
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.25);
}

.wp-order-product-icon.app-reclamos {
    background: var(--rf-gradient) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}

.wp-order-product-icon.app-default {
    background: var(--ci-gradient) !important;
}

.wp-order-product-info {
    min-width: 0;
}

.wp-order-product-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.wp-order-product-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-order-product-plan-pill {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.wp-order-product-desc {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.wp-order-product-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    color: #64748b;
    flex-wrap: wrap;
}

.wp-order-product-price-box {
    text-align: left;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

@media (min-width: 576px) {
    .wp-order-product-price-box {
        text-align: right;
        padding-top: 0;
        border-top: none;
        flex-shrink: 0;
    }
}

.wp-order-product-price-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    display: block;
    margin-bottom: 0.15rem;
}

.wp-order-product-price-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Payment Instructions Card */
.wp-order-instructions-card {
    background-color: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.wp-order-instructions-header {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    color: #ffffff;
    padding: 1rem 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wp-order-instructions-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-order-instructions-badge {
    font-size: 0.7rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    color: #ffffff;
}

.wp-order-instructions-body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.wp-order-step-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.wp-order-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.wp-order-step-content {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.55;
    flex: 1;
}

.wp-order-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.wp-order-email-addr {
    font-family: monospace;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.85rem;
}

.wp-order-email-copy-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1d4ed8;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}

.wp-order-email-copy-btn:hover {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.wp-order-email-copy-btn.copied {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.wp-order-email-subject-tag {
    font-size: 0.75rem;
    color: #64748b;
}

.wp-order-guarantee-box {
    border-radius: 10px;
    background-color: rgba(236, 253, 245, 0.8);
    border: 1px solid rgba(167, 243, 208, 0.8);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #064e3b;
    line-height: 1.45;
}

.wp-order-guarantee-icon {
    font-size: 1.15rem;
    color: #059669;
    flex-shrink: 0;
}

/* Bank Account Branding in Orders */
.wp-bank-logo-badge {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    flex-shrink: 0;
}

.wp-bank-bcp { background-color: #ea580c; }
.wp-bank-bbva { background-color: #1e3a8a; }
.wp-bank-interbank { background-color: #059669; }
.wp-bank-pichincha { background-color: #ca8a04; }
.wp-bank-scotia { background-color: #dc2626; }
.wp-bank-default { background-color: #2563eb; }

/* Financial Summary Card (Sticky) */
.wp-order-summary-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
}

.wp-order-summary-header {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid #f1f5f9;
    background-color: #f8fafc;
}

.wp-order-summary-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.wp-order-summary-subtitle {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.15rem;
    margin-bottom: 0;
}

.wp-order-summary-body {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wp-order-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
}

.wp-order-summary-line-val {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.wp-order-summary-divider {
    border-top: 1px dashed #e2e8f0;
    margin: 0.25rem 0;
}

.wp-order-summary-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.wp-order-summary-total-label {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.wp-order-summary-total-val-box {
    text-align: right;
}

.wp-order-summary-total-val {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
    display: block;
    font-variant-numeric: tabular-nums;
}

.wp-order-summary-total-tax-note {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.2rem;
    display: block;
}

.wp-order-invoice-note {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wp-order-actions-box {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 0.25rem;
}

.wp-order-support-note {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.85rem;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
}

.wp-order-support-link {
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.2rem;
}

.wp-order-support-link:hover {
    text-decoration: underline;
}

/* Print Rules */
@media print {
    .app-header,
    .app-footer,
    .wp-order-back-btn,
    .wp-order-actions-box,
    .wp-order-support-note,
    .wp-order-email-copy-btn,
    .wp-bank-copy-btn,
    nav.wp-breadcrumb,
    .wp-orders-back-link,
    .wp-orders-btn-excel,
    .wp-orders-toolbar,
    .wp-orders-footer,
    .wp-orders-banner-card {
        display: none !important;
    }

    .wp-order-header-card,
    .wp-order-card,
    .wp-order-summary-card,
    .wp-order-instructions-card,
    .wp-orders-header-card,
    .wp-orders-table-card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* =========================================================
   HISTORIAL DE PEDIDOS Y FACTURAS (ENTERPRISE PRECISION)
   Inspirado en Revisar/DESIGN.md & Revisar/code.html
   ========================================================= */

.wp-kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .wp-kpi-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .wp-kpi-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wp-orders-header-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .wp-orders-header-card {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.wp-orders-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wp-orders-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
    width: fit-content;
}

.wp-orders-back-link:hover {
    color: #1e40af;
    transform: translateX(-2px);
}

.wp-orders-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.25;
}

.wp-orders-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 44rem;
    margin: 0;
    line-height: 1.45;
}

.wp-orders-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.wp-orders-btn-excel {
    height: 40px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #475569;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.wp-orders-btn-excel:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.wp-orders-btn-excel i {
    color: #059669;
    font-size: 0.95rem;
}

.wp-orders-table-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.wp-orders-toolbar {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid #f1f5f9;
    background-color: #ffffff;
}

@media (min-width: 992px) {
    .wp-orders-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-orders-search-box {
    position: relative;
    flex: 1;
    max-width: 28rem;
}

.wp-orders-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: #64748b;
    pointer-events: none;
}

.wp-orders-search-input {
    width: 100%;
    height: 40px;
    padding-left: 2.35rem;
    padding-right: 1rem;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.wp-orders-search-input:focus {
    outline: none;
    border-color: #1d4ed8;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.wp-orders-search-input::placeholder {
    color: #94a3b8;
}

.wp-orders-filters-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.wp-orders-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.25rem 0.65rem;
    height: 40px;
}

.wp-orders-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wp-orders-select {
    height: 32px;
    background: transparent;
    border: none;
    color: #0f172a;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    padding-right: 0.5rem;
}

.wp-orders-select:focus {
    outline: none;
}

.wp-orders-btn-refresh {
    height: 40px;
    width: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-orders-btn-refresh:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.wp-orders-btn-refresh.spinning i {
    animation: wpSpin 1s linear infinite;
}

.wp-orders-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.wp-orders-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
    margin: 0;
}

.wp-orders-table thead tr {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.wp-orders-table th {
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    white-space: nowrap;
    border: none;
}

.wp-orders-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.wp-orders-table tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.85);
}

.wp-orders-table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border: none;
}

.wp-orders-id-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wp-orders-id-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.wp-orders-id-info {
    display: flex;
    flex-direction: column;
}

.wp-orders-id-link {
    font-weight: 700;
    color: #1d4ed8;
    font-family: monospace;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s ease;
}

.wp-orders-id-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

.wp-orders-id-link i {
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wp-orders-table tbody tr:hover .wp-orders-id-link i {
    opacity: 1;
}

.wp-orders-id-type {
    font-size: 0.75rem;
    color: #64748b;
}

.wp-orders-date-main {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.wp-orders-date-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.wp-orders-sol-title {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.875rem;
}

.wp-orders-sol-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.wp-orders-amount-val {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.wp-orders-amount-note {
    font-size: 0.72rem;
    color: #64748b;
    text-align: right;
    white-space: nowrap;
}

.wp-orders-sunat-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.wp-orders-comprobante-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    white-space: nowrap;
}

.wp-orders-comprobante-pill.is-waiting {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.wp-orders-comprobante-pill.is-exempt {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.wp-orders-comprobante-pill.is-processing {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.wp-orders-doc-btn {
    height: 30px;
    padding: 0 0.55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.wp-orders-doc-pdf {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.wp-orders-doc-pdf:hover {
    background-color: #fee2e2;
    color: #b91c1c;
}

.wp-orders-doc-xml {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.wp-orders-doc-xml:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

.wp-orders-doc-cdr {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.wp-orders-doc-cdr:hover {
    background-color: #d1fae5;
    color: #047857;
}

.wp-orders-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

.wp-orders-btn-pay {
    height: 36px;
    padding: 0 0.95rem;
    background-color: #1d4ed8;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.2);
    text-decoration: none;
    transition: all 0.15s ease;
}

.wp-orders-btn-pay:hover {
    background-color: #1e40af;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(29, 78, 216, 0.3);
}

.wp-orders-btn-view {
    height: 36px;
    padding: 0 0.85rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.wp-orders-btn-view:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.wp-orders-footer {
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid #f1f5f9;
    background-color: #ffffff;
}

@media (min-width: 640px) {
    .wp-orders-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-orders-footer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.825rem;
    color: #64748b;
    flex-wrap: wrap;
}

.wp-orders-footer-highlight {
    font-weight: 700;
    color: #0f172a;
}

.wp-orders-pagesize-box {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
}

.wp-orders-pagesize-select {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.wp-orders-pagination-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wp-orders-page-btn {
    height: 32px;
    padding: 0 0.65rem;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-orders-page-btn:hover:not(:disabled) {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.wp-orders-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wp-orders-page-btn.is-active {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}

.wp-orders-banner-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .wp-orders-banner-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-orders-banner-left {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    max-width: 48rem;
}

.wp-orders-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.wp-orders-banner-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wp-orders-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.wp-orders-banner-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.wp-orders-banner-desc strong {
    color: #0f172a;
}

.wp-orders-banner-btn {
    height: 42px;
    padding: 0 1.25rem;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.825rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-orders-banner-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.wp-orders-banner-btn i {
    color: #1d4ed8;
    font-size: 1rem;
}

.wp-orders-empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.wp-orders-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background-color: #f8fafc;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.wp-orders-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-orders-empty-desc {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 24rem;
    margin: 0;
}

/* =========================================================
   LAUNCHER DASHBOARD (ENTERPRISE PRECISION)
   ========================================================= */

.launcher-page-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

@media (min-width: 768px) {
    .launcher-page-container {
        padding: 2rem 1.5rem 3.5rem 1.5rem;
        gap: 2rem;
    }
}

/* Welcome Admin Alert */
.launcher-welcome-banner {
    background-color: #eff6ff;
    border-left: 4px solid var(--ci-primary) !important;
    border-radius: 14px;
    box-shadow: var(--wp-shadow-sm);
    color: #1e3a8a;
}

/* Header & Context */
.launcher-header-context {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .launcher-header-context {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.launcher-org-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: #eaedff;
    color: #434655;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    width: fit-content;
}

.launcher-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #006948;
    animation: launcherPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes launcherPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.launcher-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0.35rem 0 0.25rem 0;
}

.launcher-subtitle {
    font-size: 0.92rem;
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.5;
    max-width: 650px;
}

.launcher-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.launcher-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    box-shadow: var(--wp-shadow-sm);
    color: #64748b;
    font-size: 0.82rem;
}

.launcher-stat-pill strong {
    color: #0f172a;
}

.launcher-btn-request {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--wp-border);
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--wp-shadow-sm);
    transition: all 0.2s ease;
}

.launcher-btn-request:hover {
    background: #eaedff;
    color: #1e40af;
    border-color: #cbd5e1;
}

/* Search and Filter Bar */
.launcher-filter-bar {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 16px;
    padding: 0.75rem;
    box-shadow: var(--wp-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .launcher-filter-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.launcher-search-box {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.launcher-search-box .launcher-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.95rem;
    pointer-events: none;
}

.launcher-search-input {
    width: 100%;
    padding: 0.55rem 2.2rem 0.55rem 2.4rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--wp-border);
    color: #0f172a;
    font-size: 0.88rem;
    transition: all 0.2s ease;
}

.launcher-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.launcher-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.launcher-search-clear:hover {
    color: #0f172a;
    background: #e2e8f0;
}

.launcher-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.launcher-filter-chips::-webkit-scrollbar {
    display: none;
}

.launcher-filter-chip {
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: #f8fafc;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.launcher-filter-chip:hover {
    background: #eaedff;
    color: #0f172a;
}

.launcher-filter-chip.active {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

/* App Grid */
.launcher-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .launcher-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .launcher-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Launcher Card Component */
.launcher-app-card {
    background: #ffffff;
    border: 1px solid var(--wp-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--wp-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    height: 100%;
}

.launcher-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.launcher-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Icon Container Gradients */
.launcher-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.launcher-icon-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.launcher-icon-emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.launcher-icon-blue {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.launcher-icon-cyan {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.25);
}

.launcher-icon-indigo {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.launcher-icon-slate {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    box-shadow: 0 4px 14px rgba(51, 65, 85, 0.25);
}

.launcher-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

.launcher-badge-tag .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.launcher-dot-amber { background-color: #f59e0b; }
.launcher-dot-emerald { background-color: #059669; }
.launcher-dot-primary { background-color: #1d4ed8; }
.launcher-dot-cyan { background-color: #0891b2; }
.launcher-dot-indigo { background-color: #4f46e5; }
.launcher-dot-slate { background-color: #64748b; }

.launcher-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    transition: color 0.2s ease;
}

.launcher-app-card:hover .launcher-card-title {
    color: #1d4ed8;
}

.launcher-card-desc {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.launcher-card-footer {
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.launcher-card-status {
    font-size: 0.75rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.launcher-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.2);
    transition: all 0.2s ease;
    border: none;
}

.launcher-card-btn:hover {
    background: #1e40af;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.launcher-card-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.launcher-app-card:hover .launcher-card-btn i {
    transform: translateX(3px);
}

/* Empty State */
.launcher-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
    box-shadow: var(--wp-shadow-sm);
    border: 1px solid var(--wp-border);
}

.launcher-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.85rem;
    margin-bottom: 1rem;
}

.launcher-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.launcher-empty-desc {
    font-size: 0.88rem;
    color: #64748b;
    max-width: 440px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.launcher-btn-reset {
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    background: #eaedff;
    color: #1d4ed8;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.launcher-btn-reset:hover {
    background: #dce1ff;
    color: #1e40af;
}

/* Quick Help Banner */
.launcher-help-banner {
    border-radius: 16px;
    background: linear-gradient(135deg, #eaedff 0%, #f2f3ff 100%);
    border: 1px solid #d5e3fc;
    padding: 1.5rem;
    box-shadow: var(--wp-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    .launcher-help-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.launcher-help-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.launcher-help-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #1d4ed8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.launcher-help-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.launcher-help-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.launcher-help-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background: rgba(29, 78, 216, 0.1);
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 600;
}

.launcher-help-desc {
    font-size: 0.84rem;
    color: #475569;
    margin: 0.25rem 0 0 0;
    line-height: 1.45;
    max-width: 580px;
}

.launcher-help-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.launcher-btn-docs {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 12px;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--wp-border);
    box-shadow: var(--wp-shadow-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.launcher-btn-docs:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

.launcher-btn-ticket {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 12px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
    text-decoration: none;
    transition: all 0.2s ease;
}

.launcher-btn-ticket:hover {
    background: #1e40af;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

/* Bottom Ecosystem Status Note */
.launcher-status-note {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem;
    color: #64748b;
    font-size: 0.82rem;
}

@media (min-width: 640px) {
    .launcher-status-note {
        flex-direction: row;
    }
}

.launcher-status-note-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.launcher-status-note-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.launcher-footer-link {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}

.launcher-footer-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* =========================================================
   SECURITY & PASSWORD CHANGE MODULE (ENTERPRISE PRECISION)
   ========================================================= */

.wp-pwd-page-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem 1rem;
}

@media (min-width: 768px) {
    .wp-pwd-page-container {
        padding: 2rem 1.5rem 4rem 1.5rem;
    }
}

/* Breadcrumb & Top Metadata Bar */
.wp-pwd-breadcrumb-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .wp-pwd-breadcrumb-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wp-pwd-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.825rem;
    color: #64748b;
}

.wp-pwd-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.wp-pwd-breadcrumb-link:hover {
    color: #1d4ed8;
}

.wp-pwd-breadcrumb-sep {
    color: #cbd5e1;
    font-size: 0.75rem;
}

.wp-pwd-breadcrumb-current {
    font-weight: 600;
    color: #0f172a;
}

.wp-pwd-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    align-self: flex-start;
}

@media (min-width: 640px) {
    .wp-pwd-history-badge {
        align-self: auto;
    }
}

.wp-pwd-history-badge i {
    color: #1d4ed8;
    font-size: 0.8rem;
}

/* Hero Banner Card */
.wp-pwd-hero {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eaedff 100%);
    border: 1px solid #dae2fd;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    overflow: hidden;
}

@media (min-width: 992px) {
    .wp-pwd-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2rem;
    }
}

.wp-pwd-hero-content {
    max-width: 680px;
    position: relative;
    z-index: 2;
}

.wp-pwd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: #d5e3fc;
    color: #1e3a8a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(29, 78, 216, 0.15);
}

.wp-pwd-hero-badge i {
    font-size: 0.8rem;
    color: #1d4ed8;
}

.wp-pwd-hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.wp-pwd-hero-desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

.wp-pwd-hero-graphic {
    width: 100%;
    max-width: 320px;
    height: 110px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.08) 0%, rgba(37, 99, 235, 0.16) 100%);
    border: 1px solid rgba(29, 78, 216, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
}

.wp-pwd-hero-graphic-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.wp-pwd-hero-icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #1d4ed8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
    flex-shrink: 0;
}

.wp-pwd-hero-graphic-text {
    display: flex;
    flex-direction: column;
}

.wp-pwd-hero-graphic-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wp-pwd-hero-graphic-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
}

/* Main Grid & Form Card */
.wp-pwd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .wp-pwd-grid {
        grid-template-columns: 8fr 4fr;
    }
}

.wp-pwd-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .wp-pwd-card {
        padding: 2rem;
    }
}

.wp-pwd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1.5rem;
}

.wp-pwd-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.wp-pwd-card-subtitle {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0;
}

.wp-pwd-header-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eaedff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Form Fields */
.wp-pwd-form-group {
    margin-bottom: 1.35rem;
}

.wp-pwd-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.wp-pwd-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin: 0;
}

.wp-pwd-req-mark {
    color: #dc2626;
    margin-left: 2px;
}

.wp-pwd-forgot-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s ease;
}

.wp-pwd-forgot-link:hover {
    color: #1e40af;
    text-decoration: underline;
}

.wp-pwd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.wp-pwd-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.wp-pwd-input {
    width: 100%;
    height: 42px;
    padding: 0.5rem 2.85rem 0.5rem 2.6rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    outline: none;
    transition: all 0.2s ease;
}

.wp-pwd-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.wp-pwd-input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    background-color: #ffffff;
}

.wp-pwd-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    z-index: 3;
}

.wp-pwd-toggle-btn:hover {
    color: #0f172a;
    background-color: #f1f5f9;
}

.wp-pwd-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 1.5rem 0;
}

/* Password Strength Indicator */
.wp-pwd-strength-box {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wp-pwd-strength-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.wp-pwd-strength-title {
    color: #64748b;
    font-weight: 500;
}

.wp-pwd-strength-label {
    font-weight: 700;
}

.wp-pwd-strength-label.strength-empty { color: #94a3b8; }
.wp-pwd-strength-label.strength-weak { color: #dc2626; }
.wp-pwd-strength-label.strength-fair { color: #d97706; }
.wp-pwd-strength-label.strength-good { color: #1d4ed8; }
.wp-pwd-strength-label.strength-strong { color: #059669; }

.wp-pwd-strength-bars {
    display: flex;
    gap: 6px;
    height: 5px;
}

.wp-pwd-strength-bar {
    flex: 1;
    height: 100%;
    border-radius: 9999px;
    background-color: #e2e8f0;
    transition: background-color 0.3s ease;
}

.wp-pwd-strength-bar.bar-weak { background-color: #dc2626; }
.wp-pwd-strength-bar.bar-fair { background-color: #f59e0b; }
.wp-pwd-strength-bar.bar-good { background-color: #2563eb; }
.wp-pwd-strength-bar.bar-strong { background-color: #059669; }

/* Match Indicator */
.wp-pwd-match-notice {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.775rem;
    font-weight: 600;
    margin-top: 0.45rem;
}

.wp-pwd-match-valid {
    color: #059669;
}

.wp-pwd-match-invalid {
    color: #dc2626;
}

/* Security Option Box (Sessions Checkbox) */
.wp-pwd-option-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.wp-pwd-option-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.wp-pwd-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 4px;
    accent-color: #1d4ed8;
    cursor: pointer;
    flex-shrink: 0;
}

.wp-pwd-option-text {
    flex: 1;
}

.wp-pwd-option-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.wp-pwd-option-desc {
    display: block;
    font-size: 0.775rem;
    color: #64748b;
    line-height: 1.45;
}

/* Form Actions */
.wp-pwd-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

@media (min-width: 640px) {
    .wp-pwd-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

.wp-pwd-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 1.5rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.wp-pwd-btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.wp-pwd-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.75rem;
    border-radius: 8px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.wp-pwd-btn-submit:hover:not(:disabled) {
    background: #1e40af;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

.wp-pwd-btn-submit:active:not(:disabled) {
    transform: scale(0.99);
}

.wp-pwd-btn-submit:disabled {
    opacity: 0.55;
    background-color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.wp-pwd-pending-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.775rem;
    color: #64748b;
    font-weight: 500;
}

/* Sidebar Elements */
.wp-pwd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wp-pwd-tips-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 1.5rem;
}

.wp-pwd-tips-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.wp-pwd-tips-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #d5e3fc;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.wp-pwd-tips-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wp-pwd-tips-lead {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.45;
}

/* Requirements Checkbox Panel */
.wp-pwd-req-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.wp-pwd-req-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 0.65rem;
}

.wp-pwd-req-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wp-pwd-req-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #64748b;
    transition: color 0.15s ease;
}

.wp-pwd-req-item.met {
    color: #059669;
    font-weight: 600;
}

.wp-pwd-req-item i {
    font-size: 0.825rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.wp-pwd-req-item.met i {
    color: #059669;
}

/* Advice List */
.wp-pwd-advice-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.wp-pwd-advice-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wp-pwd-advice-icon {
    color: #1d4ed8;
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.wp-pwd-advice-text {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

.wp-pwd-advice-strong {
    display: block;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Support Help Card */
.wp-pwd-support-card {
    background: #f8fafc;
    border: 1px solid #dae2fd;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.wp-pwd-support-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #dae2fd;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.wp-pwd-support-content {
    flex: 1;
}

.wp-pwd-support-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
}

.wp-pwd-support-desc {
    font-size: 0.775rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 0.65rem 0;
}

.wp-pwd-support-links {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.78rem;
}

.wp-pwd-support-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wp-pwd-support-link:hover {
    text-decoration: underline;
}

.wp-pwd-support-sep {
    color: #cbd5e1;
}

.wp-pwd-support-ext {
    color: #64748b;
    font-weight: 500;
}

/* Active Session Badge Card */
.wp-pwd-session-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wp-pwd-session-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wp-pwd-session-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}

.wp-pwd-session-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
}

.wp-pwd-session-sub {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
}

.wp-pwd-session-icon {
    color: #94a3b8;
    font-size: 1rem;
}

/* =========================================================
   PUBLIC TOKEN-BASED PASSWORD RESET (ENTERPRISE PRECISION)
   ========================================================= */

.wp-token-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #faf8ff;
    color: #131b2e;
}

.wp-token-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(196, 197, 215, 0.35);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}

.wp-token-header-inner {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wp-token-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.wp-token-logo-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: #1d4ed8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.wp-token-brand-text {
    display: flex;
    flex-direction: column;
}

.wp-token-brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #131b2e;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.wp-token-brand-sub {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #515f74;
}

.wp-token-header-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #434655;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.wp-token-header-link:hover {
    color: #0037b0;
    background-color: #eaedff;
}

.wp-token-main {
    flex: 1;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wp-token-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 540px;
}

.wp-token-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
}

@media (min-width: 640px) {
    .wp-token-card {
        padding: 2.25rem;
    }
}

.wp-token-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

.wp-token-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(5, 150, 105, 0.1);
    color: #059669;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.wp-token-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    background-color: #f1f5f9;
    color: #515f74;
    font-size: 0.75rem;
    font-weight: 500;
}

.wp-token-timer-badge strong {
    color: #131b2e;
    font-weight: 700;
}

.wp-token-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #131b2e;
    letter-spacing: -0.025em;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.wp-token-subtitle {
    font-size: 0.88rem;
    color: #515f74;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.wp-token-email-highlight {
    font-weight: 700;
    color: #131b2e;
}

/* Rules Complexity Box */
.wp-token-rules-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: 1.15rem 0;
}

.wp-token-rules-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #131b2e;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.wp-token-rules-title i {
    color: #1d4ed8;
    font-size: 0.9rem;
}

.wp-token-rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 520px) {
    .wp-token-rules-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.wp-token-rule-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.775rem;
    color: #64748b;
    transition: color 0.15s ease;
}

.wp-token-rule-item.met {
    color: #059669;
    font-weight: 600;
}

.wp-token-rule-item i {
    font-size: 0.85rem;
    color: #cbd5e1;
    flex-shrink: 0;
}

.wp-token-rule-item.met i {
    color: #059669;
}

/* Action CTA Button */
.wp-token-btn-submit {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 8px;
    background-color: #1d4ed8;
    color: #ffffff;
    font-size: 0.925rem;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: 0.5rem;
}

.wp-token-btn-submit:hover:not(:disabled) {
    background-color: #1e40af;
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35);
}

.wp-token-btn-submit:disabled {
    opacity: 0.55;
    background-color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bottom Links */
.wp-token-links-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.8rem;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.wp-token-back-link {
    color: #515f74;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.wp-token-back-link:hover {
    color: #131b2e;
}

.wp-token-report-link {
    color: #1d4ed8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.wp-token-report-link:hover {
    text-decoration: underline;
    color: #1e40af;
}

/* Trust & Protocol Block */
.wp-token-trust-block {
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    font-size: 0.725rem;
    color: #64748b;
}

.wp-token-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.wp-token-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #059669;
    font-weight: 600;
}

.wp-token-meta-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    margin: 0;
}

/* System Status Reference */
.wp-token-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
    font-size: 0.75rem;
    color: #64748b;
    padding: 0 0.5rem;
}

.wp-token-status-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-token-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}

.wp-token-footer {
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid rgba(196, 197, 215, 0.35);
    padding: 1.25rem 1.5rem;
}

.wp-token-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

@media (min-width: 768px) {
    .wp-token-footer-inner {
        flex-direction: row;
        text-align: left;
    }
}

.wp-token-footer-copy {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
}

.wp-token-footer-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.78rem;
}

.wp-token-footer-link {
    color: #515f74;
    text-decoration: none;
    transition: color 0.15s ease;
}

.wp-token-footer-link:hover {
    color: #131b2e;
}