/*==========================================================
    WEBSIAN 2026
    PREINSCRIPCIÓN MOBILE PREMIUM
    Archivo  : preinscripcion.mobile.css
    Versión  : 1.0
    Objetivo : Optimizar la experiencia móvil del formulario
               de preinscripción.
    Framework Oficial WebSian 2026
==========================================================*/

/*==========================================================
    MOBILE
==========================================================*/

@media only screen and (max-width:768px) {

    /*==========================================================
        BLOQUE 1
    ==========================================================*/

    body {
        background: #f4f7fb;
        margin: 0 !important;
        padding: 8px !important;
        font-size: 18px;
        line-height: 1.5;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }


    /*==========================================================
        BLOQUE 2
    ==========================================================*/

    .panel-contenedor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 18px !important;
        border-radius: 18px;
        box-sizing: border-box;
    }
    /*==========================================================
    AJUSTE 2.1
    PANEL A PANTALLA COMPLETA
==========================================================*/

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .panel-contenedor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    /*==========================================================
    AJUSTE 2.2
    COLUMNA BOOTSTRAP
==========================================================*/

    .col-md-10,
    .col-md-offset-1 {
        width: 100% !important;
        margin-left: 0 !important;
        left: auto !important;
    }
    /*==========================================================
    BLOQUE 3
    ==========================================================*/

    .logo-preinscripcion {
        display: block;
        width: 100px;
        max-width: 50%;
        height: auto;
        margin: 0 auto 10px auto;
    }
    /*==========================================================
    BLOQUE 4
    TÍTULO PRINCIPAL
    ==========================================================*/

    .titulo-preinscripcion {
        display: block;
        font-size: 45px;
        font-weight: 700;
        color: #1d4ed8;
        line-height: 42px;
        text-align: center;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }
    /*==========================================================
    BLOQUE 5
    SUBTÍTULO
    ==========================================================*/

    .subtitulo-preinscripcion {
        display: block;
        text-align: center;
        font-size: 18px;
        color: #64748b;
        line-height: 28px;
        margin-bottom: 20px;
        font-weight: 400;
    }
    /*==========================================================
    BLOQUE 6
    TÍTULOS DE SECCIÓN
    ==========================================================*/

    .titulo-seccion {
        color: #2563eb;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        margin: 28px 0 22px 0;
        padding-bottom: 14px;
        border-bottom: 2px solid #dbeafe;
        line-height: 34px;
    }
    /*==========================================================
    BLOQUE 7
    LABELS - INPUT - SELECT
    ==========================================================*/
    /* Etiquetas */
    label {
        display: block;
        font-size: 20px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 10px;
    }
    /* TextBox */
    input[type=text],
    input[type=email],
    input[type=number],
    input[type=tel],
    input[type=password],
    textarea {
        width: 100%;
        height: 66px;
        font-size: 20px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 16px 18px;
        box-sizing: border-box;
        margin-bottom: 18px;
    }
    /* DropDownList */
    select {
        width: 100%;
        height: 66px;
        font-size: 20px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 0 18px;
        margin-bottom: 18px;
        background: #fff;
    }
    /*==========================================================
    BLOQUE 8
    BOTONES
==========================================================*/

    /* Botón Enviar */

    .btn-primary,
    input[type=submit],
    input[type=button] {
        width: 100%;
        height: 64px;
        border: none;
        border-radius: 14px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: .3px;
        margin-top: 15px;
        margin-bottom: 20px;
    }


    /* Botón Cerrar */

    .btn-default {
        width: 100%;
        height: 60px;
        border-radius: 14px;
        font-size: 20px;
        font-weight: 600;
    }


    /* Adjuntar PDF */

    input[type=file] {
        width: 100%;
        padding: 12px;
        font-size: 17px;
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        background: #fafafa;
        margin-bottom: 20px;
    }
    /*==========================================================
    BLOQUE 9
    ESPACIADOS Y MENSAJES
==========================================================*/

    /* Separación entre filas */

    .row {
        margin-bottom: 12px;
    }


    /* Columnas */

    [class*="col-"] {
        margin-bottom: 16px;
    }


    /* Mensaje de confirmación */

    #lblMensaje {
        display: block;
        width: 100%;
        padding: 18px;
        margin-top: 24px;
        border-radius: 14px;
        font-size: 17px;
        line-height: 28px;
        text-align: center;
        box-sizing: border-box;
    }


    /* Línea divisoria */

    hr {
        margin: 28px 0;
        border: 0;
        border-top: 1px solid #e5e7eb;
    }


    /* Espacio final del formulario */

    form {
        padding-bottom: 30px;
    }
}