:root {
            --cw-primary: #6366f1;
            --cw-primary-light: #f5f3ff;
            --cw-success: #10b981;
            --cw-success-light: #ecfdf5;
            --cw-info: #0ea5e9;
            --cw-info-light: #f0f9ff;
            --cw-warning: #f59e0b;
            --cw-warning-light: #fffbeb;
            --cw-bg: #f8fafc;
            --cw-card-bg: #ffffff;
            --cw-border: #eef2f6;
            --cw-text-main: #0f172a;
            --cw-text-sub: #64748b;
            --cw-text-muted: #94a3b8;
            
            --cw-radius-xl: 24px;
            --cw-radius-lg: 18px;
            --cw-radius-md: 12px;
            --cw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            --cw-font: 'Plus Jakarta Sans', sans-serif;
            --cw-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .table-responsive
        {
                overflow-y: auto;
        }
        
        
        img.avatar-xs.rounded-circle.me-2 
        {
            width: 35px;
        }
        
        .theme-dark .modal-content 
        {
            background-color: #293145 !important;
        }
        .filepond--credits
        {
            display: none;
        }
        
        .lightbox {
    
            width: calc(100% - 0px) !important;
            
        }
        
        .notice-text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: justify;
        }
        .notice-text.expanded {
            -webkit-line-clamp: unset;
            display: block;
        }
        
        .password-toggle{
                position:absolute;
                right:12px;
                top:38px;
                cursor:pointer;
                color:#6c757d;
            }
        
        .logo-container {
            width: 160px;      /* tamaño fijo */
            height: 50px;      /* tamaño fijo */
            display: flex;
            justify-content: flex-start;
        }
        
        .logo-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: left center;
        }

 
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&family=Inconsolata:wght@400;700&display=swap');

        /* Variables CSS para facilitar la gestión de colores */
        :root {
            --ziigo-start: #ffb800; 
            --ziigo-end: #ff7f00;   
            --blue-card-start: #3685e8; 
            --blue-card-end: #1a56b8;   
            
            --chip-color: #EFEFEF; 
            --text-color: #ffffff;
            --text-shadow: rgba(0, 0, 0, 0.3); /* Sombra más fuerte para relieve */
        }
        .card-wrapper {
            width: 100%; 
            max-width: 300px; 
            padding-bottom: 60%; /* Proporción horizontal compacta */
            position: relative;
        }

        .card-container {
            width: 100%;
            height: 100%;
            position: absolute; 
            top: 0;
            left: 0;
            
            border-radius: 12px; 
            padding: 15px 18px; 
            color: var(--text-color);
            
            /* Sombra sutil con más profundidad */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
            overflow: hidden; /* Importante para contener el efecto de brillo */
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
        }

        /* Efecto de levitación simple y profesional */
        .card-container:hover {
            transform: scale(1.03) translateY(-8px); 
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); 
        }

        /* ------------------ Elementos Comunes (Estilo Tarjeta de Crédito) ------------------ */

        /* El Chip (Ahora con más relieve y mejor posicionado) */
        .card-container::before {
            content: '';
            position: absolute;
            top: 15px; /* Más cerca de la parte superior */
            left: 18px; 
            width: 30px; 
            height: 20px; 
            background-color: var(--chip-color);
            border-radius: 4px; /* Ligeramente más redondeado */
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra interna para profundidad */
            z-index: 10;
        }

        /* Glare/Shine effect (Efecto de brillo diagonal para simular plástico) */
        .card-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            /* Degradado blanco-transparente para simular el brillo */
            background: linear-gradient(
                135deg, 
                rgba(255, 255, 255, 0.15) 0%, 
                rgba(255, 255, 255, 0) 50%, 
                rgba(255, 255, 255, 0.05) 100%
            );
            z-index: 1; 
            pointer-events: none;
        }

        /* Aseguramos que el contenido esté por encima del brillo */
        .card-header, .card-number-row, .card-footer {
            position: relative;
            z-index: 20; 
        }

        .card-header {
            display: flex;
            justify-content: flex-end; 
            align-items: center;
            height: 30px; 
        }
        
        .card-number-row {
            text-align: center;
            margin-top: 5px; /* Reducimos el margen superior */
        }

        /* ESTILO PARA EL NÚMERO DE TARJETA (Efecto Embossed) */
        .card-number-style {
            font-family: 'Inconsolata', monospace;
            /* clamp(mínimo 16px, valor preferido 5vw, máximo 20px) */
            font-size: clamp(16px, 5vw, 20px); 
            letter-spacing: 2px;
            font-weight: 400;
            opacity: 0.9;
            /* Sombra más pronunciada para simular relieve */
            text-shadow: 1px 1px 3px var(--text-shadow); 
            text-align: left;
            white-space: nowrap;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end; 
            margin-top: 5px; /* Reducimos el margen superior */
        }

        /* Holder Name y Expiry (Texto pequeño, Poppins) */
        .holder-info, .network-info {
            display: flex;
            flex-direction: column;
        }

        .card-label {
            font-size: clamp(8px, 2.5vw, 10px);
            font-weight: 300;
            opacity: 0.7;
            text-transform: uppercase;
            line-height: 1;
        }

        .holder-name {
            font-size: clamp(12px, 3.5vw, 14px);
            font-weight: 500;
            line-height: 1.2;
            text-transform: uppercase;
            text-shadow: 0 1px 1px var(--text-shadow);
        }

        .expiry-label {
            text-align: right;
            margin-right: 5px;
        }

        .expiry-date {
            font-size: clamp(12px, 3.5vw, 14px); 
            font-weight: 700; 
            opacity: 0.9;
            font-family: 'Inconsolata', monospace; 
            text-align: right;
            text-shadow: 0 1px 1px var(--text-shadow);
        }
        
        /* Logo de Red de Pago (Ej. Visa/Mastercard) */
        .network-logo {
            width: clamp(30px, 10vw, 40px); 
            height: clamp(20px, 7vw, 30px);
            border-radius: 4px; /* Forma más cuadrada para parecer más un logo impreso */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
            margin-left: 10px;
            background: linear-gradient(90deg, #ff5f00, #ff5f00 45%, #eb001b 55%, #eb001b); 
            opacity: 0.8;
        }
        
        .footer-right {
            display: flex;
            align-items: flex-end; 
        }

        /* Estilo para el logo de imagen Ziigo (Ahora en la parte superior derecha) */
        .ziigo-logo img {
            height: clamp(18px, 5vw, 22px); 
            width: auto;
            object-fit: contain;
            filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); /* Sombra para resaltar */
        }


        /* ------------------ Paletas de Color ------------------ */

        .payoneer-card {
            background: linear-gradient(135deg, var(--ziigo-start) 0%, var(--ziigo-end) 100%);
        }

        .blue-card {
            background: linear-gradient(135deg, var(--blue-card-start) 0%, var(--blue-card-end) 100%); 
        }
        
        
        .card-container::before {
    content: '';
    position: absolute;
    top: 15px; /* Más cerca de la parte superior */
    left: 18px; 
    width: 35px; /* Ajuste de tamaño para la imagen */
    height: 25px; /* Ajuste de tamaño para la imagen */
    background-image: url('https://red.ziigo.pro/public/assets/images/chip.png');
    background-size: contain; /* Asegura que la imagen se vea completa */
    background-repeat: no-repeat;
    background-color: transparent; /* No es necesario el color de fondo */
    border-radius: 4px; 
    box-shadow: none; /* Eliminar la sombra de simulación de chip */
    z-index: 10;
}

.modal-body{
    max-height: 70vh;
    overflow-y: auto;
}

.menu-icon img
{
    border-radius: 50%;
    height: 50px !important;
    
}

img.avatar-xs.rounded-circle.me-2 {
    width: 35px;
    height: 35px;
    border-style: solid;
    border-color: var(--theme-color);
}

.dataTables_filter {
    display: none !important;
}

/* Flujo de gradiente */
@keyframes subtle-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Texto marketing animado */
.animate-marketing-text {
    background: linear-gradient(90deg,var(--theme-color), #7c3aed,var(--theme-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: subtle-flow 4s linear infinite;
    font-weight: 700;
}

/* Brillo del icono */
.marketing-glow {
    filter: drop-shadow(0 0 3px rgba(99,102,241,.4));
}

/* Badge nuevo */
@keyframes soft-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.8; transform:scale(.95); }
}

.animate-new-badge {
    animation: soft-pulse 2s infinite ease-in-out;
    background:var(--theme-color);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .5px;
}

/* Contenedor */
.nav-item {
    position: relative;
    margin: 8px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-decoration: none;
    transition: all .3s ease;
}

.nav-link:hover {
    border-color: #c7d2fe;
    box-shadow: 0 6px 20px rgba(79,70,229,.15);
}

/* Icono */
.nav-link i {
    font-size: 20px;
    margin-right: 12px;
    color: #6366f1;
}
   

@keyframes icon-pulse {
    0%,100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(99,102,241,0));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 8px rgba(99,102,241,.6));
    }
}

.icon-animated {
    animation: icon-pulse 1.8s ease-in-out infinite;
}
.w40 {
    width: 50px !important;
}.dataTables_paginate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
    font-family: system-ui, sans-serif;
}

.dataTables_paginate .paginate_button {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dataTables_paginate .paginate_button:hover {
    background:var(--theme-color);
    color: #fff !important;
    border-color:var(--theme-color);
}

.dataTables_paginate .paginate_button.current {
    background:var(--theme-color);
    color: #fff;
    border-color:var(--theme-color);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}


.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.next,
.dataTables_paginate .paginate_button.previous:hover {
    color: #111827 !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
}

.dataTables_paginate span {
    display: flex;
    gap: 6px;
}

.cw-directory-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
            gap: 20px;
        }

        .cw-brand-icon {
            width: 44px;
            height: 44px;
            background: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.04);
            color: var(--cw-primary);
        }

        .cw-directory-header h1 {
            font-size: 1.6rem;
            font-weight: 800;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .cw-header-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-grow: 1;
            justify-content: flex-end;
        }

        /* Buscador Estilo Pill */
        .cw-search-pill-container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }

        .cw-search-pill-input {
            width: 100%;
            background: white;
            border: 1.5px solid var(--cw-primary);
            border-radius: 50px;
            padding: 10px 20px 10px 52px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--cw-transition);
            outline: none;
            color: var(--cw-text-main);
        }

        .cw-search-pill-input:focus {
            box-shadow: 0 0 0 4px var(--cw-primary-light);
        }

        .cw-search-pill-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--cw-primary);
        }

        .cw-btn-new {
            background: var(--cw-primary);
            color: white;
            border: none;
            padding: 11px 24px;
            border-radius: 50px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--cw-transition);
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
            font-size: 0.88rem;
        }
        .cw-btn-new:hover { background: #4f46e5; transform: translateY(-1px); }

        /* --- CARDS (Compact Horizontal Style) --- */
        .cw-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .cw-item-card {
            background: var(--cw-card-bg);
            border: 1px solid var(--cw-border);
            border-radius: var(--cw-radius-lg);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            transition: var(--cw-transition);
            opacity: 0;
            transform: translateY(20px);
        }

        .cw-item-card:hover {
            border-color: var(--cw-primary);
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.04);
        }

        .cw-item-card.show {
            opacity: 1;
            transform: translateY(0);
        }

        .cw-card-left {
            display: flex;
            align-items: center;
            gap: 20px;
            flex: 1;
        }

        .cw-card-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            flex-shrink: 0;
            background: #f1f5f9;
        }

        .cw-card-info h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--cw-text-main);
        }

        .cw-card-info .ref-id {
            font-size: 0.8rem;
            color: var(--cw-text-muted);
            font-weight: 600;
            display: block;
            margin-top: 1px;
        }

        .cw-card-center {
            display: flex;
            gap: 10px;
            flex: 2;
            justify-content: center;
            flex-wrap: wrap; /* Permitir burbujas en varias filas si es necesario */
        }

        /* Burbujas Estilizadas */
        .cw-bubble {
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.78rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--cw-transition);
            white-space: nowrap;
        }

        .cw-bubble-labs { background: var(--cw-info-light); color: var(--cw-info); }
        .cw-bubble-meds { background: var(--cw-success-light); color: var(--cw-success); }
        .cw-bubble-visitor { background: var(--cw-primary-light); color: var(--cw-primary); }
        .cw-bubble-city { background: var(--cw-warning-light); color: var(--cw-warning); }

        .cw-bubble:hover { transform: translateY(-2px); }

        .cw-card-right {
            display: flex;
            align-items: center;
            gap: 30px;
            flex: 1;
            justify-content: flex-end;
        }

        .cw-meta-date { text-align: right; min-width: 80px; }

        .cw-meta-label {
            font-size: 0.55rem;
            font-weight: 800;
            color: var(--cw-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: block;
        }

        .cw-meta-val {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--cw-text-main);
        }

        /* --- ACTIONS --- */
        .cw-action-wrap {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .cw-btn-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1.5px solid var(--cw-border);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--cw-text-sub);
            transition: var(--cw-transition);
            cursor: pointer;
        }

        /* Realce en Perfil (User) */
        .cw-btn-profile {
            border-color: var(--cw-primary);
            background: var(--cw-primary-light);
            color: var(--cw-primary);
            box-shadow: 0 0 0 1px var(--cw-primary);
        }
        .cw-btn-profile:hover { background: var(--cw-primary); color: white; transform: scale(1.1); }

        .cw-btn-history:hover { color: var(--cw-primary); border-color: var(--cw-primary); background: var(--cw-primary-light); transform: scale(1.1); }

        @media (max-width: 1200px) {
            .cw-card-center { flex: 1.5; }
        }

        @media (max-width: 991px) {
            .cw-card-center { display: none; }
            .cw-directory-header { flex-direction: column; align-items: flex-start; gap: 20px; }
            .cw-header-right { width: 100%; flex-direction: column-reverse; align-items: stretch; }
            .cw-search-pill-container { max-width: 100%; }
        }

        @media (max-width: 768px) {
            .cw-item-card { flex-direction: column; align-items: flex-start; gap: 15px; padding: 1.25rem; }
            .cw-card-right { width: 100%; justify-content: space-between; border-top: 1px solid var(--cw-border); padding-top: 10px; }
            .cw-meta-date { text-align: left; }
        }