/* ============================================
   ESTILOS CRM - VERSIÓN LIMPIA Y OPTIMIZADA
   ============================================ */

/* ============================================
   TABLA MODERNA
   ============================================ */
.crm .modern-table {
    width: 100%;
}

    .crm .modern-table thead {
        background: #f8f9fa;
    }

        .crm .modern-table thead th {
            background: white;
            border-bottom: 1px solid #e8ecf1;
        }

    .crm .modern-table th {
        padding: 10px 14px;
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        border-bottom: 2px solid #e8ecf1;
    }

    .crm .modern-table td {
        padding: 8px 15px;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
    }

.crm .product-info strong {
    display: block;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.crm .product-info small {
    color: #999;
    font-size: 12px;
}

/* ============================================
   BADGES
   ============================================ */
.crm .badge-modern {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.crm .badge-info {
    background: #e6f7ff;
    color: #1890ff;
}

.crm .badge-success {
    background: #52c41a;
    color: #ffffff;
}

.crm .badge-warning {
    background: #faad14;
    color: #ffffff;
}

/* ============================================
   BOTONES DE ACCIÓN
   ============================================ */
.crm .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.crm .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: #f5f7fa;
    color: #666;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .crm .btn-icon:hover {
        background: #667eea;
        color: #fff;
        transform: scale(1.1);
    }

.crm .btn-icon-danger:hover {
    background: #ff4d4f;
}

/* Botón de eliminar por fila: neutro, se pinta de rojo al hover del botón */
.crm tr .btn-row-delete {
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

    .crm tr .btn-row-delete:hover {
        color: #c1121f;
        border-color: #c1121f;
        background: none;
    }

/* ============================================
   FOOTER DE TABLA CON TOTALES
   ============================================ */
.crm .table-footer {
    padding: 20px 24px;
    background: #f8f9fa;
    border-top: 2px solid #e8ecf1;
}

.crm .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm .total-label {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.crm .total-value {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ============================================
   CABECERA DE CATEGORÍA MODERNA
   ============================================ */
.crm .crm-category-header-modern {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

    .crm .crm-category-header-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
        background-size: 30px 30px;
        opacity: 0.3;
    }

.crm .crm-category-icon-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

    .crm .crm-category-icon-wrapper i {
        font-size: 20px;
        color: #ffffff;
    }

.crm .crm-category-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

    .crm .crm-category-info h3 {
        margin: 0 0 5px 0;
        color: #ffffff;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

.crm .crm-category-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
}

/* ============================================
   TARJETAS DE ENTIDAD MODERNAS
   ============================================ */
.crm .crm-entity-card-modern {
    border: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

    .crm .crm-entity-card-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: #667eea;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .crm .crm-entity-card-modern:hover::before {
        transform: scaleX(1);
    }

    .crm .crm-entity-card-modern:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
    }

    .crm .crm-entity-card-modern .panel-body {
        padding: 30px 20px;
    }

/* ============================================
   ICONOS MODERNOS
   ============================================ */
.crm .crm-icon-stack-modern {
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
    transition: all 0.3s ease;
}

.crm .crm-entity-card-modern:hover .crm-icon-stack-modern {
    transform: scale(1.1) rotate(5deg);
}

.crm .crm-icon-stack-modern .fa-circle {
    color: #667eea !important;
}

/* ============================================
   CATEGORÍA GENERAL
   ============================================ */
.crm .crm-entity-category {
    margin-bottom: 20px;
    padding: 0 10px;
}

/* ============================================
   TÍTULOS Y DESCRIPCIONES
   ============================================ */
.crm .crm-entity-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 15px 0 10px 0;
    min-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm .crm-entity-description {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
    min-height: 36px;
    line-height: 1.4;
}

/* ============================================
   HEADER MODERNO
   ============================================ */
.crm .crm-modern-header {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.crm .crm-header-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 5px 0;
}

.crm .crm-subtitle {
    color: #999;
    font-size: 14px;
}

.crm .crm-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.crm-breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
}

    .crm-breadcrumb a {
        color: #337ab7;
        text-decoration: none;
    }

    .crm-breadcrumb i {
        margin: 0 8px;
        font-size: 10px;
    }

.crm-header-meta {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.crm-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.crm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 13px;
}

/* ============================================
   BOTONES GHOST
   ============================================ */
.crm .btn-ghost-success {
    background: none;
    color: #52c41a;
    border: 1px solid #52c41a;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .crm .btn-ghost-success:hover {
        background: #52c41a;
        color: #fff;
        transform: scale(1.1);
    }

.crm .btn-ghost-danger {
    background: none;
    color: #c1121f;
    border: 1px solid #c1121f;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .crm .btn-ghost-danger:hover {
        background: #c1121f;
        color: #fff;
        transform: scale(1.1);
    }

.crm .btn-ghost-info {
    background: #0072CA;
    color: whitesmoke;
    border: 1px solid #0072CA;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* ============================================
   CARDS MODERNOS
   ============================================ */
.crm .crm-modern-card {
    background: #fff;
    background: #f8f9fa;
    /*min-height: 50vh;*/
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

    .crm .crm-modern-card .card-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
    }

        .crm .crm-modern-card .card-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .crm .crm-modern-card .card-header h3 i {
                color: #667eea;
                margin-right: 8px;
            }

    .crm .crm-modern-card .card-body {
        padding: 24px;
    }

.crm .card-hero {
    position: relative;
    overflow: visible;
}

.crm .hero-icon-wrapper {
    position: absolute;
    right: 30px;
    top: 20px;
    opacity: 0.7;
}

/* ============================================
   FORMULARIOS
   ============================================ */
.crm .form-group-modern label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm .crm-label {
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    display: block;
}

.crm .crm-input {
    border: 2px solid #e8ecf1;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fafbfc;
}

    .crm .crm-input:focus {
        outline: none;
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* ============================================
   TOGGLE SWITCH MODERNO
   ============================================ */
.crm .toggle-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.crm .toggle-checkbox {
    display: none;
}

.crm .toggle-label {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    background: #e0e0e0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.crm .toggle-switch {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.crm .toggle-checkbox:checked + .toggle-label {
    background: #52c41a;
}

    .crm .toggle-checkbox:checked + .toggle-label .toggle-switch {
        left: 25px;
    }

/* ============================================
   TABS NAVIGATION
   ============================================ */
.crm .crm-tabs-premium .nav-tabs {
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
}

    .crm .crm-tabs-premium .nav-tabs > li {
        margin-bottom: -1px;
    }

        .crm .crm-tabs-premium .nav-tabs > li > a {
            border: none !important;
            border-radius: 0;
            padding: 13px 20px;
            font-weight: 500;
            font-size: 13px;
            letter-spacing: 0.02em;
            color: #94a3b8;
            position: relative;
            background: transparent;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.15s ease;
        }

            .crm .crm-tabs-premium .nav-tabs > li > a i {
                font-size: 13px;
                opacity: 0.65;
            }

            .crm .crm-tabs-premium .nav-tabs > li > a:hover {
                background: transparent;
                color: #475569;
            }

                .crm .crm-tabs-premium .nav-tabs > li > a:hover i {
                    opacity: 1;
                }

        .crm .crm-tabs-premium .nav-tabs > li.active > a,
        .crm .crm-tabs-premium .nav-tabs > li.active > a:hover,
        .crm .crm-tabs-premium .nav-tabs > li.active > a:focus {
            color: #1e293b;
            font-weight: 600;
            background: transparent;
            border: none !important;
            border-bottom: 2px solid #667eea !important;
        }

            .crm .crm-tabs-premium .nav-tabs > li.active > a i {
                opacity: 1;
                color: #667eea;
            }

/* Tab Content */
.crm .tab-content-modern {
    padding-top: 20px;
    /*min-height: 200px;*/
    /*animation: fadeInContent 0.3s ease;*/
}

/* Empty State */
.crm .empty-state {
    text-align: center;
    padding: 20px 20px;
}

    .crm .empty-state i {
        font-size: 64px;
        color: #ddd;
        margin-bottom: 20px;
    }

    .crm .empty-state h4 {
        font-size: 18px;
        font-weight: 600;
        color: #666;
        margin-bottom: 8px;
    }

    .crm .empty-state p {
        color: #999;
        margin-bottom: 24px;
    }

/* ============================================
   NAVEGACIÓN CL-EFFECT-9 - COMPACTA
   ============================================ */
.crm .full-nav {
    display: flex;
    width: 100%;
}

    .crm .full-nav a {
        flex: 1;
        text-align: center;
        position: relative;
    }

.crm .cl-effect-9 a {
    padding: 10px 8px 10px 8px;
    margin: 0;
    cursor: pointer;
    display: block;
}

    .crm .cl-effect-9 a span:first-child {
        display: block;
        font-weight: 600;
        font-size: 0.75rem;
        /*color: #475569;*/
        /*line-height: 1.2;*/
    }

    .crm .cl-effect-9 a:hover::before {
        height: 4px;
        opacity: 1;
    }

    .crm .cl-effect-9 a:hover span:last-child {
        opacity: 1;
        transform: translateY(0);
    }

    .crm .cl-effect-9 a.link-active::before {
        height: 4px;
        opacity: 1;
    }

    .crm .cl-effect-9 a.link-active span:first-child {
        color: #0f172a;
        font-weight: 700;
    }

    .crm .cl-effect-9 a.link-active span:last-child {
        opacity: 1;
        transform: translateY(0);
        color: #64748b;
    }

    .crm .cl-effect-9 a::after {
        background: none !important;
    }


/* Colores de navegación */
.link-dashboard::before {
    background: #007AFF !important;
}

.link-tareas::before {
    background: #007AFF !important;
}

.link-emails::before {
    background: #007AFF !important;
}

.link-contactos::before {
    background: #007AFF !important;
}

.link-opor::before {
    background: #007AFF !important;
}

.link-leads::before {
    background: #007AFF !important;
}

nav.links a {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .cl-effect-9 a {
        padding: 8px 4px 4px 4px;
    }

        .cl-effect-9 a span:first-child {
            font-size: 0.65rem;
        }

        .cl-effect-9 a span:last-child {
            display: none;
        }
}

/* ============================================
   ESTILOS OPORTUNIDADES
   ============================================ */
.crm body.modal-open {
    position: fixed !important;
    width: 100% !important;
    overflow-y: scroll !important;
}

.crm .product-extra {
    margin-top: 6px;
    padding: 6px 10px;
    background: #f8f9fa;
    border-left: 3px solid #667eea;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
}

    .crm .product-extra i {
        color: #667eea;
        margin-right: 4px;
    }

.crm .quantity-badge {
    display: inline-block;
    background: #e8f4fd;
    color: #1976d2;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
}

.crm .discount-badge {
    display: inline-block;
    background: #fff3e0;
    color: #f57c00;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}

.crm .subtotal-value {
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 700;
}

/* Footer con totales */
.crm .totals-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.crm .totals-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm .summary-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
}

    .crm .summary-info i {
        color: #667eea;
        width: 16px;
    }

.crm .totals-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 300px;
}

.crm .total-row-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

    .crm .total-row-item.main-total {
        border-top: 2px solid #667eea;
        padding-top: 12px;
        margin-top: 8px;
    }

    .crm .total-row-item .total-label {
        color: #666;
        font-weight: 600;
    }

    .crm .total-row-item .total-value {
        color: #1a1a1a;
        font-weight: 700;
        font-size: 15px;
    }

    .crm .total-row-item.main-total .total-label {
        color: #667eea;
        font-size: 16px;
    }

    .crm .total-row-item.main-total .total-value {
        color: #667eea;
        font-size: 22px;
    }

.crm .discount-value {
    color: #f57c00 !important;
}

/* Mejora en hover de filas */
.crm .product-row {
    transition: all 0.2s ease;
    /*animation: slideInRow 0.3s ease;*/
}

    .crm .product-row:hover {
        background: #f8f9ff !important;
    }

/* ============================================
   TABLA DE ESTADOS DEL PIPELINE
   ============================================ */


.crm .tableFixHead {
    overflow: auto;
    max-height: 250px !important;
}

.crm .tableFixHead {
    height: 100%;
    /*max-height: 450px !important;*/
    max-height: 60vh !important;
    min-height: 100px !important;
}



    .crm .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.crm .crm-pipeline-table tbody .pipeline-row {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    animation: fadeInRow 0.3s ease;
}

    .crm .crm-pipeline-table tbody .pipeline-row:hover {
        /*transform: translateY(-2px);*/
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }

.crm .crm-pipeline-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}



/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .col-lg-offset-2 {
        margin-left: 0;
    }

    .crm .crm-header-actions {
        justify-content: flex-start;
    }

    .crm .hero-icon-wrapper {
        display: none;
    }

    .crm-modern-header {
        padding: 15px 0;
    }

    .crm-header-title h1 {
        font-size: 22px;
    }

    .crm-header-actions {
        margin-top: 15px;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .crm .btn-ghost-success,
    .crm .btn-ghost-danger,
    .crm .btn-ghost-info {
        width: 100%;
        margin-bottom: 8px;
    }

    .crm .crm-entity-card-modern .panel-body {
        padding: 20px 15px;
    }

    .crm .crm-entity-title {
        font-size: 15px;
        min-height: auto;
    }

    .crm .crm-entity-description {
        min-height: auto;
        margin-bottom: 10px;
    }

    .crm .crm-category-header-modern {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .crm .crm-category-icon-wrapper {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .crm .crm-category-info h3 {
        font-size: 20px;
    }

    .crm-modern-card .card-body {
        padding: 16px;
    }

    .btn-ghost-success,
    .btn-ghost-danger {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ============================================
   ANIMACIONES
   ============================================ */
/*@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}*/

.crm .crm-entity-category {
    animation: fadeInUp 0.6s ease-out;
}

.crm-modern-card {
    animation: slideInUp 0.4s ease;
}

    .crm-modern-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .crm-modern-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .crm-modern-card:nth-child(3) {
        animation-delay: 0.3s;
    }

/* ============================================
   MODAL ENVIAR EMAIL
   ============================================ */

.modal-body-email {
    padding: 16px;
}

    .modal-body-email .form-group {
        margin-bottom: 12px;
    }

    .modal-body-email .crm-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    .modal-body-email .form-control {
        font-size: 0.875rem;
        padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }

        .modal-body-email .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        }

    .modal-body-email textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }

.modal-footer-email {
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Adjuntos */
.email-adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.btn-adjuntar {
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 0.75rem;
}

    .btn-adjuntar:hover {
        border-color: #667eea;
        color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

.adjuntos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adjunto-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #eef2ff;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #475569;
}

    .adjunto-item i {
        color: #667eea;
    }

.btn-quitar-adjunto {
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

    .btn-quitar-adjunto:hover {
        color: #ef4444;
    }


/* ============================================
   FIX Z-INDEX TINYMCE EN MODALES
   ============================================ */
.tox-tinymce-aux {
    z-index: 10600 !important;
}

.tox.tox-silver-sink.tox-tinymce-aux {
    z-index: 10600 !important;
}

/* Asegura que los menús y dropdowns de TinyMCE aparezcan sobre el modal */
.tox .tox-menu,
.tox .tox-dialog,
.tox .tox-dialog-wrap,
.tox .tox-pop,
.tox .tox-autocompleter {
    z-index: 10600 !important;
}



/* ============================================
   MODAL ESTADOS DEL PIPELINE
   ============================================ */


/* Estilos para Pipeline Estados en Modal */
.pipeline-estados-container {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.pipeline-estados-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}

.pipeline-estado-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    padding: 12px 8px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .pipeline-estado-item:hover {
        border-color: #1e40af;
        background: #eef2ff;
        /*transform: translateY(-2px);*/
    }

.pipeline-estado-activo {
    border-color: #1e40af !important;
    background: #1e40af !important;
    color: white;
}

    .pipeline-estado-activo .pipeline-estado-numero {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .pipeline-estado-activo .pipeline-estado-nombre {
        color: white;
    }

.pipeline-estado-numero {
    width: 28px;
    height: 28px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: #475569;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.pipeline-estado-nombre {
    font-size: 0.7rem;
    font-weight: 600;
    color: #334155;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    max-height: 2.6em;
}


/* Scrollbar para la lista horizontal */
.pipeline-estados-list::-webkit-scrollbar {
    height: 6px;
}

.pipeline-estados-list::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 3px;
}

.pipeline-estados-list::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

    .pipeline-estados-list::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }




.modal-alta-contactos {
    display: flex !important;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

    .modal-alta-contactos .modal-dialog {
        width: 90vw;
        max-width: 1200px;
        margin: 0 auto;
    }

    .modal-alta-contactos .modal-content {
        border-radius: 14px;
        border: none;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
        /*overflow: hidden;*/
    }


/* Root modal */
.modal-carga-nota {
    display: flex !important;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

    .modal-carga-nota .modal-content {
        border-radius: 10px;
        padding: 5px 10px 5px 10px;
        border: none;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
        overflow: hidden;
    }



/* Modales anidados - z-index progresivo  ========== */
.modal {
    z-index: 10000 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal ~ .modal {
    z-index: 1060 !important;
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1055 !important;
}

.sweet-alert {
    z-index: 100000 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}

.sweet-overlay {
    z-index: 100000 !important;
    /*border: 2px solid red;*/
}

.modal-dialog .crm-modern-header {
    margin-bottom: 0px !important;
}

.modal-dialog .crm-modern-card {
    margin-bottom: 0px !important;
}


/* ============================================
        INBOX - SPLIT PANEL
        ============================================ */

.crm .crm-inbox {
    display: grid;
    grid-template-columns: 360px 1fr;
    /*height: 600px;*/
    min-height: 400px;
    height: 70vh;
    /*max-height: 600px;*/
    background: #fff;
    border-top: 1px solid #e8ecf1;
}

/* List */
.crm .crm-inbox-list {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e8ecf1;
    background: #fff;
    overflow: hidden;
}

.crm .crm-inbox-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e8ecf1;
    flex-shrink: 0;
}

.crm .crm-inbox-list-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
}

.crm .crm-inbox-list-count {
    font-size: 0.6875rem;
    font-weight: 700;
    background: #0063ca;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.crm .crm-inbox-list-scroll {
    flex: 1;
    overflow-y: auto;
}

/* List item */
.crm .crm-inbox-item {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
    padding-bottom: 8px;
}

    .crm .crm-inbox-item:hover {
        background: #f8fafc;
    }

.crm .crm-inbox-item--selected {
    background: #eff6ff !important;
    box-shadow: inset 3px 0 0 #0063ca;
}

.crm .crm-inbox-item--unread .crm-inbox-item-from,
.crm .crm-inbox-item--unread .crm-inbox-item-subject {
    font-weight: 700;
    color: #0f172a;
}

.crm .crm-inbox-item--unread .crm-inbox-avatar {
    background: #0063ca;
    color: #fff;
}

/* Avatar */
.crm .crm-inbox-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Item content */
.crm .crm-inbox-item-body {
    flex: 1;
    min-width: 0;
}

.crm .crm-inbox-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1px;
}

.crm .crm-inbox-item-from {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm .crm-inbox-item-date {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

.crm .crm-inbox-item-subject {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*margin-bottom: 2px;*/
}

.crm .crm-inbox-item-preview {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm .crm-inbox-item-tags {
    margin-top: 4px;
    display: flex;
    gap: 6px;
}

.crm .crm-inbox-item-tag {
    font-size: 0.625rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Detail */
.crm .crm-inbox-detail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar */
.crm .crm-inbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 1px solid #e8ecf1;
    background: #f8fafc;
    flex-shrink: 0;
}

.crm .crm-inbox-toolbar-left,
.crm .crm-inbox-toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
}

.crm .crm-inbox-toolbar-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    transition: all 0.12s ease;
}

    .crm .crm-inbox-toolbar-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.crm .crm-inbox-toolbar-btn--danger:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* PARA BOTONES GENERICOS */

.crm .crm-generic-button {
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.12s ease;
}

.crm .crm-generic-button-primary {
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.12s ease;
    color: #2563eb;
    background: #dbeafe;
    border: none;
}

    .crm .crm-generic-button-primary:hover {
        background: #2563eb;
        color: white;
    }


.crm .crm-generic-button-primary--active {
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.12s ease;
    color: #2563eb;
    background: #2563eb;
    color: white;
}


.crm .crm-generic-button-danger--active {
    height: 34px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.12s ease;
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}




.crm .crm-generic-button-cancel:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.crm .crm-inbox-toolbar-action {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s ease;
}

.crm .crm-inbox-toolbar-action--lead {
    background: #eff6ff;
    color: #2563eb;
}

    .crm .crm-inbox-toolbar-action--lead:hover {
        background: #dbeafe;
    }

.crm .crm-inbox-toolbar-action--opor {
    background: #f0fdf4;
    color: #16a34a;
}

    .crm .crm-inbox-toolbar-action--opor:hover {
        background: #dcfce7;
    }

.crm .crm-inbox-toolbar-action--primary {
    background: #eff6ff;
    color: #2563eb;
}

    .crm .crm-inbox-toolbar-action--primary:hover {
        background: #2563eb;
        color: white;
    }



/* Detail header */
.crm .crm-inbox-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 0 24px;
    flex-shrink: 0;
}

.crm .crm-inbox-detail-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0063ca;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.crm .crm-inbox-detail-sender {
    flex: 1;
    min-width: 0;
}

.crm .crm-inbox-detail-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.crm .crm-inbox-detail-email {
    font-size: 0.75rem;
    color: #64748b;
}

.crm .crm-inbox-detail-date {
    /*font-size: 0.6875rem;*/
    color: #94a3b8;
    flex-shrink: 0;
}

.crm .crm-inbox-detail-subject {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 14px 24px 0 24px;
    line-height: 1.4;
    flex-shrink: 0;
}

.crm .crm-inbox-detail-meta {
    display: flex;
    gap: 16px;
    padding: 8px 24px;
    /*font-size: 0.6875rem;*/
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.crm .crm-inbox-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.7;
}

/* Placeholder */
.crm .crm-inbox-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.crm .crm-inbox-placeholder-inner {
    text-align: center;
}

    .crm .crm-inbox-placeholder-inner i {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 12px;
    }

    .crm .crm-inbox-placeholder-inner h4 {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #475569;
        margin: 0 0 4px 0;
    }

    .crm .crm-inbox-placeholder-inner p {
        font-size: 0.8125rem;
        color: #94a3b8;
        margin: 0;
    }

/* Scrollbar */
.crm .crm-inbox-list-scroll::-webkit-scrollbar,
.crm .crm-inbox-detail-body::-webkit-scrollbar {
    width: 6px;
}

.crm .crm-inbox-list-scroll::-webkit-scrollbar-track,
.crm .crm-inbox-detail-body::-webkit-scrollbar-track {
    background: transparent;
}

.crm .crm-inbox-list-scroll::-webkit-scrollbar-thumb,
.crm .crm-inbox-detail-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}

    .crm .crm-inbox-list-scroll::-webkit-scrollbar-thumb:hover,
    .crm .crm-inbox-detail-body::-webkit-scrollbar-thumb:hover {
        background: #cbd5e1;
    }

@media (max-width: 992px) {
    .crm .crm-inbox {
        grid-template-columns: 1fr;
        height: auto;
    }

    .crm .crm-inbox-list {
        border-right: none;
        border-bottom: 1px solid #e8ecf1;
    }

    .crm .crm-inbox-list-scroll {
        max-height: 300px;
    }

    .crm .crm-inbox-toolbar-right {
        display: none;
    }

    .crm .crm-inbox-detail-body {
        max-height: 350px;
    }
}

/* ============================================================
   Modern ui-select styles — .ui-select-enhanced
   ============================================================ */

/* Container */
.crm .ui-select-enhanced.select2.ui-select-container {
    width: 100%;
    background: white;
}

/* The trigger button (select2 theme) */
.crm .ui-select-enhanced.select2 > .select2-choice.ui-select-match {
    background: white;
}



    .crm .ui-select-enhanced.select2.select2-dropdown-open > .select2-choice.ui-select-match,
    .crm .ui-select-enhanced.select2.select2-container-active > .select2-choice.ui-select-match,
    .crm .ui-select-enhanced.select2 > .select2-choice.ui-select-match:focus {
        border-color: #4f8ef7;
        box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15);
        outline: none;
    }

/* Caret arrow */
.crm .ui-select-enhanced.select2 > .select2-choice .select2-arrow {
    border: none;
    background: white;
    padding-top: 2px;
    margin-right: 5px;
}

/* Cruz de limpiar: select2 la fija en top:8px (pensado para 26px de alto); centrada
   en el alto real queda a la par de la flecha. -7px = centro de la cruz en el sprite. */
.crm .ui-select-enhanced.select2 > .select2-choice abbr {
    top: 50%;
    margin-top: -7px;
}

/* select2 saca el border-top del dropdown para que empalme con el input; si el
   dropdown es más ancho (sdt-dropdown-xxx) el tramo que sobresale queda sin borde. */
.ui-select-enhanced.select2 .ui-select-dropdown.select2-drop-active {
    border-top: 1px solid #5897fb;
}

/* Search input inside dropdown */
.ui-select-enhanced.select2 .ui-select-dropdown .select2-search {
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e8ecf1;
}

    .ui-select-enhanced.select2 .ui-select-dropdown .select2-search input.ui-select-search {
        height: 32px;
        border: 1.5px solid #d1d9e6;
        border-radius: 5px;
        padding: 0 8px;
        font-size: 12px;
        background: #ffffff;
        color: #374151;
        box-shadow: none;
        transition: border-color 0.15s ease;
        width: 100%;
    }

        .ui-select-enhanced.select2 .ui-select-dropdown .select2-search input.ui-select-search:focus {
            border-color: #4f8ef7;
            box-shadow: 0 0 0 1px rgba(79, 142, 247, 0.8);
            outline: none;
        }

/* The trigger button (select2 theme) */
.crm .ui-select-enhanced.select2 > .select2-choice.ui-select-match {
    background: white;
    border-color: #e2e8f0;
    border: 1px solid #ccc;
}

/* ---- Soporte wrapper de directiva (sdt-select-async) ---- */
.crm .ui-select-enhanced .select2 > .select2-choice.ui-select-match {
    background: white;
    border-color: #e2e8f0;
    border: 1px solid #ccc;
}

/* Options list */
.ui-select-enhanced.select2 .ui-select-dropdown .select2-results {
    max-height: 220px;
    padding: 4px 0;
    margin: 0;
    overflow-y: auto;
}

    .ui-select-enhanced.select2 .ui-select-dropdown .select2-results::-webkit-scrollbar {
        width: 5px;
    }

    .ui-select-enhanced.select2 .ui-select-dropdown .select2-results::-webkit-scrollbar-thumb {
        background: #d1d9e6;
        border-radius: 4px;
    }


/* ---- Soporte wrapper de directiva (sdt-select-async) ----
   La directiva usa replace:true, así que la clase ui-select-enhanced cae en el
   <div> contenedor, no en el <ui-select>. Estos selectores descendientes
   reaplican el estilo cuando la clase está en el wrapper (sin romper el uso
   directo sobre <ui-select>, que sigue usando los selectores compuestos). */
.crm .ui-select-enhanced .select2.ui-select-container {
    width: 100%;
    background: white;
}

.crm .ui-select-enhanced .select2 > .select2-choice.ui-select-match {
    background: white;
}

    .crm .ui-select-enhanced .select2.select2-dropdown-open > .select2-choice.ui-select-match,
    .crm .ui-select-enhanced .select2.select2-container-active > .select2-choice.ui-select-match,
    .crm .ui-select-enhanced .select2 > .select2-choice.ui-select-match:focus {
        border-color: #4f8ef7;
        box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15);
        outline: none;
    }

.crm .ui-select-enhanced .select2 > .select2-choice .select2-arrow {
    border: none;
    background: white;
    padding-top: 2px;
    margin-right: 5px;
}

.crm .ui-select-enhanced .select2 > .select2-choice abbr {
    top: 50%;
    margin-top: -7px;
}

.ui-select-enhanced .select2 .ui-select-dropdown.select2-drop-active {
    border-top: 1px solid #5897fb;
}

.ui-select-enhanced .select2 .ui-select-dropdown .select2-search {
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e8ecf1;
}

    .ui-select-enhanced .select2 .ui-select-dropdown .select2-search input.ui-select-search {
        height: 32px;
        border: 1.5px solid #d1d9e6;
        border-radius: 5px;
        padding: 0 8px;
        font-size: 12px;
        background: #ffffff;
        color: #374151;
        box-shadow: none;
        transition: border-color 0.15s ease;
        width: 100%;
    }

        .ui-select-enhanced .select2 .ui-select-dropdown .select2-search input.ui-select-search:focus {
            border-color: #4f8ef7;
            box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.12);
            outline: none;
        }

.ui-select-enhanced .select2 .ui-select-dropdown .select2-results {
    max-height: 220px;
    padding: 4px 0;
    margin: 0;
    overflow-y: auto;
}

    .ui-select-enhanced .select2 .ui-select-dropdown .select2-results::-webkit-scrollbar {
        width: 5px;
    }

    .ui-select-enhanced .select2 .ui-select-dropdown .select2-results::-webkit-scrollbar-thumb {
        background: #d1d9e6;
        border-radius: 4px;
    }


/* ---- FILTER BAR ---- */
.crm .crm-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
}

/*.crm .crm-filter-search {*/
/*position: relative;
    flex: 1;*/
/*max-width: 360px;*/
/*}*/

.crm .crm-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8125rem;
}

.crm .crm-search-input {
    padding-left: 32px !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    height: 36px;
}

    .crm .crm-search-input:focus {
        border-color: #0063ca;
        box-shadow: 0 0 0 2px rgba(0, 99, 202, 0.08);
    }

/* ---- TABLE WRAP ---- */
.crm .crm-table-wrap {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    overflow: hidden;
}

.crm .crm-table-clean thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e8ecf1;
}

.crm .crm-table-clean tbody td {
    padding: 10px 16px;
    font-size: 0.8125rem;
    border-bottom: 1px solid #f1f5f9;
}

.crm .crm-table-clean tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

    .crm .crm-table-clean tbody tr:hover {
        background: #f8fafc;
    }

    .crm .crm-table-clean tbody tr:last-child td {
        border-bottom: none;
    }

/* Cell types */
.crm .crm-cell-id {
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.crm .crm-cell-primary {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.8125rem;
}

.crm .crm-cell-secondary {
    color: #475569;
}

.crm .crm-cell-date {
    color: #64748b;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Tag chip */
.crm .crm-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Progress bar cell */
.crm .crm-progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm .crm-progress-track {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.crm .crm-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.crm .crm-progress-low {
    background: #f87171;
}

.crm .crm-progress-mid {
    background: #facc15;
}

.crm .crm-progress-high {
    background: #34d399;
}

.crm .crm-progress-text {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #475569;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cell helpers */
.crm .crm-cell-sub {
    display: block;
    font-size: 0.6875rem;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.3;
}

.crm .crm-cell-icon {
    color: #94a3b8;
    font-size: 0.6875rem;
    margin-right: 4px;
}

/* Days badge (tareas) */
.crm .crm-days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crm .crm-days-overdue {
    background: #fef2f2;
    color: #dc2626;
}

.crm .crm-days-today {
    background: #fffbeb;
    color: #d97706;
}

.crm .crm-days-ok {
    background: #f0fdf4;
    color: #16a34a;
}

/* ---- LOADING STATE ---- */
.crm .crm-loading-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #64748b;
}

    .crm .crm-loading-state p {
        margin-top: 0.75rem;
    }

@media (max-width: 768px) {
    .crm .crm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .crm .crm-filter-search {
        max-width: 100%;
    }

    .crm .crm-filter-checks {
        flex-wrap: wrap;
        gap: 8px;
    }
}


/* ---- esto es del nav del mainPanel ---- */
.crm .crm-main-nav {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 20px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 10px;
    padding: 0px;
    padding: 0 0px 0px 0px;
}

.crm .crm-nav-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    justify-content: center;
    padding: 0px;
}

    .crm .crm-nav-tabs a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 12px 18px;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #64748b;
        text-decoration: none;
        white-space: nowrap;
        border-bottom: 1px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .crm .crm-nav-tabs a:hover {
            color: #1e40af;
            background: #f8fafc;
            border-bottom-color: #bfdbfe;
        }

        .crm .crm-nav-tabs a.active {
            color: #1e40af;
            font-weight: 600;
            border-bottom-color: #2563eb;
        }

            .crm .crm-nav-tabs a.active:hover {
                background: #f8fafc;
            }

        .crm .crm-nav-tabs a i {
            font-size: 0.8125rem;
            opacity: 0.75;
        }

        .crm .crm-nav-tabs a.active i {
            opacity: 1;
        }

/* ---- KPI CARDS ---- */
.crm .crm-kpi-row {
    margin-bottom: 20px;
}

.crm .crm-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .crm .crm-kpi-card:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,0.07);
        transform: translateY(-2px);
    }

.crm .crm-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.crm .crm-kpi-data {
    display: flex;
    flex-direction: column;
}

.crm .crm-kpi-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.crm .crm-kpi-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}


/* KPI color variants */
.crm .crm-kpi-danger .crm-kpi-icon {
    background: #fef2f2;
    color: #dc2626;
}

.crm .crm-kpi-warning .crm-kpi-icon {
    background: #fffbeb;
    color: #d97706;
}

.crm .crm-kpi-primary .crm-kpi-icon {
    background: #eff6ff;
    color: #2563eb;
}

.crm .crm-kpi-info .crm-kpi-icon {
    background: #f0fdf4;
    color: #16a34a;
}

/* ---- DASHBOARD SECTIONS (Oportunidades / Prioridades) ---- */
.crm .crm-dash-section {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.crm .crm-dash-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px 0;
    margin-bottom: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    background: transparent;
}

    .crm .crm-dash-section-header::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }

    .crm .crm-dash-section-header i {
        width: 28px;
        height: 28px;
        background: #eff6ff;
        color: #2563eb;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

.crm .crm-dash-section-body {
    padding: 16px;
}

    .crm .crm-dash-section-body.no-padding {
        padding: 0;
    }

.crm .crm-dash-row {
    cursor: pointer;
}

.crm .crm-dash-row-count {
    width: 50px;
    text-align: center;
}

.crm .crm-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #0063ca;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8125rem;
    background: #eff6ff;
    color: #2563eb;
}

.crm .crm-dash-row-arrow {
    width: 30px;
    text-align: right;
    color: #cbd5e1;
    font-size: 0.75rem;
}


/* Upload Queue Panel */
.upload-queue-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.upload-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ffe69c;
}

    .upload-queue-header h5 {
        margin: 0;
        color: #856404;
        font-weight: 600;
    }

.upload-queue-actions {
    display: flex;
    gap: 8px;
}

.upload-queue-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ffe69c;
}

.upload-item-icon i {
    color: #3b82f6;
}

.upload-item-details {
    flex: 1;
}

    .upload-item-details strong {
        display: block;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .upload-item-details small {
        color: #64748b;
        font-size: 0.75rem;
    }

.upload-item .progress {
    margin-top: 8px;
    margin-bottom: 0;
    height: 6px;
}


/* Table Styles */
.archivo-nombre-cell strong {
    display: block;
    color: #0f172a;
    margin-bottom: 4px;
}

.file-meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .file-meta .badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

.file-size-badge {
    display: inline-block;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.usuario-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

    .usuario-cell i {
        color: #64748b;
    }

.badge-info {
    background-color: #3b82f6;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-icon-primary {
    background-color: #eff6ff;
    color: #3b82f6;
}

    .btn-icon-primary:hover {
        background-color: #3b82f6;
        color: white;
    }

/* Badge in tab heading */
uib-tab-heading .badge {
    margin-left: 5px;
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* File upload button */
.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        /*filter: alpha(opacity=0);*/
        opacity: 0;
        outline: none;
        cursor: inherit;
        display: block;
    }

/* ── Skeleton loader (crm_clientes) ─────────────────────────── */
@keyframes crm-shimmer {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

.crm-skeleton-card {
    pointer-events: none;
}

.crm-skeleton-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.crm-skeleton-tab {
    width: 110px;
    height: 44px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
    background-size: 600px 100%;
    animation: crm-shimmer 1.4s infinite linear;
}

.crm-skeleton-label {
    height: 12px;
    width: 55%;
    border-radius: 4px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
    background-size: 600px 100%;
    animation: crm-shimmer 1.4s infinite linear;
}

.crm-skeleton-input {
    height: 34px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
    background-size: 600px 100%;
    animation: crm-shimmer 1.4s infinite linear;
}