/* mobilev1.css */

/* ========================= */
/* Estilos generales (≤600px) */
/* ========================= */
@media screen and (max-width: 600px) {
    body {
        padding: 0 12px;
        font-size: 16px;
    }

    /* Header */
    .header-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .header-inner h1 {
        font-size: 1.3em;
        text-align: center;
    }

    /* Botón de nueva apuesta */
    .top-actions {
        text-align: center;
        margin: 12px 0;
    }
    .top-actions .btn-primary {
        width: 90%;
        max-width: 360px;
        padding: 14px 0;
        font-size: 1.05em;
        touch-action: manipulation;
    }

    /* Resumen: tarjetas en columna */
    .summary-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    .summary-cards .card {
        width: 100%;
        padding: 12px;
    }
    .summary-cards .card h3 {
        font-size: 0.9em;
    }
    .summary-cards .card p {
        font-size: 1.2em;
    }

    /* Historial: tabla scrollable */
    .history-section table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-collapse: separate;
        border-spacing: 0 8px;
        table-layout: auto;
    }
    .history-section thead,
    .history-section tbody {
        display: table;
        width: 100%;
    }
    .history-section th {
        white-space: nowrap;
        word-break: normal;
        padding: 6px 8px;
        font-size: 0.85em;
        background: #f0f0f0;
    }
    .history-section td {
        white-space: normal;
        word-break: normal;
        padding: 6px 8px;
        font-size: 0.8em;
        text-align: center;
        border: none;
    }
    /* columnas secundarias */
    .history-section th:nth-child(2),
    .history-section th:nth-child(7),
    .history-section th:nth-child(8),
    .history-section th:nth-child(9),
    .history-section th:nth-child(13),
    .history-section td:nth-child(2),
    .history-section td:nth-child(7),
    .history-section td:nth-child(8),
    .history-section td:nth-child(9),
    .history-section td:nth-child(13) {
        display: none;
    }

    /* Paginación */
    .pagination {
        margin: 10px 0;
        text-align: center;
    }
    .pagination button {
        padding: 4px 6px;
        margin: 0 2px;
        font-size: 0.8em;
    }

    /* Modal ancho completo */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 10px auto;
        padding: 8px;
    }

    /* Encabezados de formulario */
    #step1 h2,
    #formContainer h2#formTitle {
        font-size: 1.1em;
        text-align: center;
        margin-bottom: 6px;
    }

    /* ========================= */
    /* Formulario MÓVIL COMPACTO */
    /* ========================= */
    /* Asegura que el contenedor y modal ocupen todo el ancho */
    .modal-content,
    #formContainer {
        width: 100% !important;
        padding: 0;
        margin: 0;
    }

    /* Form en full width con padding lateral */
    #formContainer form#betForm {
        width: 100%;
        padding: 0 8px 8px;
    }

    /* Grupos y campos */
    #formContainer .form-group {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    #formContainer .form-group.inline {
        display: block;
        gap: 6px;
    }
    #formContainer .form-group.inline > div {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Labels más pequeños */
    #formContainer label {
        font-size: 0.85em;
        margin-bottom: 4px;
        display: block;
    }

    /* Inputs/Select/Textarea */
    #formContainer input,
    #formContainer select,
    #formContainer textarea {
        font-size: 0.9em;
        padding: 6px 8px;
        border-radius: 4px;
    }

    /* Botones full-width y compactos */
    #submitBtn,
    #backBtn,
    .type-buttons .type-btn {
        width: 100%;
        padding: 10px 0;
        font-size: 1em;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    /* Cabecera interna del form */
    #formContainer .form-header {
        padding: 8px 8px 4px;
        margin-bottom: 8px;
    }
    #formContainer .form-header h2 {
        font-size: 1.1em;
        margin: 0;
    }

    /* ========================= */
    /* Colorear filas de resultado */
    /* ========================= */
    .history-section td.positive {
        color: #2a9d8f;
        font-weight: 600;
        background: rgba(42,157,143,0.1);
    }
    .history-section td.negative {
        color: #e76f51;
        font-weight: 600;
        background: rgba(231,111,81,0.1);
    }
}

/* ================================= */
/* Ajustes extra para pantallas ≤400px */
/* ================================= */
@media screen and (max-width: 400px) {
    body {
        padding: 0 8px;
        font-size: 15px;
    }

    .summary-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin: 10px auto;
    }
    .summary-cards .card {
        padding: 8px;
    }
    .summary-cards .card h3 {
        font-size: 0.85em;
    }
    .summary-cards .card p {
        font-size: 1.1em;
    }

    .history-section thead,
    .history-section tbody {
        table-layout: auto;
    }

    .pagination button {
        font-size: 0.75em;
        padding: 4px 6px;
        margin: 0 2px;
    }

    #submitBtn,
    #backBtn {
        font-size: 0.9em;
        padding: 10px;
    }
}