/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   CRM DASHBOARD - CÓDIGO CSS COMPLETO Y UNIFICADO
   ========================================================================== */

/* 1. Contenedor Principal */
.diam-crm-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.diam-crm-header {
    margin-bottom: 20px;
}

.diam-crm-header h2 {
    color: #0a4b85; /* Azul corporativo Diamante */
    margin: 0 0 15px 0;
    font-size: 1.8rem;
    font-weight: 700;
}

/* 2. Barra de Controles (Buscador y Selector de Columnas) */
.diam-controls-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.diam-search-box {
    flex-grow: 1;
    max-width: 400px;
}

.diam-search-box input {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.diam-search-box input:focus {
    border-color: #0a4b85;
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 75, 133, 0.1);
}

.diam-cols-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #475569;
    font-weight: 600;
}

.diam-cols-selector select {
    border: none;
    background: transparent;
    font-weight: bold;
    color: #0a4b85; 
    outline: none;
    cursor: pointer;
    font-size: 1rem;
}

/* 3. Pestañas (Tabs de segmentación) */
.diam-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    overflow-x: auto;
}

.diam-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.diam-tab-btn:hover {
    background: #f1f5f9;
    color: #0a4b85;
}

.diam-tab-btn.active {
    background: #0a4b85;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(10, 75, 133, 0.2);
}

/* 4. Grid de Tarjetas (La magia de la distribución) */
.diam-cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
    gap: 15px;
}

/* 5. Diseño Estructural de la Tarjeta */
.diam-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 5px solid var(--status-color, #0a4b85); 
    display: flex; /* Esto es lo que faltaba para que no se rompiera */
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    border-left: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.diam-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.diam-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.diam-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diam-date {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
}

/* 6. Textos Interiores adaptables a múltiples columnas */
.diam-card-body {
    padding: 15px; 
    flex-grow: 1;
    overflow: hidden; 
}

/* 1. Tamaño del nombre en la tarjeta normal (Cuadrícula) */
.diam-lead-name {
    margin: 0 0 8px 0; /* Reduje un poco el margen inferior para que se vea más compacto */
    font-size: 0.85rem; /* ¡Listo! Exactamente el mismo tamaño que los demás datos */
    color: #1e293b;
    font-weight: 800; /* Lo hacemos un poco más "gordito" (negritas) para que no se pierda */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.diam-lead-info {
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 7. Pie de la tarjeta y Botones */
.diam-card-footer {
    padding: 15px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.diam-btn-ver {
    width: 100%;
    background: #ffffff;
    color: #0a4b85;
    border: 1px solid #0a4b85;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.diam-btn-ver:hover {
    background: #0a4b85;
    color: #ffffff;
}

/* 8. Responsivo (Móviles y Tablets) */
@media (max-width: 1024px) {
    .diam-cards-grid {
        /* Fuerza un máximo de 4 en tablet, ignorando el selector para que no se rompa */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .diam-controls-row {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .diam-search-box {
        max-width: 100%;
    }
    .diam-cols-selector {
        justify-content: center;
    }
    .diam-cards-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================================================
   CONTROLES DE VISTA (CUADRÍCULA VS LISTA)
   ========================================================================== */
.diam-view-toggles {
    display: flex;
    gap: 5px;
    background: #ffffff;
    padding: 5px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.view-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    font-size: 1.1rem;
    transition: 0.2s;
}

.view-btn:hover {
    color: #0a4b85;
}

.view-btn.active {
    background: #0a4b85;
    color: #ffffff;
}

/* ==========================================================================
   ESTRUCTURA DE VISTA LISTA
   ========================================================================== */
.diam-cards-grid.list-view {
    grid-template-columns: 1fr !important; /* Fuerza 1 sola columna */
}

.diam-cards-grid.list-view .diam-card {
    flex-direction: row; /* Acuesta los elementos horizontalmente */
    align-items: center;
    border-top: 1px solid #f1f5f9;
    border-left: 5px solid var(--status-color, #0a4b85); /* La barra de color pasa a la izquierda */
}

.diam-cards-grid.list-view .diam-card-header {
    border-bottom: none;
    border-right: 1px solid #f1f5f9;
    flex-direction: column;
    justify-content: center;
    min-width: 140px;
    gap: 8px;
}

.diam-cards-grid.list-view .diam-card-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 15px 25px;
}

.diam-cards-grid.list-view .diam-lead-name {
    margin: 0;
    min-width: 180px; /* Un poco más pequeño para que no empuje lo demás */
    font-size: 0.9rem; /* Ligeramente ajustado para que embone perfecto en la fila */
}

.diam-cards-grid.list-view .diam-lead-info {
    margin: 0;
    min-width: 180px;
}

.diam-cards-grid.list-view .diam-card-footer {
    border-top: none;
    background: transparent;
    margin-left: auto; /* Empuja el botón hasta la derecha */
    padding-left: 0;
}

/* En móviles, la vista lista se vuelve a apilar para que no se rompa */
@media (max-width: 768px) {
    .diam-cards-grid.list-view .diam-card {
        flex-direction: column;
        align-items: stretch;
        border-left: 1px solid #f1f5f9;
        border-top: 5px solid var(--status-color, #0a4b85);
    }
    .diam-cards-grid.list-view .diam-card-header {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }
    .diam-cards-grid.list-view .diam-card-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .diam-cards-grid.list-view .diam-card-footer {
        margin-left: 0;
        border-top: 1px solid #f1f5f9;
        background: #f8fafc;
    }
}