/* ===================================================================
   REPORTS - Tracking v2.0
   Vista de reportes: tabla expandible por vehículo programado.
   =================================================================== */

/* =============== STATS GRID =============== */
.reports-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.reports-stats .stat-card {
    padding: 0.75rem;
    text-align: center;
}

.reports-stats .stat-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.reports-stats .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.reports-stats .stat-value.total     { color: var(--text-primary); }
.reports-stats .stat-value.plates    { color: var(--green-primary); }
.reports-stats .stat-value.geocoded  { color: #2563eb; }
.reports-stats .stat-value.with-trip { color: #7c3aed; }
.reports-stats .stat-value.avg-speed { color: #d97706; }

/* =============== SOURCE TAG (viaje activo) =============== */
.source-tag {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
    line-height: 1;
}

.source-tag.active-trip {
    color: #7c3aed;
}

.source-tag.cancelled {
    color: #ef4444;
}

/* =============== TOOLBAR =============== */
.reports-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.reports-toolbar .form-input,
.reports-toolbar .form-select {
    height: 34px;
    font-size: var(--font-size-sm);
}

.reports-toolbar .form-input { max-width: 180px; }
.reports-toolbar .form-select { max-width: 180px; }
.reports-toolbar .form-input[type="date"] { max-width: 160px; }

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    flex-shrink: 0;
}

.reports-toolbar .btn {
    height: 34px;
    white-space: nowrap;
}

/* Export button */
.btn-export {
    background: #217346;
    color: #fff;
    border: 1px solid #1a5c38;
    display: inline-flex;
    align-items: center;
}
.btn-export:hover:not(:disabled) { background: #1a5c38; }

/* Deviation button */
.btn-deviation {
    background: #5b21b6;
    color: #fff;
    border: 1px solid #4c1d95;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-deviation:hover { background: #4c1d95; color: #fff; }

.export-group { display: inline-flex; align-items: center; }

.export-day-picker {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
    padding: 0.5rem;
    z-index: 100;
    min-width: 160px;
}
.export-day-picker .day-option {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    border-radius: var(--border-radius-sm, 4px);
}
.export-day-picker .day-option:hover { background: var(--hover-color); }

/* =============== LAYOUT SPLIT =============== */
.reports-app-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    height: calc(100vh - 58px);
    overflow: hidden;
}

.reports-main-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem;
    gap: 0.75rem;
}

.reports-side-panel {
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =============== TABLA PRINCIPAL =============== */
.reports-table-scroll {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 900px;
}

.reports-table thead {
    background: var(--table-header);
    position: sticky;
    top: 0;
    z-index: 4;
}

.reports-table th {
    padding: 0.55rem 0.65rem;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.reports-table td {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Sticky columns */
.th-sticky, .td-sticky {
    position: sticky;
    z-index: 3;
    background: var(--table-header);
}

.th-num, .td-num {
    left: 0;
    width: 36px;
    min-width: 36px;
    text-align: center;
}

.th-plate, .td-plate {
    left: 36px;
    min-width: 90px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.td-sticky {
    background: var(--bg-secondary);
}

.td-actions, .th-actions {
    width: 40px;
    text-align: center;
}

/* Cabecera multi-fila */
.main-header-row th { border-bottom: none; }
.sub-header-row th {
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    padding: 0.3rem 0.65rem;
}

/* =============== FILAS VEHÍCULO =============== */
.vehicle-row {
    cursor: pointer;
    transition: background 0.15s;
}

.vehicle-row:hover {
    background: var(--hover-color);
}

.vehicle-row.en_viaje {
    border-left: 3px solid var(--green-primary);
}

.vehicle-row.viaje_finalizado {
    border-left: 3px solid #2563eb;
}

.vehicle-row.programado {
    border-left: 3px solid #d97706;
}

.vehicle-row.cancelado {
    border-left: 3px solid #ef4444;
    opacity: 0.65;
}

.vehicle-row .empty-report-cell {
    background: transparent;
}

.cell-route {
    max-width: 240px;
    overflow: hidden;
}

.route-cell {
    min-width: 190px;
}

.route-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.route-kind {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}

.route-wells .route-kind {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}

.route-hours .route-kind {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.route-summary,
.route-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-summary {
    min-width: 0;
    font-weight: 600;
}

.route-sub {
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-secondary);
}

/* =============== FILA PROVEEDOR (info expandida) =============== */
.provider-row {
    background: var(--hover-color);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.provider-row td {
    padding: 0.35rem 0.65rem;
    border-bottom: 1px dashed var(--border-color);
}

/* =============== FILAS DE HORA =============== */
.hour-row {
    cursor: pointer;
    transition: background 0.12s;
}

.hour-row:hover {
    background: rgba(0, 166, 81, 0.04);
}

.hour-row.no-report {
    opacity: 0.6;
}

.hour-row.no-report:hover {
    opacity: 0.8;
}

.hour-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    vertical-align: top;
    padding-top: 0.55rem;
}

.hour-label strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.no-report-cell {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-style: italic;
    opacity: 0.6;
}

/* =============== HORAS EXTRA =============== */
.extra-hour {
    background: rgba(217, 119, 6, 0.03);
}

.extra-hour-label {
    color: var(--text-secondary);
}

.extra-badge {
    display: inline-block;
    padding: 0 5px;
    border-radius: var(--border-radius-sm);
    font-size: 9px;
    font-weight: 700;
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}

.extra-hours-toggle-row td {
    padding: 0.3rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.extra-hours-toggle-cell {
    text-align: left;
}

.extra-hours-toggle-btn {
    background: none;
    border: 1px dashed var(--border-color);
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: #d97706;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--border-radius-sm);
    transition: background 0.15s;
}

.extra-hours-toggle-btn:hover {
    background: rgba(217, 119, 6, 0.08);
}

/* =============== EXPAND BUTTON =============== */
.expand-btn {
    background: none;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 11px;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.expand-btn:hover {
    background: var(--hover-color);
    color: var(--text-primary);
}

/* =============== DAY BADGES =============== */
.day-badge {
    text-align: center;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.badge.day-1 { background: rgba(0,166,81,0.12); color: var(--green-primary); }
.badge.day-2 { background: rgba(37,99,235,0.1); color: #2563eb; }
.badge.day-3 { background: rgba(124,58,237,0.1); color: #7c3aed; }
.badge.day-4 { background: rgba(217,119,6,0.1); color: #d97706; }
.badge.day-5 { background: rgba(239,68,68,0.1); color: #ef4444; }

.day-date {
    display: block;
    font-size: 9px;
    color: var(--text-secondary);
    margin-top: 1px;
    opacity: 0.7;
}

.multi-day-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    margin-left: 6px;
}

.cancelled-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    margin-left: 6px;
}

/* =============== CELDAS HORA/VELOCIDAD/UBICACIÓN =============== */
.time-speed-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.time-speed-cell .time {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.time-speed-cell .speed {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.location-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
}

.location-cell .coords {
    display: block;
    color: var(--text-secondary);
    font-size: 10px;
    opacity: 0.7;
}

/* =============== BADGES ESTADO =============== */
.badge-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

.badge-status.en-viaje         { background: rgba(0,166,81,0.12); color: var(--green-primary); }
.badge-status.viaje-finalizado { background: rgba(37,99,235,0.1); color: #2563eb; }
.badge-status.viaje-huerfano   { background: rgba(249,115,22,0.12); color: #f97316; }
.badge-status.viaje-timeout    { background: rgba(239,68,68,0.1); color: #ef4444; }
.badge-status.viaje-cancelado  { background: rgba(100,116,139,0.1); color: #64748b; }
.badge-status.programado       { background: rgba(217,119,6,0.1); color: #d97706; }
.badge-status.cancelado        { background: rgba(239,68,68,0.1); color: #ef4444; }
.badge-status.sin-programar    { background: rgba(148,163,184,0.08); color: var(--text-secondary); }

/* =============== PANEL LATERAL =============== */
.side-section {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.side-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ---- Operaciones ---- */
.op-schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.op-schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-color);
}

.op-schedule-item:last-child { border-bottom: none; }

.op-schedule-name {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-schedule-hours {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.op-hour-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
    font-size: 10px;
    font-weight: 700;
    background: rgba(0, 166, 81, 0.1);
    color: var(--green-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- Detalle reporte seleccionado ---- */
.report-detail {
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.report-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 2rem;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.detail-plate {
    font-size: var(--font-size-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.detail-field-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-field-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.detail-map {
    height: 180px;
    border-radius: var(--border-radius-md);
    margin-top: 0.5rem;
    background: var(--hover-color);
    overflow: hidden;
}

/* =============== CHART =============== */
.reports-chart-container {
    height: 180px;
    padding: 0.5rem;
}

/* =============== RESPONSIVE =============== */
@media (max-width: 1024px) {
    .reports-app-content {
        grid-template-columns: 1fr;
    }
    .reports-side-panel {
        display: none;
    }
}

@media (max-width: 768px) {
    .reports-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .reports-toolbar .form-input,
    .reports-toolbar .form-select {
        max-width: 100%;
    }
    .reports-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}