body{
    font-family:Arial,sans-serif;
    margin:0;
    padding:0;
    background:#f4f4f4;
}

header{
    background:#1976d2;
    color:white;
    padding:15px;
    text-align:center;
}

.status-db,.status-offline{
    padding:8px;
    text-align:center;
    font-weight:bold;
    margin:10px 0;
}

.status-db{
    background:#4caf50;
    color:white;
}

.status-offline{
    background:#ff9800;
    color:white;
}

.container{
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

/* Tarjetas principales */
.date-selector,
.drivers-global,
.zone-column,
#reportSection{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    margin-bottom:20px;
}

/* Selector de fecha */
.date-selector h3{
    margin:0 0 15px 0;
    color:#1976d2;
}

.date-controls{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.date-input,
.drivers-form input,
.zone-meta input{
    padding:10px;
    border:1px solid #ddd;
    border-radius:5px;
    font-size:14px;
}

.current-day{
    background:#4caf50;
    color:white;
    padding:8px 12px;
    border-radius:5px;
    font-weight:bold;
}

/* Repartidores */
.drivers-global .section-title{
    font-weight:bold;
    margin-bottom:10px;
}

.drivers-form{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.drivers-form input{
    flex:1;
}

/* Lista SIN scroll visible */
.drivers-list{
    list-style:none;
    padding:0;
    margin:0;
    max-height:none;      /* deja crecer libremente */
    overflow-y:visible;   /* sin barra */
}

.drivers-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px;
    background:#f8f9fa;
    margin:5px 0;
    border-radius:5px;
}

.assigned-driver{
    color:#2e7d32;
    font-weight:bold;
}

/* Zonas */
.zones{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin:20px 0;
}

.zone-column{
    flex:1 1 280px;
    min-height:200px;
}

.zone-header{
    font-size:20px;
    font-weight:bold;
    margin-bottom:15px;
    color:#1976d2;
}

.zone-meta{
    display:flex;
    flex-direction:column;
    gap:15px;
}

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

.zone-meta input{
    flex:1;
}

.drivers-input{
    min-width:200px;
}

/* Resumen */
.summary{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    margin:20px 0;
    font-size:16px;
}

/* Botones */
.btn{
    padding:10px 20px;
    font-size:14px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    transition:0.3s;
    margin:5px;
}

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

.btn-primary{
    background:#1976d2;
    color:white;
}

.btn-success{
    background:#4caf50;
    color:white;
}

.btn-danger{
    background:#d32f2f;
    color:white;
}

.btn-secondary{
    background:#757575;
    color:white;
}

/* Reporte */
#reportSection{
    margin-top:30px;
    border-top:5px solid #1976d2;
}

.report-title{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    color:#1976d2;
    margin-bottom:25px;
}

.report-table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0;
}

.report-table th,
.report-table td{
    border:2px solid #ddd;
    padding:15px;
    text-align:left;
}

.report-table th{
    background:#1976d2;
    color:white;
    font-weight:bold;
}

.report-table tr:nth-child(even){
    background:#f8f9fa;
}

.report-totals{
    display:flex;
    gap:40px;
    justify-content:center;
    font-size:20px;
    margin:30px 0;
    flex-wrap:wrap;
}

.total-highlight{
    color:#1976d2;
    font-size:24px;
    font-weight:bold;
}

.report-actions{
    text-align:center;
    margin-top:30px;
}

/* Loading */
.loading{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
    justify-content:center;
    align-items:center;
}

.loading.active{
    display:flex;
}

.spinner{
    width:50px;
    height:50px;
    border:5px solid #f3f3f3;
    border-top:5px solid #1976d2;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* RESPONSIVE: tablets */
@media (max-width: 900px){
    .container{
        padding:10px;
    }
    .zones{
        flex-direction:column;
    }
    .zone-column{
        flex:1 1 100%;
        min-width:0;
    }
    .date-controls{
        flex-direction:column;
        align-items:stretch;
    }
    .date-controls .btn{
        width:100%;
        text-align:center;
    }
    .drivers-form{
        flex-direction:column;
    }
    .drivers-form input,
    .drivers-form .btn{
        width:100%;
    }
}

/* RESPONSIVE: móviles */
@media (max-width: 600px){
    header{
        padding:10px;
        font-size:16px;
    }
    .summary{
        font-size:14px;
        padding:12px;
    }
    .report-table{
        font-size:12px;
    }
    .report-table th,
    .report-table td{
        padding:8px 6px;
    }
    .btn{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }
}