/*
=================================================
RESET
=================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f6f9;

    color:#333;

}


/*
=================================================
HEADER
=================================================
*/

header{

    background:#1f2937;

    color:#fff;

    padding:25px;

    text-align:center;

}

header h1{

    font-size:32px;

    margin-bottom:10px;

}

header p{

    font-size:17px;

}



/*
=================================================
CONTENEDOR
=================================================
*/

.contenedor{

    width:95%;

    max-width:1600px;

    margin:30px auto;

}



/*
=================================================
PANEL SUPERIOR
=================================================
*/

.panel{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

    background:#fff;

    padding:20px;

    border-radius:10px;

    margin-bottom:25px;

    box-shadow:0 3px 8px rgba(0,0,0,.08);

}

.grupo{

    display:flex;

    flex-direction:column;

    gap:8px;

}

label{

    font-weight:bold;

}

select,
input{

    padding:10px;

    min-width:250px;

    border:1px solid #ccc;

    border-radius:6px;

    outline:none;

}

select:focus,
input:focus{

    border-color:#2563eb;

}



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

#dashboard{

    display:grid;

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

    gap:20px;

    margin-bottom:25px;

}

.card{

    background:#fff;

    border-radius:10px;

    padding:20px;

    text-align:center;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.card{

    transition:all .25s ease;

    cursor:pointer;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.card i{

    font-size:42px;

    margin-bottom:15px;

}

.card-total i{
    color:#363636;
;
}

.card-finalizadas i{
    color:#ff3939;
}

.card-curso i{
    color:#22c55e;
}

.card-proximas i{
    color:#facc15;
}

/*=========================================
COLORES DEL DASHBOARD
=========================================*/

.card-total{
    border-left:8px solid #363636;
;
}

.card-finalizadas{
    border-left:8px solid #ff3939;
}

.card-curso{
    border-left:8px solid #22c55e;;
}

.card-proximas{
    border-left:8px solid #facc15;;
}

.card h3{

    margin-bottom:15px;

    color:#555;

}

.card span{

    font-size:36px;

    font-weight:bold;

}

.card-total span{

    color:#363636;

}

.card-finalizadas span{

    color:#ff3939;

}

.card-curso span{

    color:#22c55e;

}

.card-proximas span{
    color:#facc15;
}



/*
=================================================
INFORMACION
=================================================
*/

#informacion{

    background:#fff;

    padding:15px;

    margin-bottom:25px;

    border-radius:10px;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:15px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.info{

    font-size:16px;

}



/*
=================================================
TABLA
=================================================
*/

#tablaContainer{

    background:#fff;

    border-radius:10px;

    padding:20px;

    overflow:auto;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.tabla{

    width:100%;

    min-width:1200px;

    border-collapse:collapse;

}

.tabla th{

    background:#1f2937;

    color:#fff;

    padding:14px;

    border:1px solid #ddd;

    text-align:center;

}

.tabla td{

    padding:12px;

    border:1px solid #ddd;

    text-align:center;

}

.tabla tbody tr:nth-child(even){

    background:#f8fafc;

}

.tabla tbody tr:hover{

    background:#eef5ff;

}



/*
=================================================
COLUMNAS COSECHA
=================================================
*/

.th-cosecha{

    background:#7c3aed !important;

}



/*
=================================================
ESTADOS
=================================================
*/

.finalizada{

    background:transparent;

    color:#ef4444;

    font-weight:bold;

}

.en-curso{

    background:transparent;

    color:#22c55e;

    font-weight:bold;

}

.proxima{

    background:transparent;

    color:#eab308;

    font-weight:bold;

}


/*
=================================================
MENSAJE
=================================================
*/

.mensaje{

    text-align:center;

    font-size:20px;

    padding:40px;

    color:#777;

}

.sin-datos{

    text-align:center;

    font-size:18px;

    color:#999;

    padding:40px;

}



/*
=================================================
SCROLL
=================================================
*/

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:#ddd;

}



/*
=================================================
RESPONSIVE
=================================================
*/

@media(max-width:900px){

    .panel{

        flex-direction:column;

    }

    #informacion{

        flex-direction:column;

    }

}

@media(max-width:600px){

    header h1{

        font-size:24px;

    }

    .card span{

        font-size:26px;

    }

    select,
    input{

        width:100%;

        min-width:100%;

    }

}


/*
=================================================
ANIMACIÓN DE LA TABLA
=================================================
*/

@keyframes aparecerTabla{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.tabla-cosecha{

    animation:aparecerTabla .35s ease;

}


.tabla-cosecha tbody tr{

    opacity:0;

    animation:aparecerFila .4s forwards;

}

.tabla-cosecha tbody tr:nth-child(1){animation-delay:.03s;}
.tabla-cosecha tbody tr:nth-child(2){animation-delay:.06s;}
.tabla-cosecha tbody tr:nth-child(3){animation-delay:.09s;}
.tabla-cosecha tbody tr:nth-child(4){animation-delay:.12s;}
.tabla-cosecha tbody tr:nth-child(5){animation-delay:.15s;}

@keyframes aparecerFila{

    from{

        opacity:0;
        transform:translateX(-10px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}



/*
=================================================
BARRA DE PROGRESO
=================================================
*/

.contenedor-progreso{

    position:relative;

    width:150px;

    height:24px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

    margin:auto;

}

.barra-progreso{

    height:100%;

    border-radius:20px;

    width:0;

    transition:width .8s ease-in-out;

}

.contenedor-progreso span{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    font-size:12px;

    font-weight:bold;

    color:#111827;

}