/********************************************************************
 * Hoja de estilos para formularios de partidas                     *
 * ---------------------------------------------------------------- *
 * - Define la tipografía, colores y tamaños de labels,             *
 *   inputs y selects en los formularios.                           *
 * - Establece estilos de enfoque (focus) para mejorar              *
 *   la usabilidad y accesibilidad.                                 *
 * - Da formato a la sección de información dinámica                *
 *   del sistema (#div-infoSistema) con estados "vacio" y "valido". *
 * - Estiliza contenedores de formulario (.div-form),               *
 *   notas informativas y el nombre de la partida.                  *
 * - Incluye reglas responsivas para pantallas pequeñas (<500px),   *
 *   ajustando tipografías, anchos y disposición de elementos.      *
 *                                                                  *
 * Objetivo: mantener consistencia visual, claridad y               *
 * legibilidad en los formularios de creación y edición             *
 * de partidas dentro de la aplicación.                             *
 ********************************************************************/

form label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    color: #333333;
}

select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"] {
    font-size: 1.4rem;
    color: #888888;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 180px;
}

select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus {
    border-color: #F25C05;
    outline: none;
    box-shadow: 0 0 5px rgba(204, 126, 0, 0.4);
}

option {
    color: #000000;
}

option:first-child {
    color: #888888;
}

#select-dm option:last-child {
    color: #629000;
}

#div-infoSistema span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: white;
}

#div-infoSistema span.vacio {
    color: white;
}

#div-infoSistema span.valido {
    color: black;
}

#div-infoSistema span {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Cuando el input tiene texto o valor */
input[type="text"]:not(:placeholder-shown),
input[type="email"]:not(:placeholder-shown),
input[type="password"]:not(:placeholder-shown),
input[type="number"]:not(:placeholder-shown),
input[type="date"]:valid,
input[type="time"]:valid {
    color: #000000; /* negro cuando ya hay datos */
}

/* Para los selects: si no está seleccionada la opción vacía */
select:required:valid {
    color: #000000; /* negro cuando ya eligieron algo */
}

.div-form {
    display: flex;
    flex-direction: column;
    margin: 16px auto;
    padding: 1rem 1.5rem;
    border: 2px solid #444;
    border-radius: 12px;
    background-color: #a2a2a2;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    max-width: 800px;
}

#div-nuevoDm.div-form {
    border: 2px solid #444;
    background-color: #ffffcc;
}

.div-form label {
    margin-right: 0.5rem;
    font-weight: bold;
}

.div-form label, .div-form input {
    display: block;
    flex-direction: column;
    margin-bottom: 0.2rem;
}

.notas {
    width: 100%;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

#nombre-partida {
    display: inline-block;
    color: #4539cf;
    font-weight: bold;
    font-size: 2.2rem;
    padding: 5px;
    margin: 0 0 5px;
    border-radius: 6px;
    background-color: #dedede;
}

@media only screen and (max-width: 500px) {
    #div-infoSistema span {
        display: block;
    }

    #nombre-partida {
        font-size: 1.8rem;
    }

    .notas {
        font-size: 0.7rem;
    }

    form label {
        font-size: 1rem;
    }

    select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"] {
        font-size: 1rem;
        width: 100%;
        padding: 0.4rem 0 0.5rem;
    }
}