/* ===== ESTILOS GENERALES ===== */
body {
    font-family: Arial, sans-serif;
    background: #f2f2f2;
    padding: 10px;
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}

button {
    padding: 15px 0;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background: #222;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background: #444;
}

/* ===== MODAL ===== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* IMPORTANTE: sin color fijo aquí */
.modal {
    padding: 25px;
    border-radius: 14px;
    font-size: 18px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    color: #fff;
    transition: background 0.2s ease;

    border: 2px solid #fff;   /* 👈 BORDE BLANCO */
    box-sizing: border-box;   /* para que no cambie tamaño */
}

/* ===== COLORES DEL MODAL SEGÚN TURNO ===== */
.modal-rojo {
    background: #c62828;
}

.modal-verde {
    background: #2e7d32;
}

.modal-naranja {
    background: #ef6c00;
}

.modal-negro {
    background: #212121;
}

.modal-azul {
    background: #455a64;
}