/* ============================================================ */
/* ESTILOS EXCLUSIVOS PARA DISPOSITIVOS MÓVILES                */
/* SOLO SE APLICAN EN PANTALLAS DE 768px O MENOS              */
/* ============================================================ */

@media (max-width: 768px) {

    /*nueva versión taquilla zzp octubre 2015 - VERSIÓN MÓVIL MODERNIZADA*/
    /*mantiene todas las clases originales + soporte para layout flex/moderno*/

    /*============================================================*/
    /* 1. ESTILOS GLOBALES Y FONDO */
    /*============================================================*/
    .body_taquillaszp {
        margin: 0px;
        font-family: "TitilliumWeb-Regular", "Open Sans", arial, sans-serif;
        font-size: 14px;
        color: #333;
        position: relative;
        background-image: url('./graficas/fondo_nx.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
    }

    /*============================================================*/
    /* 2. NUEVOS ESTILOS PARA LAYOUT SIN TABLAS (MODERNIZACIÓN)   */
    /*============================================================*/

    /* Contenedor principal tipo flex - fondo transparente */
    .modern-layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        max-width: 100%;
        margin: 0 auto;
        background: transparent;
    }

    /* Header moderno móvil */
    .main-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        height: auto !important;
    }

    /* Menú de navegación moderno móvil */
    .nav-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 15px;
        background: transparent;
        border-bottom: none;
        justify-content: center;
    }

    /* Contenido principal moderno móvil */
    .main-content {
        flex: 1;
        min-height: 400px;
        padding: 20px 15px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background: transparent;
    }

    /* Footer dinámico moderno móvil */
    .footer-dynamic {
        margin: auto;
        padding: 15px;
        text-align: center;
    }

    /* Footer de seguridad moderno móvil */
    .security-footer {
        padding: 10px 15px;
        text-align: center;
        border-top: none;
    }

    /* Ajuste para el contenido dinámico */
    .main-content > form, 
    .main-content > div:first-child {
        width: 100%;
        max-width: 100%;
    }

    /* Regla especial para #datos-form */
    .main-content #datos-form,
    .cuerpo_tzp > #datos-form {
        background-color: rgba(255, 255, 255, 0.95);
        width: 95%;
        padding: 1rem;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Ajuste para el contenido del logo del cliente */
    .logo_cliente_tzp {
        background: transparent;
    }

    /*============================================================*/
    /* 3. CONTENEDOR PRINCIPAL DE PAGO (2 COLUMNAS EN MÓVIL = 1 COLUMNA) */
    /*============================================================*/

    .main-content-pay {
        flex: 1;
        min-height: 400px;
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
    }

    /* Eliminar márgenes y paddings de todos los elementos hijos directos */
    .main-content-pay > * {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Eliminar el <p> que contiene estilos */
    .main-content-pay > p:first-of-type {
        display: none !important;
    }

    /* Primera tabla (información del pago) */
    .main-content-pay > table:first-of-type {
        grid-column: 1 !important;
        margin-bottom: 20px !important;
        position: relative !important;
        top: 0 !important;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        border-radius: 15px;
        width: 100%;
    }

    /* Segunda tabla (texto de verificación) */
    .main-content-pay > table:nth-of-type(2) {
        grid-column: 1 !important;
        margin-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    /* Tabla de encabezado de medios de pago */
    .main-content-pay > table.tabla_encabezado_medios_pago {
        grid-column: 1 !important;
        grid-row: auto !important;
        margin: 0 !important;
        margin-bottom: 15px !important;
        height: auto;
    }

    /* Formulario de medios de pago */
    .main-content-pay > form {
        grid-column: 1 !important;
        grid-row: auto !important;
        margin-top: 0 !important;
        background-color: #fff;
        padding: 15px !important;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        width: 100%;
    }

    /* Scripts - ocultar */
    .main-content-pay > script {
        display: none;
    }

    /* Orden de visualización en móvil */
    .main-content-pay > table:first-of-type { order: 1; }
    .main-content-pay > table:nth-of-type(2) { order: 2; }
    .main-content-pay > table.tabla_encabezado_medios_pago { order: 3; }
    .main-content-pay > form { order: 4; }

    /*============================================================*/
    /* 4. CLASES ORIGINALES PRESERVADAS (con ajustes móviles)     */
    /*============================================================*/

    .ancho_tabla_tzp_mv {
        margin: auto;
        width: 98%;
    }

    .logo_cliente {
        width: 200px;
    }

    .logo_zona_tzp_mv {
        height: 45px;
        width: 100px;
    }

    .logo_cliente_tzp_mv {
        height: auto;
        font-family: "Open Sans", arial;
        font-size: 18px;
        color: #1E789A;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
    }

    .menu_tzp_mv {
        height: auto;
        text-align: center;
        margin-right: 0;
    }

    .fondo_btnup_tzp_mv {
        background-color: #15a48d;
        font-size: 11px;
        font-weight: bold;
        font-family: "Open Sans", arial;
        font-style: italic;
        color: #FFF;
        border: 1px solid #15a48d;
        border-radius: 3px;
        text-align: center;
        padding: 6px 12px;
        text-decoration: none;
        margin-right: 5px;
        display: inline-block;
    }

    a:hover.fondo_btnup_tzp_mv {
        background-color: #0d7a68;
        border: 1px solid #0d7a68;
    }

    .fondo_btnup_new_tzp_mv {
        background-color: #15a48d;
        font-size: 11px;
        font-weight: bold;
        font-family: "Open Sans", arial;
        font-style: italic;
        color: #FFF;
        border: 1px solid #15a48d;
        border-radius: 3px;
        text-align: center;
        padding: 6px 12px;
        padding-left: 28px;
        text-decoration: none;
        background-image: url(/tiendas_c/plantillas/plantillanx/graficas/administracion_mv.png);
        background-repeat: no-repeat;
        background-position: 6px center;
        display: inline-block;
    }

    a:hover.fondo_btnup_new_tzp_mv {
        background-color: #0d7a68;
        border: 1px solid #0d7a68;
    }

    .cuerpo_tzp_mv {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .texto_normal {
        font-family: "Open Sans", arial;
        color: #1E789A;
        font-size: 12px;
        font-style: italic;
        text-decoration: none;
    }

    .titulo_tzp_mv {
        font-size: 15px;
        font-style: normal;
        color: #333;
        font-family: arial;
        text-align: left;
        padding-left: 5px;
    }

    .fila_forma_pago {
        height: auto;
        font-weight: bold;
        padding: 5px 0;
    }

    .fila_forma_pago1 {
        font-weight: bold;
    }

    .campo_text {
        width: 100%;
        height: 35px;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1.42857;
        color: #333;
        background-color: rgba(255, 255, 255, 0.9);
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-style: italic;
        box-sizing: border-box;
    }

    .tabla_forma_pago {
        padding-top: 20px;
        width: 100%;
        padding-bottom: 20px;
        margin: auto;
    }

    .campo_lista_despl {
        width: 100%;
        font-size: 12px;
        line-height: 1.42857;
        color: #333;
        background-color: rgba(255, 255, 255, 0.9);
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-style: italic;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 6px 10px;
        box-sizing: border-box;
    }

    .boton {
        background-color: #15a48d;
        font-size: 12px;
        font-weight: bold;
        font-family: "Open Sans", arial;
        font-style: italic;
        color: #FFF;
        border: 1px solid #15a48d;
        padding: 8px 15px;
        width: 100%;
        cursor: pointer;
        border-radius: 5px;
    }

    a:hover.boton {
        background-color: #0d7a68;
    }

    .pie_pagina_tzp_mv {
        margin: auto;
        padding-top: 15px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(238, 238, 238, 0.5);
        padding-bottom: 15px;
        text-align: center;
    }

    /*============================================================*/
    /* 5. ESTILOS DE MEDIOS DE PAGO MÓVIL                        */
    /*============================================================*/

    .tabla_medio_pago {
        width: 100%;
        margin: auto;
    }

    .texto_forma_pago {
        font-size: 12px;
        font-family: "Open Sans", arial;
        text-decoration: none;
        font-weight: normal;
        color: #333;
        font-style: italic;
    }

    .campo_radio_medio_pago {
        padding: 8px;
        font-weight: bold;
    }

    .celda_tabla_medio_pago {
        font-size: 14px;
        padding: 12px;
        cursor: pointer;
        text-align: left;
        border-bottom: 1px solid #EEE;
    }

    .celda_tabla_encabezado_medios_pago {
        font-family: arial;
        font-size: 12px;
        color: #006;
        background-color: transparent;
        padding: 10px;
        text-align: center;
    }

    .tituloprincipal {
        font-size: 16px;
        color: #333;
        text-decoration: none;
        padding-bottom: 10px;
        font-family: "Open Sans", arial;
        display: block;
        text-align: center;
    }

    .vinculo_terminos {
        font-size: 11px;
        font-family: arial;
        text-decoration: none;
        font-weight: normal;
        color: #9AC336;
        font-style: italic;
        padding-left: 5px;
    }

    .boton_forma_pago {
        background-color: #15a48d;
        font-size: 12px;
        font-weight: bold;
        font-family: "Open Sans", arial;
        font-style: italic;
        color: #FFF;
        border: 1px solid #15a48d;
        padding: 10px 15px;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    /*============================================================*/
    /* 6. FORMATOS Y CORREOS (PRESERVADOS)                       */
    /*============================================================*/

    .linea_tzp_mv {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #EEEEEE;
        height: auto;
        padding: 10px 0;
    }

    .label_tzp_fr_mv,
    .label_zzp_fr_tr {
        font-family: "Open Sans", arial;
        font-size: 11px;
        font-style: italic;
        font-weight: bold;
        color: #1E789A;
        text-decoration: none;
        padding: 5px 8px;
        display: block;
    }

    .resp_tzp_fr_mv,
    .resp_zzp_fr_tr {
        font-family: "Open Sans", arial;
        font-size: 11px;
        font-style: italic;
        font-weight: normal;
        color: #333;
        text-decoration: none;
        padding: 5px 8px;
        display: block;
    }

    .fondopag_tzp_mv {
        background-color: #EEEEEE;
        padding: 10px;
        height: auto;
    }

    .labelRight_tzp_fr_mv,
    .labelrigth_zzp_fr_tr {
        font-family: "Open Sans", arial;
        font-size: 11px;
        font-style: italic;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        padding: 5px 8px;
        text-align: left;
    }

    .respRight_tzp_fr_mv,
    .respright_zzp_fr_tr {
        font-family: "Open Sans", arial;
        font-size: 11px;
        font-style: italic;
        font-weight: normal;
        color: #333;
        text-decoration: none;
        padding: 5px 8px;
        text-align: left;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .textpq_tzp_mv {
        font-family: "Open Sans", arial;
        font-size: 10px;
        font-style: italic;
        color: #666;
        text-decoration: none;
        padding: 8px;
    }

    .anchocld_tzp_mv {
        height: auto;
        padding: 5px 0;
    }

    /*============================================================*/
    /* 7. PIE DE PAGO SEGURO                                     */
    /*============================================================*/

    .pmz_datos_pago_seguro {
        width: 100%;
        float: none;
        padding-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .pmz_espacio_candado {
        width: auto;
        float: none;
        padding-top: 3px;
    }

    .pmz_candado {
        font-size: 3px;
        position: relative;
        border-radius: 3px;
        border: 3.5px solid #AAA;
        border-right-width: 7.5px;
        border-left-width: 7.5px;
        margin: 0 5px 0 0;
    }

    .pmz_paga_segu {
        padding-left: 5px;
        font-size: 11px;
    }

    .footer {
        font-family: arial;
        font-size: 11px;
        color: #999;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        line-height: 16px;
        padding: 10px;
        font-weight: bold;
        text-align: center;
    }

    /*============================================================*/
    /* 8. FORMULARIOS Y TARJETAS DE CRÉDITO                      */
    /*============================================================*/

    #forma_1 {
        margin: auto;
        width: 100%;
    }

    .tabla_seleccion_tarjeta_credito {
        margin: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .lista_despl_tc_zpp {
        display: block;
        width: 100%;
        padding: 8px 10px;
        font-size: 14px;
        border: 1px solid #CCC;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .tabla_tarjeta_credito {
        padding: 12px;
        width: 100%;
        border: 1px solid #EEEEEE;
        margin: 15px 0;
        background-color: #FAFAFA;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .tabla_encabezado_forma_cr {
        font-size: 18px;
        font-style: normal;
        color: #933;
        font-family: arial;
        text-align: left;
        margin-bottom: 15px;
    }

    .tabla_forma_cr {
        margin: auto;
        width: 100%;
    }

    /*============================================================*/
    /* 9. BOTÓN IMPRIMIR Y OTROS                                 */
    /*============================================================*/

    .boton_imprimir {
        background-color: #15a48d;
        font-size: 12px;
        font-weight: bold;
        font-family: "Open Sans", arial;
        font-style: italic;
        color: #FFF;
        border: 1px solid #15a48d;
        padding: 8px 15px;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .advertencia_zzp_tr {
        color: #F06;
        font-size: 11px;
    }

    .espera_zzp_tr {
        font-size: 11px;
        font-style: italic;
        font-weight: bold;
        color: #9AC336;
        text-decoration: none;
    }

    .mail_tzp_tr {
        color: #1E789A;
        text-decoration: none;
    }

    .borde_fr_tr {
        border: 1px dotted #9AC336;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 10px;
        border-radius: 8px;
    }

    .titulo_zzp_fr_tr {
        font-family: arial;
        font-size: 12px;
        font-style: italic;
        font-weight: bold;
        text-transform: uppercase;
        color: #428BCA;
        text-decoration: none;
        padding: 10px;
        border-bottom: 1px dotted #CCC;
        display: block;
    }

    /*============================================================*/
    /* 10. TABLAS Y MULTIREGISTROS                               */
    /*============================================================*/

    .tabla_multiregistros {
        padding: 1px;
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    .fila_titulo_mr,
    .celda_titulo_mr,
    .celda_info_mr {
        font-family: "Open Sans", arial;
        font-size: 10px;
        padding: 5px;
        height: auto;
    }

    /*============================================================*/
    /* 11. MEDIA QUERY PARA PANTALLAS MUY PEQUEÑAS               */
    /*============================================================*/

    @media (max-width: 480px) {
        .main-content-pay {
            padding: 10px;
            gap: 15px;
        }
        
        .main-content #datos-form,
        .cuerpo_tzp > #datos-form {
            width: 100%;
            padding: 0.8rem;
        }
        
        .fondo_btnup_tzp_mv,
        .fondo_btnup_new_tzp_mv {
            font-size: 10px;
            padding: 4px 8px;
        }
        
        .fondo_btnup_new_tzp_mv {
            padding-left: 24px;
            background-position: 4px center;
        }
        
        .boton_forma_pago {
            font-size: 11px;
            padding: 8px 12px;
        }
        
        .texto_forma_pago {
            font-size: 11px;
        }
        
        .campo_radio_medio_pago {
            padding: 5px;
        }
        
        .celda_tabla_medio_pago {
            padding: 10px;
        }
        
        .tituloprincipal {
            font-size: 14px;
        }
    }
}