/*--------------------------------------------------------------
# Register Page Modern Styles
# Solo overrides CSS - No modificaciones HTML/JS
# IMPORTANTE: Todos los estilos tienen scope limitado para no afectar header/footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Box Border Styles
--------------------------------------------------------------*/
.box_left {
    background: url('/MyAccount/images/top_left_main_menu.gif') no-repeat !important;
    width: 13px !important;
}

.box_middle {
    background: url('/MyAccount/images/top_span.gif') repeat-x !important;
    height: 43px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    color: #000 !important;
    vertical-align: middle !important;
}

.box_right {
    background: url('/MyAccount/images/top_right_main.gif') no-repeat !important;
    width: 13px !important;
    height: 43px !important;
}

/* Asegurar que las tablas del box no tengan bordes visibles */
#about table[cellpadding="0"][cellspacing="0"],
.pageoutline > table {
    border: none !important;
    border-collapse: collapse !important;
}

#about table[cellpadding="0"][cellspacing="0"] td,
.pageoutline > table td {
    border: none !important;
}

/*--------------------------------------------------------------
# General Form Container
--------------------------------------------------------------*/
#about .pageoutline,
.pageoutline {
    max-width: 630px;
    margin: 0 auto;
    background-color: transparent;
    border: none !important;
    margin-top: 20px;
}

#about .mainbody,
.mainbody {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444444;
    padding: 20px;
    background-color: #ffffff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
}

#about .main,
.main {
    font-family: "Open Sans", sans-serif;
    max-width: 630px;
    margin: 0 auto;
    background-color: transparent !important;
}

/*--------------------------------------------------------------
# Fieldsets
--------------------------------------------------------------*/
#about fieldset,
.mainbody fieldset {
    border: 1px solid #cccccc !important;
    border-radius: 0px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#about legend,
.mainbody legend {
    color: #124265 !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    padding: 0 10px !important;
    border: none !important;
    width: auto !important;
    margin-bottom: 0 !important;
    font-family: "Open Sans", sans-serif !important;
}

/*--------------------------------------------------------------
# Inputs y TextBoxes
# Scope: Solo dentro de #about (formulario) y .mainbody
--------------------------------------------------------------*/
#about input[type="text"],
#about input[type="password"],
#about input[type="email"],
#about textarea,
#about select,
.mainbody input[type="text"],
.mainbody input[type="password"],
.mainbody input[type="email"],
.mainbody textarea,
.mainbody select {
    background-color: #FFFFCC !important;
    border: 1px solid #9999FF !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    font-weight: normal !important;
}

/* Estilos específicos para inputs y textarea */
#about input[type="text"],
#about input[type="password"],
#about input[type="email"],
#about textarea,
.mainbody input[type="text"],
.mainbody input[type="password"],
.mainbody input[type="email"],
.mainbody textarea {
    border-radius: 0px !important;
    padding: 3px 5px !important;
    height: 22px !important;
    line-height: normal !important;
}

/* Estilos específicos para select - minimal styling */
#about select,
.mainbody select {
    height: 22px !important;
    /* Resetear estilos de Bootstrap */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-image: none !important;
    padding: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
}

/* Focus para inputs, password, email y textarea */
#about input[type="text"]:focus,
#about input[type="password"]:focus,
#about input[type="email"]:focus,
#about textarea:focus,
.mainbody input[type="text"]:focus,
.mainbody input[type="password"]:focus,
.mainbody input[type="email"]:focus,
.mainbody textarea:focus {
    background-color: #FFFFCC !important;
    border-color: #6666CC !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Focus para select - solo cambiar borde */
#about select:focus,
.mainbody select:focus {
    border-color: #6666CC !important;
}

/* Textarea - altura automática */
#about textarea,
.mainbody textarea {
    height: auto !important;
    min-height: 60px !important;
}

/* Inputs pequeños (teléfonos) */
#about input[maxlength="3"],
#about input[maxlength="4"],
.mainbody input[maxlength="3"],
.mainbody input[maxlength="4"] {
    text-align: center !important;
}

/*--------------------------------------------------------------
# Labels y texto de formulario
--------------------------------------------------------------*/
.left {
    font-weight: 500 !important;
    color: #124265 !important;
    padding-right: 15px !important;
    vertical-align: middle !important;
    font-family: "Open Sans", sans-serif !important;
}

.right {
    vertical-align: middle !important;
}

.required {
    color: #dc3545 !important;
    font-weight: bold !important;
}

/*--------------------------------------------------------------
# Botones
# Solo dentro del formulario, NO afecta header
--------------------------------------------------------------*/
#about .btn-styled,
.mainbody .btn-styled {
    font-family: "Open Sans", sans-serif !important;
    font-weight: 600 !important;
    padding: 10px 25px !important;
    border-radius: 5px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    text-transform: none !important;
}

#about .btn-submit,
.mainbody .btn-submit {
    background-color: #2487ce !important;
    color: #ffffff !important;
}

#about .btn-submit:hover,
.mainbody .btn-submit:hover {
    background-color: #1a6ba8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(36, 135, 206, 0.3) !important;
}

#about .btn-cancel,
.mainbody .btn-cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

#about .btn-cancel:hover,
.mainbody .btn-cancel:hover {
    background-color: #545b62 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

#about input[type="reset"],
#about input[type="submit"],
#about button[type="submit"],
.mainbody input[type="reset"],
.mainbody input[type="submit"],
.mainbody button[type="submit"] {
    font-family: "Open Sans", sans-serif !important;
    font-weight: 600 !important;
    padding: 8px 25px !important;
    border-radius: 5px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

/*--------------------------------------------------------------
# Checkboxes y Radio Buttons
--------------------------------------------------------------*/
#about input[type="checkbox"],
#about input[type="radio"],
.mainbody input[type="checkbox"],
.mainbody input[type="radio"] {
    margin-right: 8px !important;
    cursor: pointer !important;
}

#about .check,
.mainbody .check {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 5px 0 !important;
}

/*--------------------------------------------------------------
# Validadores y mensajes de error
--------------------------------------------------------------*/
span[style*="color:Red"],
span[style*="color:#FF0033"],
span[id*="Validator"],
span[id*="CustomValidator"] {
    color: #dc3545 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-left: 5px !important;
}

#error_results {
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    color: #721c24 !important;
    padding: 12px 20px !important;
    border-radius: 5px !important;
    margin-bottom: 20px !important;
    font-family: "Open Sans", sans-serif !important;
}

/*--------------------------------------------------------------
# Tables dentro de formularios
--------------------------------------------------------------*/
#about table,
.mainbody table {
    width: 100%;
}

#about table td,
.mainbody table td {
    padding: 5px 5px !important;
    vertical-align: middle !important;
}

/* Celdas con clase .left (labels) - alineación superior para mejor apariencia */
#about table td.left,
.mainbody table td.left {
    vertical-align: top !important;
    padding-top: 8px !important;
}

/* Celdas con clase .right (inputs) - alineación superior */
#about table td.right,
.mainbody table td.right {
    vertical-align: top !important;
}

/* Centrar logo en la tabla superior */
#about #Table5 tr:first-child td:first-child,
.mainbody #Table5 tr:first-child td:first-child {
    text-align: center !important;
    width: auto !important;
}

/*--------------------------------------------------------------
# Sección de título/header de página
--------------------------------------------------------------*/
#about h2,
.mainbody h2 {
    color: #124265 !important;
    font-weight: 600 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 1.2em !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/*--------------------------------------------------------------
# Panel de opciones de pago
--------------------------------------------------------------*/
#about #Table1 td.left,
.mainbody #Table1 td.left {
    width: 195px !important;
    text-align: right !important;
    padding-right: 10px !important;
    vertical-align: top !important;
    padding-top: 5px !important;
}

#about #Table1 td.right,
.mainbody #Table1 td.right {
    vertical-align: top !important;
    padding-top: 5px !important;
}

/* Celda que contiene la tabla ccinfo - sin padding */
#about #Table1 td[colspan="2"],
.mainbody #Table1 td[colspan="2"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
}

/* Contenedor ccinfo */
#about #ccinfo,
.mainbody #ccinfo {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Labels dentro de ccinfo - mismo ancho que Payment type */
#ccinfo table td.left {
    width: 195px !important;
    text-align: right !important;
    padding-right: 10px !important;
}

/* Alineación específica para tabla de credit card */
#ccinfo table td {
    vertical-align: top !important;
    padding: 5px 5px !important;
}

/* Labels en la sección de credit card - alineados a la derecha */
#ccinfo table td:first-child {
    text-align: right !important;
    padding-right: 10px !important;
    font-weight: 500 !important;
    color: #124265 !important;
    vertical-align: middle !important;
    width: 195px !important;
}

/* Columna de inputs */
#ccinfo table td:last-child {
    vertical-align: top !important;
    padding-top: 5px !important;
}

/* Mantener altura original de los inputs en la sección de credit card */
#ccinfo input[type="text"] {
    height: 22px !important;
    padding: 3px 5px !important;
    line-height: normal !important;
}

/*--------------------------------------------------------------
# Iframe de términos y condiciones
--------------------------------------------------------------*/
#about iframe,
.mainbody iframe {
    border: 1px solid #e6e6e6 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 10px rgba(18, 66, 101, 0.08) !important;
}

/*--------------------------------------------------------------
# Sección "About" wrapper
--------------------------------------------------------------*/
body,
body#body,
main,
main#main {
    background-image: none !important;
    background-color: white !important;
}

#about,
section#about,
section.about {
    padding: 40px 0 !important;
    background-color: white !important;
    background-image: none !important;
}

#about.section-bg,
section#about.section-bg {
    background-color: white !important;
}

#about .container,
.about .container,
section#about .container {
    max-width: 1200px;
    background-color: white !important;
    background-image: none !important;
}

#about .row,
.about .row,
section#about .row {
    background-color: white !important;
    background-image: none !important;
}

#about .content,
.about .content,
section#about .content,
#about .row.content {
    background-color: white !important;
    background-image: none !important;
}

/* Forzar fondo blanco en todos los divs dentro de about */
#about > div,
#about div[class*="container"],
#about div[class*="row"],
#about div[class*="content"] {
    background-color: white !important;
    background-image: none !important;
}

/*--------------------------------------------------------------
# Spacing y márgenes generales
--------------------------------------------------------------*/
#about br,
.mainbody br {
    line-height: 1.5;
}

/* Separación entre secciones */
#about .mainbody > br,
.mainbody > br {
    display: block;
    margin: 10px 0;
}

/*--------------------------------------------------------------
# Notas y texto de ayuda
--------------------------------------------------------------*/
.note {
    font-size: 13px !important;
    color: #6c757d !important;
    font-style: italic !important;
}

.style4 {
    font-family: "Open Sans", sans-serif !important;
}

span[style*="font-size:0.8em"] {
    color: #6c757d !important;
    font-style: italic !important;
}

/*--------------------------------------------------------------
# Sección de sellos de seguridad
--------------------------------------------------------------*/
#about table[title*="VeriSign"],
#about table[title*="security"],
.mainbody table[title*="VeriSign"],
.mainbody table[title*="security"] {
    margin: 10px auto !important;
}

#about table[title*="VeriSign"] img,
#about table[title*="security"] img,
.mainbody table[title*="VeriSign"] img,
.mainbody table[title*="security"] img {
    transition: transform 0.3s ease !important;
}

#about table[title*="VeriSign"] img:hover,
#about table[title*="security"] img:hover,
.mainbody table[title*="VeriSign"] img:hover,
.mainbody table[title*="security"] img:hover {
    transform: scale(1.05) !important;
}

/*--------------------------------------------------------------
# Links - Solo dentro del formulario
--------------------------------------------------------------*/
#about a,
.mainbody a,
.footer a {
    color: #2487ce !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#about a:hover,
.mainbody a:hover,
.footer a:hover {
    color: #1a6ba8 !important;
    text-decoration: underline !important;
}

/*--------------------------------------------------------------
# Telerik RadControls - Ajustes mínimos
--------------------------------------------------------------*/
.RadComboBox {
    font-family: "Open Sans", sans-serif !important;
}

/* RadComboBox - Resetear TODOS los estilos del skin MetroTouch */
#about .RadComboBox,
.mainbody .RadComboBox {
    font-family: "Open Sans", sans-serif !important;
}

/* Contenedor principal del RadComboBox */
#about .RadComboBox.RadComboBox_MetroTouch,
.mainbody .RadComboBox.RadComboBox_MetroTouch {
    border: 1px solid #9999FF !important;
    background-color: #FFFFCC !important;
    height: 36px !important;
    line-height: 22px !important;
    vertical-align: middle !important;
}

/* Tabla interna del RadComboBox */
#about .RadComboBox .rcbInputCell,
.mainbody .RadComboBox .rcbInputCell,
#about .RadComboBox table,
.mainbody .RadComboBox table,
#about .RadComboBox tbody,
.mainbody .RadComboBox tbody,
#about .RadComboBox tr,
.mainbody .RadComboBox tr {
    background-color: #FFFFCC !important;
    border: none !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#about .RadComboBox td,
.mainbody .RadComboBox td {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* RadComboBox input interno */
#about .RadComboBox .rcbInput,
.mainbody .RadComboBox .rcbInput,
#about .RadComboBox input.rcbInput,
.mainbody .RadComboBox input.rcbInput {
    background-color: #FFFFCC !important;
    border: none !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    font-weight: normal !important;
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 3px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

/* RadComboBox cuando está readonly (muestra el valor seleccionado) */
#about .RadComboBox .rcbReadOnly,
.mainbody .RadComboBox .rcbReadOnly {
    background-color: #FFFFCC !important;
    border: none !important;
}

/* RadComboBox flecha/botón - hacer más pequeño */
#about .RadComboBox .rcbArrowCell,
.mainbody .RadComboBox .rcbArrowCell {
    background-color: #FFFFCC !important;
    border: none !important;
    border-left: 1px solid #9999FF !important;
    width: 20px !important;
    padding: 0 !important;
}

/* Icono de flecha dentro del botón */
#about .RadComboBox .rcbArrowCell a,
.mainbody .RadComboBox .rcbArrowCell a {
    background-color: #FFFFCC !important;
}

/* Label del RadComboBox */
#about .RadComboBox label.rcbLabel,
.mainbody .RadComboBox label.rcbLabel {
    display: none !important;
}

.RadCaptcha {
    margin: 10px 0 !important;
}

/*--------------------------------------------------------------
# Responsive - Mejoras para móviles
--------------------------------------------------------------*/
@media (max-width: 768px) {
    #about fieldset,
    .mainbody fieldset {
        padding: 20px 15px !important;
    }

    #about .left,
    .mainbody .left {
        display: block !important;
        width: 100% !important;
        padding-bottom: 5px !important;
    }

    #about .right,
    .mainbody .right {
        display: block !important;
        width: 100% !important;
    }

    #about input[type="text"],
    #about input[type="password"],
    #about input[type="email"],
    #about select,
    .mainbody input[type="text"],
    .mainbody input[type="password"],
    .mainbody input[type="email"],
    .mainbody select {
        width: 100% !important;
        max-width: 100% !important;
    }

    #about table,
    .mainbody table {
        font-size: 13px !important;
    }
}

/*--------------------------------------------------------------
# Ajustes específicos para secciones dinámicas
--------------------------------------------------------------*/
/* Panel de tipo de cuenta */
#panel_account_type {
    margin-bottom: 20px;
}

/* Panel de dirección de billing */
#panel_mailing_address fieldset {
    background-color: transparent !important;
}

/* Panel de HUD */
#panel_hud fieldset {
    background-color: transparent !important;
}

/* Panel de números de teléfono */
#panel_your_numbers fieldset {
    background-color: transparent !important;
}

/*--------------------------------------------------------------
# Mejoras de accesibilidad
--------------------------------------------------------------*/
/* Outline para buttons solamente */
#about button:focus,
.mainbody button:focus {
    outline: 2px solid #2487ce !important;
    outline-offset: 2px !important;
}

/* Mejorar contraste de placeholder */
#about input::placeholder,
#about textarea::placeholder,
.mainbody input::placeholder,
.mainbody textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/*--------------------------------------------------------------
# Footer del formulario
--------------------------------------------------------------*/
#about .footer,
.mainbody .footer {
    margin: 0 !important;
    padding: 20px !important;
    text-align: center !important;
    color: #6c757d !important;
    font-size: 13px !important;
    background-color: transparent !important;
    border: none !important;
}

/* Párrafo de soporte al final */
#about .mainbody > p:last-of-type,
.mainbody > p:last-of-type {
    padding: 20px !important;
    margin: 0 !important;
    text-align: center !important;
}

/*--------------------------------------------------------------
# Ajustes finales de consistencia
--------------------------------------------------------------*/
/* Asegurar que todos los controles ASP.NET tengan estilos consistentes */
.aspNetDisabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Espaciado consistente entre elementos de formulario */
table tr {
    margin-bottom: 5px;
}

/* Auto-style para texto de ayuda */
.auto-style1 {
    color: #6c757d !important;
    font-size: 13px !important;
}