/* compact-layout.css - Estilos para layout compacto */

/* Reducir espaciado general */
body {
    font-size: 0.9rem;
}

.container-fluid {
    padding: 8px;
}

.card {
    margin-bottom: 12px !important;
}

.card-body {
    padding: 12px;
}

.card-header {
    padding: 10px 12px;
}

/* Optimización de espacios */
.row {
    margin-right: -6px;
    margin-left: -6px;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-sm, .col-md, .col-lg, .col-xl {
    padding-right: 6px;
    padding-left: 6px;
}

/* Hacer la ruleta más compacta */
.roulette-layout-container {
    max-width: 400px;
    padding: 5px;
}

.roulette-table {
    gap: 1px;
}

.number-cell {
    height: 34px;
    font-size: 14px;
}

/* Reducir tamaño de gráficos */
.chart-container {
    height: 160px;
}

.small-chart {
    height: 100px;
}

/* Hacer más compacta la lista de últimos números */
.last-numbers-container {
    gap: 4px;
    padding: 5px 0;
}

.number-ball {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

/* Reducir estadísticas circulares */
.stat-circle {
    width: 50px;
    height: 50px;
    font-size: 16px;
}

.stat-label {
    font-size: 12px;
}

/* Optimizar listas de estadísticas */
.stat-list li {
    padding: 3px 0;
    font-size: 0.9rem;
}

/* Hacer el mapa de calor más compacto */
.heat-cell {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

/* Optimizar para móviles */
@media (max-width: 768px) {
    .card-header h4 {
        font-size: 1.1rem;
    }
    
    .card-header .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .stat-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .chart-container {
        height: 140px;
    }
    
    .small-chart {
        height: 80px;
    }
}

/* Layout base (sin clase adicional) */
.main-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 12px;
}

/* Layout compacto (cuando se añade la clase) */
.main-layout.compact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 12px;
}

.compact-layout .input-column {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

.compact-layout .prediction-column {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
}

.compact-layout .stats-column {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
}

.compact-layout .trend-column {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
}

.compact-layout .charts-column {
    grid-row: 3 / span 1;
    grid-column: 1 / span 2;
}

/* Cambiar la disposición en pantallas grandes por defecto */
@media (min-width: 992px) {
    .main-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 12px;
    }
    
    .input-column {
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
    }
    
    .prediction-column {
        grid-row: 1 / span 1;
        grid-column: 2 / span 1;
    }
    
    .stats-column {
        grid-row: 2 / span 1;
        grid-column: 1 / span 1;
    }
    
    .trend-column {
        grid-row: 2 / span 1;
        grid-column: 2 / span 1;
    }
    
    .charts-column {
        grid-row: 3 / span 1;
        grid-column: 1 / span 2;
    }
}

/* Personalizar los paneles de alerta para ocupar menos espacio */
#patternAlertContainer {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}

#patternAlertContainer .alert {
    padding: 8px 10px;
    margin-bottom: 8px;
}

#patternAlertContainer .alert p {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* Estilos para sidebar de patrones */
.patterns-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background-color: var(--color-bg-dark);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1040;
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 15px;
    transform: translateX(100%);
}

.patterns-sidebar.show {
    transform: translateX(0);
}

.patterns-sidebar-toggle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1041;
    background-color: var(--color-bg-dark-secondary);
    border-radius: 5px 0 0 5px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

/* Ajustes a los nuevos paneles */
#predictionPanel {
    margin-bottom: 12px !important;
}

#predictionPanel .prediction-disclaimer {
    padding: 4px 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

#predictionPanel .prediction-display {
    min-height: 90px;
}

.bias-explanation {
    font-size: 0.8rem !important;
    padding: 8px !important;
}

/* Renombrar "Patrones Detectados" para hacer más compacto */
#patternsDetectedChart {
    max-height: 180px;
}

/* Tooltips condensados */
.tooltip-inner {
    max-width: 200px;
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* Ajustes a modales */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}