a {
    text-decoration: none;
    background-image: linear-gradient(#FF8136, #FF8136);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

    a:hover, a:focus {
        background-size: 100% 1px;
    }

.styleBtnClear {
    width: 50px;
    font-size: small;
    color: red;
    font-weight: bold;
}

/* @extend display-flex; */
display-flex, .form-row, ul, .title, .actions ul li a, .form-date-item .select-icon, .form-date-item .select-icon i, .form-date-group {
    display: flex;
    display: -webkit-flex;
}

/* @extend list-type-ulli; */
list-type-ulli, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Imágenes de contenido (ej. Images/EnConstruccion.png en Mantenimiento.aspx)
   nunca deben ser más anchas que su contenedor. */
img {
    max-width: 100%;
    height: auto;
}

/* Fuente oficial: Inter (pesos 300/400/500/700).
   Las reglas @font-face anteriores declaraban font-family: Inter pero
   apuntaban a archivos "roboto-slab-v7-latin-*.eot" (restos de una
   plantilla anterior, formato .eot no soportado por navegadores
   modernos), por lo que en la práctica nunca se cargaba Inter. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

a:focus, a:active {
    text-decoration: none;
    outline: none;
    transition: all 300ms ease 0s;
    -moz-transition: all 300ms ease 0s;
    -webkit-transition: all 300ms ease 0s;
    -o-transition: all 300ms ease 0s;
    -ms-transition: all 300ms ease 0s;
}

input, select, textarea {
    outline: none;
    appearance: unset !important;
    -moz-appearance: unset !important;
    -webkit-appearance: unset !important;
    -o-appearance: unset !important;
    -ms-appearance: unset !important;
}

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        appearance: none !important;
        -moz-appearance: none !important;
        -webkit-appearance: none !important;
        -o-appearance: none !important;
        -ms-appearance: none !important;
        margin: 0;
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -o-box-shadow: none !important;
        -ms-box-shadow: none !important;
    }

    select:disabled {
        background-color: #f6f6f6;
        font-weight: bold;
    }

    input[type=checkbox] {
        appearance: none !important;
        -moz-appearance: none !important;
        -webkit-appearance: none !important;
        -o-appearance: none !important;
        -ms-appearance: none !important;
        width: 12px;
        height: 12px;
        border: 2px solid #726F6E;
        border-radius: 3px;
        background-color: white;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        /* Centrado horizontal */
        margin: 0 auto;
        display: inline-block;
    }

        input[type=checkbox]:checked {
            background-color: #726F6E;
            border-color: #726F6E;
        }

            input[type=checkbox]:checked::before {
                content: "✓";
                position: absolute;
                color: white;
                font-size: 12px;
                font-weight: bold;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

        input[type=checkbox]:focus {
            outline: 2px solid #FF8136;
            outline-offset: 1px;
        }

/* Estilo específico para el checkbox de términos y condiciones */
#CbxTC {
    margin-right: 8px;
    vertical-align: middle;
}

    /* Para alinear el texto con el checkbox */
    #CbxTC + a {
        vertical-align: middle;
        font-size: small;
    }

input[type=radio] {
    appearance: radio !important;
    -moz-appearance: radio !important;
    -webkit-appearance: radio !important;
    -o-appearance: radio !important;
    -ms-appearance: radio !important;
}

.clear {
    clear: both;
}

h2 {
    font-size: 12px;
    color: #FF8136;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin: 0px;
    /*padding-top: 35px;*/
}

body {
    font-size: 10px;
    /*line-height: 1.6;*/
    color: #FF8136;
    font-weight: 400;
    font-family: 'Inter', Arial, sans-serif;
    margin: 0px;
    background: #f6f6f6;
}

.main {
    padding: 60px 0 0 0;
}

.main2 {
    padding: 0px 0 20px 0;
}

.container {
    width: 630px;
    max-width: calc(100% - 40px);
    position: relative;
    margin: 30px auto auto auto;
    background: #fff;
    box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
}

.container2 {
    width: 630px;
    max-width: calc(100% - 40px);
    position: relative;
    /* z-index sobre la sombra de .container: esa sombra proyecta 3px hacia
       abajo y se pintaba encima del borde superior de .container2, dibujando
       una banda gris justo en la unión de las dos tarjetas (se ve como una
       línea que "corta" el formulario). Con z-index:1 el fondo blanco de
       .container2 queda por delante de esa sombra. */
    z-index: 1;
    margin: 0 auto auto auto;
    background: #fff;
    /* Misma sombra que .container para que las dos piezas se lean como una
       sola tarjeta; la parte superior queda oculta bajo .container. */
    box-shadow: 0px 3px 9.5px 0.5px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
}

    /* Variante ancha de .container/.container2, usada solo en
   PagoenLineaUV.aspx (vía la clase adicional "container-wide") para que
   las 3 tarjetas de coberturas quepan una al lado de la otra sin
   afectar el ancho angosto de PagoenLinea.aspx / Confirmar.aspx.
   Se usa "width: calc(100% - 40px)" (igual que el breakpoint angosto
   de .container/.container2 más abajo) + max-width más grande, en vez
   de un ancho fijo, para que en pantallas chicas siga encogiendo con el
   viewport (mismo margen lateral que el resto del sitio) y solo se
   ensanche de verdad cuando realmente hay espacio. */
    .container.container-wide,
    .container2.container-wide {
        width: calc(100% - 40px);
        max-width: 960px;
    }

/* .form-row (regla del sitio) trae flex-wrap:wrap, que hace que cada fila
   se apile "orgánicamente" apenas su contenido no entra — y como la fila
   Nombres/Apellidos y la de Nro Documento/Fec. Nacimiento no miden lo
   mismo, se apilaban en anchos de pantalla distintos. Se anula ese wrap
   aquí; el cambio a 1 columna para ambas filas ahora lo controla un único
   breakpoint explícito (@media max-width:700px, más abajo). */
.pago-form-row {
    flex-wrap: nowrap;
}

.signup-form {
    padding: 1px 30px 1px 30px;
}

/* Las tablas de Nombres/Apellidos/Nro Documento traen una celda vacía
   (<td>&nbsp;</td>) en la fila del label, lo que las vuelve tablas de 2
   columnas: la fila del input tiene un solo <td> y por eso el control
   solo llega al ancho de la 1ra columna. table-layout:fixed + colgroup
   implícito no aplica aquí, así que se estira la 1ra columna al 100%. */
.pago-form-row table {
    table-layout: fixed;
    width: 100%;
}

    .pago-form-row table td:first-child {
        width: 100%;
    }

input, select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 2px solid #726F6E;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 10px;
    padding: 8px 10px;
}

    input:focus {
        border: 2px solid #FF8136;
    }

    input.valid {
        border: 1px solid #666;
    }

    input.disabled {
        border: 1px solid #8A8A8A;
    }

.form-group, .form-select, .form-date {
    margin-bottom: 15px;
    position: relative;
}

.form-row {
    flex-wrap: wrap;
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    gap: 15px;
}

    .form-row .form-select {
        width: 160px;
        flex: 1 1 160px;
    }

    .form-row .form-date {
        width: 266px;
        flex: 2 1 266px;
    }

/* Todas las celdas de .pago-form-row (Nombres/Apellidos y Nro Documento/
   Fec. Nacimiento) reparten el ancho en partes iguales. Anula el
   "flex: 1 1 160px" / "flex: 2 1 266px" de arriba, que hacía que el panel
   de fecha pidiera el doble de espacio que Nro Documento. Misma
   especificidad que esas reglas, así que DEBE ir después de ellas.
   min-width:0 es necesario porque el input[type=date] trae un ancho
   intrínseco mayor (ícono de calendario) que impediría encoger la celda. */
.pago-form-row > .form-select,
.pago-form-row > .form-date {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Compacta el espaciado vertical de las filas de datos: el hueco entre
   campos era la suma de tres cosas — margin-bottom:15px de .form-select /
   .form-date, gap:15px de .form-row, y el espacio propio entre la fila del
   label y la del input dentro de cada tabla. Solo aplica a .pago-form-row,
   así que no toca el resto del sitio. */
.pago-form-row {
    gap: 10px;
}

    .pago-form-row > .form-select,
    .pago-form-row > .form-date {
        margin-bottom: 8px;
    }

    /* Las celdas de estas tablas de layout no necesitan padding propio; el
       único respiro que hace falta es entre el label y su input. */
    .pago-form-row table td {
        padding: 0;
    }

    .pago-form-row table tr:first-child td {
        padding-bottom: 3px;
    }

.button {
    color: #FF8136 !important;
    font-size: 12px;
    font-weight: 500;
    padding: 0.5em 1.2em;
    background: rgba(0,0,0,0);
    border: 2px solid;
    border-color: #FF8136;
    transition: all 1s ease;
    position: relative;
    /*width: 90%;*/
    /*margin: auto 180px auto auto;*/
    box-sizing: border-box;
    font-weight: bold;
}

    .button:hover {
        background: #FF8136;
        color: #fff !important;
        border-color: #FF8136;
        transition: all 1s ease;
        border: 2px solid;
        box-sizing: border-box;
    }
/*.button:active {

    }*/

.button2 {
    color: #FFF !important;
    font-size: 12px;
    font-weight: 500;
    padding: 0.5em 1.2em;
    background: #726F6E;
    border: 2px solid;
    border-color: #726F6E;
    transition: all 1s ease;
    position: relative;
    /*width: 90%;*/
    /*margin: auto 180px auto auto;*/
    box-sizing: border-box;
    font-weight: bold;
}

    .button2:hover {
        background: #FF8136;
        color: #fff !important;
        border-color: #FF8136;
        transition: all 1s ease;
        border: 2px solid;
        box-sizing: border-box;
    }
/*.button2:active {

    }*/

label {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 5px;
}

    label.required {
        position: relative;
    }

        label.required:after {
            content: '*';
            margin-left: 2px;
            color: #b90000;
        }

/* asp:Label se renderiza como <span>, no <label>, así que la regla de
   arriba (label.required:after) no le aplica el asterisco. Esta variante
   por clase cubre ambos casos sin duplicar el asterisco (la regla más
   específica de arriba gana cuando el elemento sí es <label>). */
.required:after {
    content: '*';
    margin-left: 2px;
    color: #b90000;
}

/* Mensajes de campo obligatorio / formato inválido (asp:RequiredFieldValidator,
   asp:RegularExpressionValidator) en PagoenLineaUV.aspx y páginas similares. */
.pago-field-error {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: bold;
    color: #b90000;
}

/* asp:ValidationSummary: lista de errores antes de enviar el formulario. */
.pago-validation-summary {
    display: block;
    margin: 10px 0 15px 0;
    padding: 10px 14px;
    border: 1px solid #b90000;
    border-radius: 5px;
    background: #fff5f5;
    color: #b90000;
    font-size: 12px;
}

    .pago-validation-summary ul {
        margin: 4px 0 0 18px;
        padding: 0;
        list-style: disc;
        display: block;
    }

        .pago-validation-summary ul li {
            margin-bottom: 2px;
        }

.steps {
    margin-bottom: 23px;
}

    .steps ul {
        flex-wrap: wrap;
        justify-content: space-between;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -o-justify-content: space-between;
        -ms-justify-content: space-between;
        gap: 10px;
    }

a {
    text-decoration: none;
}

.icon {
    font-size: 32px;
}

.title {
    background: #8A8A8A;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
    flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    width: 90px;
    height: 90px;
    color: #fff;
}

.title_text {
    margin-top: -5px;
}

.current .title {
    background: #FF8136;
    font-weight: bold;
    color: #726F6E;
}

.content h3 {
    display: none;
}

fieldset {
    border: none;
    margin: 0px;
    padding: 0px;
}

.actions {
    margin-top: 25px;
}

    .actions .disabled {
        display: none;
    }

    .actions ul {
        flex-wrap: wrap;
        justify-content: flex-end;
        -moz-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -o-justify-content: flex-end;
        -ms-justify-content: flex-end;
        gap: 10px;
    }

        .actions ul li {
            margin-left: 10px;
        }

            .actions ul li:first-child a {
                background: #adadad;
            }

            .actions ul li a {
                background: #8A8A8A;
                width: 130px;
                height: 50px;
                color: #fff;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -o-border-radius: 5px;
                -ms-border-radius: 5px;
                justify-content: center;
                -moz-justify-content: center;
                -webkit-justify-content: center;
                -o-justify-content: center;
                -ms-justify-content: center;
                align-items: center;
                -moz-align-items: center;
                -webkit-align-items: center;
                -o-align-items: center;
                -ms-align-items: center;
            }

                .actions ul li a:hover {
                    background-color: #FF8136;
                    font-weight: bold;
                    color: #fff;
                }

label.error {
    display: block;
    position: absolute;
    top: 0px;
    right: 0;
}

    label.error:after {
        font-family: 'themify';
        position: absolute;
        content: '\e717';
        right: 20px;
        top: 40px;
        font-size: 12px;
        color: #ff1212;
    }

input.error {
    border: 1px solid #ff1212;
}

ul.list-item {
    z-index: 9;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    display: block;
}

    ul.list-item li {
        padding: 13px 20px;
        z-index: 2;
        color: #222;
        font-size: 13px;
    }

        ul.list-item li:not(.init) {
            display: none;
            background: #fff;
            color: #222;
            padding: 5px 20px;
        }

            ul.list-item li:not(.init):hover, ul.list-item li.selected:not(.init) {
                background: #fa5e5b;
                color: #fff;
            }

li.init {
    cursor: pointer;
    position: relative;
}

    li.init:after {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        font-size: 12px;
        color: #222;
        font-family: 'themify';
        content: '\e64b';
    }

legend {
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    margin-bottom: 20px;
}

    legend span {
        display: inline-block;
    }

.step-heading {
    color: #FF8136;
    float: left;
    font-weight: bold;
}

.step-number {
    float: right;
}

.form-date-item {
    position: relative;
    overflow: hidden;
}

    .form-date-item:after {
        position: absolute;
        content: '';
        width: 1px;
        height: 30px;
        background: #ebebeb;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .form-date-item:last-child:after {
        width: 0px;
    }

    .form-date-item .select-icon {
        z-index: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -o-justify-content: center;
        -ms-justify-content: center;
        align-items: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        -o-align-items: center;
        -ms-align-items: center;
    }

        .form-date-item .select-icon i {
            justify-content: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -o-justify-content: center;
            -ms-justify-content: center;
            align-items: center;
            -moz-align-items: center;
            -webkit-align-items: center;
            -o-align-items: center;
            -ms-align-items: center;
            width: 30px;
            height: 20px;
            font-size: 10px;
            color: #222;
        }

.ui-datepicker-trigger {
    position: absolute;
    right: 10px;
    top: 20px;
    color: #222;
    font-size: 12px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.form-date-group {
    flex-wrap: wrap;
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

    .form-date-group select {
        border: none;
        width: 90px;
        box-sizing: border-box;
        appearance: none !important;
        -moz-appearance: none !important;
        -webkit-appearance: none !important;
        -o-appearance: none !important;
        -ms-appearance: none !important;
        position: relative;
        background: 0 0;
        z-index: 10;
        cursor: pointer;
    }

.select-list {
    position: relative;
    display: inline-block;
    width: 100%;
    /*margin-bottom: 47px;*/
}

    .select-list.disabled {
        border: 1px solid #726F6E;
    }

.list-item {
    position: absolute;
    width: 100%;
    z-index: 99;
}

@media screen and (max-width: 1024px) {
    .container, .container2 {
        width: calc(100% - 60px);
        max-width: 630px;
    }
}

@media screen and (max-width: 768px) {
    .container, .container2 {
        width: calc(100% - 40px);
        max-width: 100%;
    }
    /*    .footer_bottom {
        width: calc(100% - 40px);
        max-width: 100%;
    }*/

    .steps ul, .form-row {
        flex-direction: column;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -o-flex-direction: column;
        -ms-flex-direction: column;
    }

    .title {
        width: 150px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .form-row .form-date, .form-row .form-select {
        width: 100%;
    }

    /* .form-row pasa a flex-direction:column en este breakpoint (regla de
       arriba), lo que en las filas de Nombres/Apellidos y Nro Documento/
       Fec. Nacimiento (.pago-form-row) convierte el flex-basis en alto en
       vez de ancho, dejando cajas altas con espacio en blanco. Esas filas
       ya se apilan correctamente por el "width: 100%" de arriba, así que
       se les mantiene flex-direction:row (una sola columna, altura normal). */
    .pago-form-row {
        flex-direction: row;
    }

    .actions ul {
        flex-direction: column;
        align-items: stretch;
    }

        .actions ul li {
            margin-left: 0;
            width: 100%;
        }

            .actions ul li a {
                width: 100%;
            }
}

/* Nombres/Apellidos (2 campos angostos) y Nro Documento/Fec. Nacimiento (un
   campo + el panel de fecha, más ancho) tienen contenido de distinto ancho,
   así que con el flex-wrap orgánico de .form-row cada fila se apilaba en un
   punto distinto (una ya en 1 columna mientras la otra seguía en 2) según
   el ancho de viewport. Para que ambas filas cambien de 2 a 1 columna
   exactamente en el mismo punto, se anula ese wrap orgánico (flex-wrap:
   nowrap, ver regla sin @media más abajo) y se fuerza el cambio a columna
   con un solo breakpoint explícito compartido por las dos filas. */
@media screen and (max-width: 700px) {
    /* Apilado: el gap pasa a ser el espacio VERTICAL entre los dos campos de
       la misma fila, así que se reduce igual que el resto del espaciado. */
    .pago-form-row {
        flex-direction: column;
        gap: 8px;
    }

        /* Con flex-direction:column el eje principal pasa a ser vertical, así
       que el "flex: 1 1 160px" / "flex: 2 1 266px" de .form-row .form-select
       / .form-row .form-date (pensado como ANCHO en fila) pasa a leerse como
       ALTO — mismas cajas altas con espacio en blanco que ya se había
       arreglado antes para el breakpoint de 768px. Se resetea el flex-basis
       a auto (alto natural) y el ancho lo controla el width:100% de abajo. */
        .pago-form-row .form-select,
        .pago-form-row .form-date {
            flex: 0 1 auto;
            width: 100%;
        }
}

@media screen and (max-width: 480px) {
    .signup-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main {
        padding-top: 30px;
    }

    .container, .container2 {
        width: calc(100% - 20px);
        margin-top: 15px;
    }

    .title {
        width: 100px;
        height: 100px;
    }

    .form-date-group select {
        width: 70px;
    }

    /* Botones de acción (submit / atrás) a ancho completo */
    .button, .button2 {
        width: 100%;
        text-align: center;
        display: block;
        box-sizing: border-box;
    }

    h2 {
        font-size: 11px;
    }

    /* Banner superior más compacto en pantallas chicas.
       min-height (no height) para que páginas que meten texto extra
       dentro de .footer_up, como Mantenimiento.aspx, puedan crecer
       sin desbordarse sobre el contenido siguiente. */
    .footer_up {
        min-height: 70px;
        background-size: cover;
        background-position: center;
    }

    /* Las tablas de layout (SUCURSAL/RAMO, datos de póliza, detalle de
     saldo por antigüedad) usan width:100% con varias columnas fijas;
     en vez de romper la alineación entre etiqueta y valor, se
     permite scroll horizontal dentro de la propia tabla. */
    .signup-form table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

        /* Excepción para la cabecera (logo + "Pago en Línea") y para las tablas
           de una sola columna: con display:block el navegador genera una TABLA
           ANÓNIMA interna para las filas, y esa tabla toma ancho de contenido en
           vez del 100% del bloque. Resultado: el contenido se pega a la
           izquierda aunque el <th> tenga text-align:center. Estas tablas no
           tienen varias columnas, así que no necesitan el scroll. */
        .signup-form table.table-header {
            display: table;
            overflow-x: visible;
        }

    /* Excepción: las tablas de .pago-form-row son de una sola columna y ya
       encajan; con display:block heredado de la regla de arriba el input
       perdería el ancho de la celda. */
    .signup-form .pago-form-row table {
        display: table;
        overflow-x: visible;
    }
}

@media screen and (max-width: 360px) {
    .form-date-group {
        flex-wrap: wrap;
    }

        .form-date-group select {
            width: 33.33%;
        }
}

.footer_up {
    /*float: left;*/
    min-height: 100px;
    /*width: 100%;*/
    background-image: url(../Images/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-size: 12px;
    color: #fff;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}

.footer_bottom {
    height: 10px;
    /* Antes: background-image url(../Images/footer-bottom.jpg) con no-repeat y
       sin background-size. Si la imagen es más angosta que la tarjeta, la barra
       se ve cortada a la mitad; si es más ancha, se recorta. Se reemplaza por
       el naranja de marca, que da el mismo remate a cualquier ancho.
       El border-radius sin prefijo faltaba: solo estaba la variante -webkit-,
       así que en varios navegadores las esquinas salían rectas contra la
       tarjeta redondeada de arriba. */
    background: #FF8136;
    background-image: none;
    font-size: 12px;
    color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

.space {
    padding-top: 50px;
    padding-bottom: 30px;
}

/* ============================================================
   INTRO ANIMATION — Logo UniVivir + "Pago en línea"
   Usada en PagoenLinea.aspx. Se muestra una sola vez al cargar
   la página, encima de todo (#pagoIntro), y luego revela el
   contenido real del formulario (#pagoContent) sin tocar ningún
   control de WebForms ni su funcionalidad.
   Ver también: js/pago-intro.js
   ============================================================ */
#pagoIntro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}

    #pagoIntro.pago-intro-hide {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.pago-intro-logo {
    opacity: 0;
    transform: translateY(14px) scale(.92);
    animation: pagoLogoIn .7s cubic-bezier(.2,.7,.3,1) forwards;
}

    .pago-intro-logo img {
        width: 240px;
        max-width: 70vw;
        height: auto;
        display: block;
    }

@keyframes pagoLogoIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pago-intro-divider {
    width: 0;
    height: 2px;
    background: #FF8136;
    margin: 22px 0;
    animation: pagoGrowLine .5s ease-out .85s forwards;
}

@keyframes pagoGrowLine {
    to {
        width: 72px;
    }
}

.pago-intro-headline {
    display: flex;
    gap: .28em;
    font-size: 22px;
    font-weight: 500;
    color: #726F6E;
}

    .pago-intro-headline .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        animation: pagoWordIn .5s ease-out forwards;
    }

        .pago-intro-headline .word.strong {
            color: #143339;
            font-weight: 700;
        }

        .pago-intro-headline .word:nth-child(1) {
            animation-delay: 1.10s;
        }

        .pago-intro-headline .word:nth-child(2) {
            animation-delay: 1.28s;
        }

        .pago-intro-headline .word:nth-child(3) {
            animation-delay: 1.46s;
        }

@keyframes pagoWordIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenido real del formulario: permanece en el DOM (los controles y el
   postback funcionan igual) pero oculto visualmente hasta que termina la
   animación de intro; ver js/pago-intro.js */
#pagoContent {
    opacity: 0;
}

    #pagoContent.is-visible {
        /* Sin transición: el "reveal" ya lo aporta el logo aterrizando
           (FLIP, ver js/pago-intro.js) y el título animándose palabra por
           palabra; una transición de opacidad aquí encima se vería como un
           segundo destello superpuesto al aterrizaje del logo. */
        opacity: 1;
    }

    /* En un postback (p. ej. al hacer clic en BtnContinuar) #pagoIntro no se
   renderiza (ver Page.IsPostBack en el .aspx) y pago-intro.js agrega esta
   clase junto con "is-visible": todo debe verse de una sola vez, sin ningún
   rastro de la animación de intro. */
    #pagoContent.pago-skip-intro,
    #pagoContent.pago-skip-intro .pago-final-logo,
    #pagoContent.pago-skip-intro .pago-form-title .word {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

/* Logo en su posición final: arriba del título "Pago en Línea", centrado.
   Permanece invisible (pero ya maquetado, para poder medir su posición)
   hasta que js/pago-intro.js termina de "volar" el logo de la intro hasta
   aquí y lo revela en el mismo instante en que aterriza. */
.pago-final-logo {
    display: block;
    margin: 0 auto 10px auto;
    width: 200px;
    max-width: 75vw;
    height: auto;
    opacity: 0;
}

#pagoContent.is-visible .pago-final-logo {
    opacity: 1;
}

/* Variante "estática" del logo + título de arriba, siempre visible: para
   páginas que muestran el mismo logo + "Pago en Línea" pero sin la pantalla
   de intro (p. ej. Confirmar.aspx). A diferencia de .pago-final-logo /
   .pago-form-title, no dependen de #pagoContent.is-visible ni de
   js/pago-intro.js para revelarse — no hace falta incluir ese script. */
.pago-static-logo {
    display: block;
    margin: 0 auto 10px auto;
    width: 200px;
    max-width: 75vw;
    height: auto;
}

.pago-static-title {
    display: flex;
    justify-content: center;
    gap: .28em;
    margin: 0;
    font-weight: 500;
    color: #726F6E;
}

    .pago-static-title .strong {
        color: #143339;
        font-weight: 700;
    }

/* Clon temporal que crea js/pago-intro.js para animar el logo desde la
   posición de la intro hasta .pago-final-logo (técnica FLIP). Se agrega y
   se quita del <body> dinámicamente; nunca queda en el DOM. */
.pago-logo-flip-clone {
    position: fixed;
    z-index: 10000;
    margin: 0;
    pointer-events: none;
    transform-origin: top left;
}

/* Título "Pago en Línea" dentro del propio formulario — mismo efecto de
   palabra por palabra que la pantalla de intro (.pago-intro-headline),
   pero centrado y disparado cuando #pagoContent se revela (clase
   .is-visible agregada por js/pago-intro.js), en vez de con un delay fijo. */
.pago-form-title {
    display: flex;
    justify-content: center;
    gap: .28em;
    margin: 0;
    font-weight: 500;
    color: #726F6E;
}

    .pago-form-title .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
    }

        .pago-form-title .word.strong {
            color: #143339;
            font-weight: 700;
        }

/* El título repite su entrada cada 30 segundos. En vez de un temporizador en
   JavaScript, el ciclo completo de la animación DURA 30s: el movimiento ocurre
   en el primer 1.667% (0.5s de 30s) y el resto del tiempo la palabra se queda
   quieta en su posición final. Así el navegador maneja el loop solo, sin
   timers que se desincronicen ni trabajo en el hilo principal.
   Los animation-delay siguen escalonando las palabras, y como el delay se
   aplica una sola vez al inicio, el escalonamiento se conserva en cada
   repetición. */
#pagoContent.is-visible .pago-form-title .word {
    animation: pagoWordLoop 30s ease-out infinite;
}

    #pagoContent.is-visible .pago-form-title .word:nth-child(1) {
        animation-delay: 0s;
    }

    #pagoContent.is-visible .pago-form-title .word:nth-child(2) {
        animation-delay: .18s;
    }

    #pagoContent.is-visible .pago-form-title .word:nth-child(3) {
        animation-delay: .36s;
    }

@keyframes pagoWordLoop {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    1.667% { /* 0.5s de 30s: misma duración de entrada que pagoWordIn */
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #pagoIntro, .pago-intro-logo, .pago-intro-divider, .pago-intro-headline .word,
    .pago-form-title .word, .pago-final-logo {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #pagoIntro {
        display: none !important;
    }

    #pagoContent {
        opacity: 1 !important;
    }
}

/* ============================================================
   Planes +Fibra / Un Giga — tarjetas de promoción en
   PagoenLineaUV.aspx (después de Fec. Nacimiento). Puramente
   visual, sin controles server-side. Responsive con un único
   breakpoint (@media min-width:860px, más abajo): en pantallas
   chicas las 3 tarjetas van una debajo de otra (ancho completo) y
   en pantallas grandes van las 3 al lado, en partes iguales.
   Antes esto se resolvía con flex-wrap orgánico (ancho mínimo de
   260px por tarjeta), pero eso permitía un estado intermedio de
   2 tarjetas en una fila y la 3ra sola abajo — se reemplaza por
   el breakpoint fijo para que solo existan los 2 estados: 1 o 3. */
.promo-plans {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 22px;
    /* padding-top deja aire para el .promo-plan-badge, que sobresale por
       encima del borde superior de la tarjeta destacada. */
    padding-top: 12px;
    margin: 20px 0 25px 0;
}

.promo-plan-card {
    position: relative; /* ancla del .promo-plan-badge */
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /* Color base (manual 4.4: 40%) con borde en Dark Sky. Antes el borde era
       naranja en las 3 tarjetas, lo que gastaba el presupuesto del naranja
       (30%) sin aportar jerarquía; el Dark Sky ya es el color con el que
       cierra la tarjeta destacada, así que la fila queda cohesionada. */
    background: #fff;
    border: 1px solid #143339;
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: 0px 2px 6px 0px rgba(20, 51, 57, 0.05);
}

.promo-plan-header {
    padding: 20px 16px 10px 16px;
    text-align: center;
    /* Separador interno en Dark Sky al 12%: acompaña al borde de la tarjeta
       sin competir con él ni marcar una segunda línea dura. */
    border-bottom: 1px solid rgba(20, 51, 57, .12);
    background: transparent;
}

.promo-plan-icons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

    .promo-plan-icons .icon-badge {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(11, 218, 183, .15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

.promo-plan-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #726F6E;
}

/* Badge "Más completa" de la opción recomendada: Aquamarine como color de
   acento (manual 4.4: 20%), montado sobre el borde superior de la tarjeta.
   El texto va en Dark Sky porque el turquesa no da contraste suficiente
   con blanco. */
.promo-plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0BDAB7;
    color: #143339;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.promo-plan-body {
    padding: 16px 16px 6px 16px;
    text-align: center;
}

.promo-plan-price {
    font-size: 30px;
    font-weight: 800;
    color: #143339;
    line-height: 1.1;
}

    .promo-plan-price .tax {
        font-size: 11px;
        font-weight: 600;
        color: #726F6E;
    }

.promo-plan-oldprice {
    font-size: 12px;
    color: #908E8D;
    margin-top: 2px;
}

/* CTA de las opciones no destacadas: naranja en versión outline. El único
   naranja sólido de la fila es el de la tarjeta destacada, para que la
   jerarquía la marque el color y no el tamaño. */
.promo-plan-btn {
    display: inline-block;
    margin: 14px 0 4px 0;
    padding: 10px 30px;
    border-radius: 30px;
    background: #fff;
    border: 2px solid #FF8136;
    color: #FF8136 !important;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    background-image: none; /* anula el underline-swipe de la regla global a{} */
    transition: background-color .25s ease, color .25s ease;
}

    .promo-plan-btn:hover, .promo-plan-btn:focus {
        background: #FF8136;
        color: #fff !important;
        background-size: auto; /* idem, evita el swipe también en hover/focus */
    }

/* ---------- Opción intermedia (Aquamarine, manual 4.4: 20%) ---------- */
.promo-plan-card.is-accent {
    background: #0BDAB7;
    border-color: #0BDAB7;
}

    /* Badge sobre fondo Aquamarine: Dark Sky con texto blanco. El blanco
       sobre blanco no resaltaba (el badge se leía como parte de la tarjeta),
       y el Aquamarine del badge estándar desaparecería contra el fondo. Es
       la inversión exacta del badge de la tarjeta destacada: allí Aquamarine
       sobre Dark Sky, aquí Dark Sky sobre Aquamarine. */
    .promo-plan-card.is-accent .promo-plan-badge {
        background: #143339;
        color: #fff;
    }

    .promo-plan-card.is-accent .promo-plan-header {
        border-bottom-color: rgba(20, 51, 57, .22);
    }

    /* Todo el texto en Dark Sky: sobre Aquamarine da ~7:1 de contraste, muy
       por encima del mínimo AA. El gris #726F6E del título no llegaría. */
    .promo-plan-card.is-accent .promo-plan-title,
    .promo-plan-card.is-accent .promo-plan-price,
    .promo-plan-card.is-accent .promo-plan-features li,
    .promo-plan-card.is-accent .promo-plan-features li strong {
        color: #143339;
    }

        .promo-plan-card.is-accent .promo-plan-price .tax,
        .promo-plan-card.is-accent .promo-plan-oldprice,
        .promo-plan-card.is-accent .promo-plan-features li small {
            color: #04493D;
        }

        /* Los checks vienen con stroke="#0BDAB7" en el markup y aquí quedarían
       invisibles contra el fondo. La propiedad CSS "stroke" gana sobre el
       atributo de presentación del SVG, así que no hay que tocar el .aspx. */
        .promo-plan-card.is-accent .promo-plan-features li svg circle,
        .promo-plan-card.is-accent .promo-plan-features li svg path {
            stroke: #143339;
        }

    /* CTA en blanco con texto Dark Sky: el naranja sólido sigue siendo
       exclusivo de la tarjeta destacada, y un naranja outline sobre
       Aquamarine desentonaría. */
    .promo-plan-card.is-accent .promo-plan-btn {
        background: #fff;
        border-color: #fff;
        color: #143339 !important;
    }

        .promo-plan-card.is-accent .promo-plan-btn:hover,
        .promo-plan-card.is-accent .promo-plan-btn:focus {
            background: #143339;
            border-color: #143339;
            color: #fff !important;
        }

/* ---------- Opción destacada (Dark Sky, manual 4.4: 10%) ---------- */
.promo-plan-card.is-featured {
    background: #143339;
    border-color: #143339;
    box-shadow: 0px 8px 22px 0px rgba(20, 51, 57, 0.20);
}

    .promo-plan-card.is-featured .promo-plan-header {
        border-bottom-color: rgba(255, 255, 255, .14);
    }

    .promo-plan-card.is-featured .promo-plan-title {
        color: #0BDAB7;
    }

    .promo-plan-card.is-featured .promo-plan-price {
        color: #fff;
    }

        .promo-plan-card.is-featured .promo-plan-price .tax,
        .promo-plan-card.is-featured .promo-plan-oldprice {
            color: #B1ADAA;
        }

    .promo-plan-card.is-featured .promo-plan-features li {
        color: #E7E4E1;
    }

        .promo-plan-card.is-featured .promo-plan-features li strong {
            color: #fff;
        }

    /* Naranja sólido: único CTA lleno de la fila. */
    .promo-plan-card.is-featured .promo-plan-btn {
        background: #FF8136;
        border-color: #FF8136;
        color: #fff !important;
    }

        /* Naranja -> gris de marca. Antes iba a #F75C00 (escalón 70 de la
           rampa naranja), un cambio tan sutil que el hover no se percibía. */
        .promo-plan-card.is-featured .promo-plan-btn:hover,
        .promo-plan-card.is-featured .promo-plan-btn:focus {
            background: #726F6E;
            border-color: #726F6E;
            color: #fff !important;
        }

.promo-plan-tv {
    position: relative;
    margin-top: 14px;
    padding: 16px 10px 10px 10px;
    background: #f2f2f2;
    text-align: center;
    overflow: hidden;
}

.promo-plan-ribbon {
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(35deg);
    background: #e53935;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    padding: 4px 40px;
    white-space: nowrap;
}

.promo-plan-tv-graphic {
    display: block;
    margin: 0 auto;
}

.promo-plan-tv-caption {
    font-size: 11px;
    font-weight: 700;
    color: #143339;
    margin-top: 6px;
}

    .promo-plan-tv-caption span {
        display: block;
        color: #726F6E;
        font-weight: 600;
        margin-top: 1px;
    }

ul.promo-plan-features,
.promo-plan-features {
    list-style: none !important;
    margin: 0 !important;
    padding: 14px 16px 18px 16px !important;
    display: block !important;
    flex-direction: column !important;
    flex: 1;
}

    ul.promo-plan-features li,
    .promo-plan-features li {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        color: #484746;
        text-align: left;
        margin-bottom: 10px;
        width: 100%;
    }

        .promo-plan-features li:last-child {
            margin-bottom: 0;
        }

        .promo-plan-features li svg {
            flex: none;
            margin-top: 1px;
        }

        .promo-plan-features li span {
            flex: 1 1 auto;
            min-width: 0;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .promo-plan-features li small {
            display: block;
            width: 100%;
            margin-left: 24px;
            margin-top: 2px;
            color: #908E8D;
        }

/* Punto donde ya entran cómodas las 3 tarjetas una al lado de la otra
   dentro de .container-wide (max-width:960px, con el padding lateral de
   .signup-form descontado). Por debajo de este ancho quedan apiladas
   (ver .promo-plans más arriba) — nunca hay un estado de 2 en una fila
   y 1 sola abajo. */
@media screen and (min-width: 860px) {
    .promo-plans {
        flex-direction: row;
    }

    .promo-plan-card {
        flex: 1 1 0;
        width: auto;
    }
}

/* ============================================================
   Fila de Términos y Condiciones — PagoenLineaUV.aspx
   Dos mitades iguales con un divisor vertical al centro: a la
   izquierda el check (alineado a la derecha, pegado al divisor) y
   a la derecha el botón Limpiar.
   ============================================================ */
.pago-terminos {
    display: flex;
    align-items: center;
    margin: 4px 0;
}

/* flex-basis 0 + grow 1 en ambas mitades: el divisor queda exactamente
       al centro sin importar el largo del texto del enlace. */
.pago-terminos-check,
.pago-terminos-accion {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

.pago-terminos-check {
    /* flex-start: el check y su texto arrancan en el borde izquierdo de su
           mitad, no pegados al divisor. El espacio entre el texto y el divisor
           queda libre a propósito. */
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 18px 6px 0;
    /* El divisor se dibuja como borde de la mitad izquierda, no como un
           elemento aparte: así desaparece solo al apilar (ver el @media). */
    border-right: 1px solid rgba(20, 51, 57, .18);
}

.pago-terminos-accion {
    justify-content: flex-end;
    padding: 6px 0 6px 18px;
}

/* El enlace traía los estilos en atributo style; pasa a clase para poder
   ajustarlo en el breakpoint. */
.pago-terminos-link {
    font-size: 13px;
    font-weight: 700;
    color: #FF8136;
    line-height: 1.3;
}

/* asp:CheckBox se renderiza envuelto en un <span>, que como hijo flex se
   encogería; flex:none lo mantiene en su tamaño. */
.pago-terminos-check span {
    flex: none;
}

@media screen and (max-width: 560px) {
    /* Apilado: el divisor pasa de vertical a horizontal y todo se centra.
       En una sola columna, mantener el check pegado a la derecha dejaría el
       texto descolgado del centro visual de la tarjeta. */
    .pago-terminos {
        flex-direction: column;
        align-items: stretch;
    }

    .pago-terminos-check {
        justify-content: center;
        padding: 8px 0;
        border-right: none;
        border-bottom: 1px solid rgba(20, 51, 57, .18);
    }

    .pago-terminos-accion {
        justify-content: center;
        padding: 10px 0 4px 0;
    }

        .pago-terminos-accion .pago-btn-limpiar {
            width: 100%;
        }
}

/* Botón "Limpiar" de la fila de Términos y Condiciones (PagoenLineaUV.aspx).
   Aquamarine con texto blanco, mismo lenguaje de píldora que los CTA de las
   tarjetas (border-radius 30px, peso 800) pero más chico, porque es una
   acción secundaria.
   display:inline-block + width:auto son OBLIGATORIOS: la regla global
   "input, select" del sitio impone display:block y width:100%, que dejaría
   este botón ocupando todo el ancho de la celda. */
.pago-btn-limpiar {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
    border: 2px solid #0BDAB7;
    border-radius: 30px;
    background: #0BDAB7;
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .25s ease, border-color .25s ease;
}

    .pago-btn-limpiar:hover, .pago-btn-limpiar:focus {
        /* Escalón 70 de la rampa aquamarine del manual. */
        background: #09AA8F;
        border-color: #09AA8F;
    }

/* ============================================================
   Pantalla "Procesando pago" — ConfirmarUV.aspx
   Cubre la página mientras se envía el formulario a CyberSource.
   ============================================================ */
.pago-procesando {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.pago-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid rgba(255, 129, 54, .2);
    border-top-color: #FF8136;
    border-radius: 50%;
    animation: pagoSpin .9s linear infinite;
}

@keyframes pagoSpin {
    to {
        transform: rotate(360deg);
    }
}

.pago-procesando-texto {
    font-size: 15px;
    font-weight: 600;
    color: #143339;
    letter-spacing: .3px;
}

@media (prefers-reduced-motion: reduce) {
    /* Sin giro: el borde superior naranja queda fijo y el texto sigue
       comunicando el estado. */
    .pago-spinner {
        animation: none;
    }
}

/* ============================================================
   Continuidad entre .container (formulario) y .container2 (pie)
   Las dos piezas deben leerse como una sola tarjeta: sin franja del
   fondo gris entre ellas.
   ============================================================ */
.main {
    padding-bottom: 0;
}

.main2 {
    padding-top: 0;
}

.container {
    margin-bottom: 0;
}

.container2 {
    margin-top: 0;
}

/* El margen inferior del último elemento dentro del formulario se
   "escapaba" por debajo de la tarjeta (margin collapsing) y abría el hueco.
   Los asp:Panel ocultos o vacíos tampoco deben aportar alto. */
.signup-form > *:last-child {
    margin-bottom: 0;
}

.signup-form table {
    margin-bottom: 0;
}

/* ============================================================
   Ajustes para móviles — PagoenLinea.aspx
   Solo estilos: no cambian controles, IDs ni el postback.
   ============================================================ */
@media screen and (max-width: 768px) {
    /* iOS hace zoom automático al enfocar cualquier campo con menos de
       16px, y deja la página descuadrada. Es la causa del salto que se ve
       al tocar "Nro. Póliza" en un iPhone real (el emulador de Chrome no
       lo reproduce). 16px es el mínimo que evita ese zoom. */
    .signup-form input,
    .signup-form select,
    .signup-form textarea {
        font-size: 16px;
    }

    /* Área táctil: 44px es el mínimo recomendado para dedo. Con el padding
       de 8px y 10px de fuente los campos quedaban en ~30px. */
    .signup-form input,
    .signup-form select {
        min-height: 44px;
        padding: 10px 12px;
    }
}

/* Fila de NRO. PÓLIZA: el campo debe quedarse con todo el ancho sobrante y
   los botones "..." y "X" con lo justo. Sin esto, la regla global
   "input, select { display:block; width:100% }" estira los asp:Button
   dentro de su celda y desequilibra la fila. */
.pago-pol-row table {
    width: 100%;
}

    .pago-pol-row table td:first-child {
        width: 100%;
    }

    .pago-pol-row table td + td {
        width: 52px;
        padding-left: 6px;
    }

        .pago-pol-row table td + td input {
            width: 100%;
            min-width: 44px;
            box-sizing: border-box;
        }

/*# sourceMappingURL=style.css.map */