/* ============================================
   STATS - Tarjetas de estadísticas
   ============================================ */

/* Grid 2x2 en modo portrait para estadísticas */
@media (max-width: 768px) and (orientation: portrait) {
    .stats-grid,
    div.stats-grid,
    .panel .stats-grid,
    .tab-content .stats-grid,
    [class*="stats-grid"],
    .floor-panel .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        margin: 10px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .stat-card,
    div.stat-card,
    .panel .stat-card,
    .tab-content .stat-card,
    [class*="stat-card"],
    .floor-panel .stat-card {
        padding: 8px !important;
        font-size: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: none !important;
    }

    .stat-value,
    div.stat-value,
    .stat-card .stat-value {
        font-size: 18px !important;
    }

    .stat-label,
    div.stat-label,
    .stat-card .stat-label {
        font-size: 10px !important;
    }

    /* Optimizaciones adicionales canvas */
    .canvas-controls {
        flex-direction: column;
        gap: 8px;
    }

    .canvas-controls-left,
    .canvas-controls-right {
        width: 100%;
        align-items: stretch;
    }

    .canvas-controls-left .btn,
    .canvas-controls-right .btn {
        width: 100%;
        min-width: auto;
        margin: 2px 0;
    }

    /* Header buttons */
    .header-buttons {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .header-buttons .btn {
        width: 100%;
        font-size: 12px;
        padding: 8px;
    }
}

/* Tablets */
@media (max-width: 1024px) and (min-width: 769px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 10px;
    }

    .canvas-controls {
        padding: 8px;
    }
}