/* ==========================
DASHBOARD
========================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-bottom:35px;
}

.dashboard-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s ease;
}

.dashboard-card:hover{

    transform:translateY(-5px);
}

.dashboard-card-full{

}

.dashboard-card-full:hover{

    transform:translateY(-5px);
}

.dashboard-card i{

    font-size:2rem;

    color:var(--dorado);

    margin-bottom:15px;
}

.dashboard-card h3{

    font-size:2rem;

    color:var(--vino);

    margin-bottom:5px;
}

.dashboard-card span{

    color:var(--muted);
}

.counter{

    font-size:2.5rem;

    font-weight:800;

    color:var(--vino);

    transition:.3s ease;
}


/* ==========================
CONTENEDOR DE GRÁFICAS
========================== */

.dashboard-actions{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(420px,1fr));

    gap:25px;

    margin-bottom:35px;

    justify-items:center;

    align-items:start;
}


/* ==========================
ACCIONES
========================== */

.dashboard-action{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

    background:#fff;

    border-radius:24px;

    padding:25px;

    box-shadow:var(--shadow);

    transition:.3s ease;
}

.dashboard-action:hover{

    transform:translateY(-5px);
}

.dashboard-action i{

    font-size:2rem;

    color:var(--vino);
}

.dashboard-action h4{

    color:var(--text);

    margin-bottom:5px;
}

.dashboard-action p{

    color:var(--muted);

    margin:0;
}


/* ==========================
GRÁFICAS
========================== */

.chart-card{

    width:100%;

    max-width:650px;

    margin:auto;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border-radius:32px;

    padding:35px;

    box-shadow:
        0 20px 50px rgba(15,23,42,.08);

    border:1px solid rgba(255,255,255,.4);

    overflow:hidden;
}

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:25px;
}

.chart-header h2{

    color:var(--vino);

    font-size:1.4rem;

    font-weight:700;
}

.chart-header span{

    color:var(--muted);

    font-size:.95rem;
}

.chart-wrapper{

    position:relative;

    width:320px;

    height:320px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;
}

.chart-wrapper canvas{

    max-width:100% !important;

    max-height:100% !important;
}

.chart-center{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    pointer-events:none;
}

.chart-center h3{

    font-size:3rem;

    color:var(--vino);

    font-weight:800;
}

.chart-center p{

    color:var(--muted);

    font-size:.9rem;
}


/* ==========================
LEYENDA
========================== */

.stats-grid{

    margin-top:30px;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

    justify-content:center;

    align-items:stretch;
}

.stat-pill{

    width:100%;

    min-height:25px;

    background:#fff;

    border-radius:18px;

    padding:6px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-shadow:
        0 10px 20px rgba(0,0,0,.04);

    border:1px solid #eef2f7;
}

.stat-left{

    display:flex;

    align-items:center;

    gap:10px;
}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    flex-shrink:0;
}

.dot-vino{

    background:var(--vino);
}

.dot-dorado{

    background:var(--dorado);
}

.dot-gris{

    background:#d5dbe5;
}

.dot-1{ background:#691b32; }
.dot-2{ background:#bc955b; }
.dot-3{ background:#7a203a; }
.dot-4{ background:#c6a16a; }
.dot-5{ background:#8b2542; }
.dot-6{ background:#cfaf7d; }
.dot-7{ background:#9d2b4b; }
.dot-8{ background:#d8bd90; }
.dot-9{ background:#b6345a; }
.dot-10{ background:#e2ccaa; }

.stat-pill strong{

    color:var(--text);
}


/* ==========================
DARK MODE
========================== */

body.dark-theme .dashboard-card,
body.dark-theme .dashboard-action,
body.dark-theme .chart-card{

    background:#181818;

    border:1px solid var(--border);
}

body.dark-theme .dashboard-card h3{

    color:var(--dorado);
}

body.dark-theme .dashboard-action h4{

    color:#fff;
}

body.dark-theme .dashboard-action p{

    color:#a1a1aa;
}

body.dark-theme .chart-header h2{

    color:var(--dorado);
}

body.dark-theme .chart-header span{

    color:#a1a1aa;
}

body.dark-theme .chart-center h3{

    color:var(--dorado);
}

body.dark-theme .chart-center p{

    color:#a1a1aa;
}

body.dark-theme .stat-pill{

    background:#202020;

    border-color:#2d2d2d;
}

body.dark-theme .stat-pill strong{

    color:#fff;
}

body.dark-theme .stat-left{

    color:#d4d4d8;
}

body.dark-theme .chart-card .fa-eye{
    color: #fff;
}


/* ==========================
TABLET
========================== */

@media(max-width:992px){

    .dashboard-actions{

        grid-template-columns:1fr;
    }

    .chart-card{

        max-width:700px;
    }
}


/* ==========================
MÓVIL
========================== */

@media(max-width:768px){

    .dashboard-actions{

        grid-template-columns:1fr;

        gap:20px;
    }

    .chart-card{

        width:100%;

        max-width:100%;

        padding:20px;

        border-radius:24px;
    }

    .chart-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .chart-wrapper{

        width:240px;

        height:240px;
    }

    .chart-center h3{

        font-size:2.2rem;
    }

    .stats-grid{

        grid-template-columns:1fr;

        gap:10px;
    }
}


/* ==========================
MÓVILES PEQUEÑOS
========================== */

@media(max-width:480px){

    .chart-wrapper{

        width:210px;

        height:210px;
    }

    .chart-center h3{

        font-size:2rem;
    }

    .chart-header h2{

        font-size:1.1rem;
    }

    .chart-header span{

        font-size:.85rem;
    }
}

.chart-card-full{

    max-width:1250px;

    margin:auto;

    background:#ffffff;

    border-radius:38px;

    padding:32px;

    border:1px solid rgba(188,149,91,.35);

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);
}

.chart-header-full{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;
}

.chart-icon-full{

    width:52px;

    height:52px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1.35rem;
}

.chart-title-full h2{

    color:var(--text);

    font-size:2rem;

    font-weight:800;
}

.chart-title-full p{

    color:var(--muted);

    margin-top:4px;
}

.chart-container-full{

    background:#fafafa;

    border-radius:28px;

    padding:25px 20px;
}

.chart-note-full{

    text-align:center;

    color:#737373;

    font-size:.78rem;

    margin-bottom:12px;
}

#grafica-full{

    width:100%;
}

@media(max-width:768px){

    .chart-card-full{

        padding:20px;

        border-radius:28px;
    }

    .chart-title-full h2{

        font-size:1.35rem;
    }
}

/* =========================================
DARK THEME
========================================= */

body.dark-theme .chart-card-full{

    background:#18181b;

    border:1px solid rgba(188,149,91,.25);

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);
}

body.dark-theme .chart-header-full{

    border-color:rgba(255,255,255,.08);
}

body.dark-theme .chart-icon-full{

    background:
        linear-gradient(
            135deg,
            var(--vino),
            var(--vino2)
        );

    box-shadow:
        0 10px 25px rgba(105,27,50,.35);
}

body.dark-theme .chart-title-full h2{

    color:#f4f4f5;
}

body.dark-theme .chart-title-full p{

    color:#a1a1aa;
}

body.dark-theme .chart-container-full{

    background:#27272a;

    border:1px solid rgba(255,255,255,.06);
}

body.dark-theme .chart-note-full{

    color:#a1a1aa;
}

/* Contenedor de ApexCharts */

body.dark-theme .apexcharts-canvas{

    background:transparent;
}

/* Etiquetas del eje X */

body.dark-theme .apexcharts-xaxis text{

    fill:#d4d4d8 !important;
}

/* Etiquetas del eje Y */

body.dark-theme .apexcharts-yaxis text{

    fill:#e4e4e7 !important;
}

/* Título del eje */

body.dark-theme .apexcharts-xaxis-title text{

    fill:#a1a1aa !important;
}

/* Líneas de la cuadrícula */

body.dark-theme .apexcharts-gridline{

    stroke:rgba(255,255,255,.08) !important;
}

/* Tooltip */

body.dark-theme .apexcharts-tooltip{

    background:#18181b !important;

    border:1px solid rgba(188,149,91,.25) !important;

    color:#f4f4f5 !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}

body.dark-theme .apexcharts-tooltip-title{

    background:#27272a !important;

    border-bottom:1px solid rgba(255,255,255,.06) !important;

    color:#f4f4f5 !important;
}

/* Toolbar de ApexCharts */

body.dark-theme .apexcharts-toolbar svg{

    fill:#d4d4d8 !important;
}

body.dark-theme .apexcharts-menu{

    background:#18181b !important;

    border:1px solid rgba(255,255,255,.08);
}

body.dark-theme .apexcharts-menu-item{

    color:#f4f4f5;
}

body.dark-theme .apexcharts-menu-item:hover{

    background:#27272a;
}