/* Los colores de marca salen de las variables --tv-* (la hoja de la empresa las redefine): ver docs/estilos-empresa/. */
/* ==========================================================================
   Tienda Virtual - Home publico (Index.aspx)
   Paleta oficial "Atinya" (ver IdentidadMarca.md):
     - Primario:    var(--tv-color-primario, #021780) (navy)
     - Secundario 1: var(--tv-color-secundario-1, #00DCB0) (verde-azulado / teal)
     - Secundario 2: var(--tv-color-secundario-2, #DEEB6C) (lima)
   Fuente por defecto: Ubuntu (ver <link> a Google Fonts en Index.aspx)
   Un tenant puede sobreescribir estos estilos via ENEmpresa.StrEstilos
   ========================================================================== */

.tv-body {
    font-family: 'Ubuntu', sans-serif;
    color: #2c3e50;
    background: #fff;
}

.tv-body a {
    text-decoration: none;
}

/* ---------- Navbar publico (estilo atinya.com: fondo azul, letras blancas) ---------- */
.tv-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 5%;
    background: var(--tv-color-primario, #021780);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-wrap: wrap;
}

.tv-navbar-logo img {
    height: 42px;
}

.tv-navbar-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.6em;
    cursor: pointer;
    padding: 4px 8px;
}

.tv-navbar-links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.tv-navbar-links a {
    color: #fff;
    font-weight: 500;
}

.tv-navbar-links a:hover {
    color: var(--tv-color-secundario-2, #DEEB6C);
}

.tv-navbar .tv-btn-outline {
    border-color: #fff;
    color: #fff !important;
}

.tv-navbar .tv-btn-outline:hover {
    background: #fff;
    color: var(--tv-color-primario, #021780) !important;
}

.tv-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--tv-boton-radio, 6px);
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
}

.tv-btn-primary {
    background: var(--tv-color-primario, #021780);
    color: #fafafa !important;
}

.tv-btn-primary:hover {
    background: var(--tv-color-secundario-2, #DEEB6C);
    color: var(--tv-color-primario, #021780) !important;
}

.tv-btn-outline {
    border-color: var(--tv-color-primario, #021780);
    color: var(--tv-color-primario, #021780) !important;
    background: transparent;
}

.tv-btn-outline:hover {
    background: var(--tv-color-primario, #021780);
    color: #fafafa !important;
}

/* ---------- HOME_BANNER_PREVIO: cinta delgada de aviso/publicidad (no un hero) ----------
   Contenido 100% administrable desde el CMS. Ejemplo de bloque esperado:
   <div class="tv-banner-previo">
       <span>Texto del aviso <a href="/page/promocion">Ver más</a></span>
       <button type="button" class="tv-banner-previo-cerrar" onclick="tvCerrarBanner(this)" aria-label="Cerrar aviso">&times;</button>
   </div>
   El cierre y el "no volver a mostrar en esta sesión" los resuelve tvCerrarBanner() en Index.aspx. */
.tv-banner-previo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--tv-color-secundario-1, #00DCB0);
    color: var(--tv-color-primario, #021780);
    padding: 10px 5%;
    font-size: .9em;
    font-weight: 600;
    text-align: center;
}

.tv-banner-previo a {
    color: var(--tv-color-primario, #021780);
    text-decoration: underline;
    font-weight: 700;
}

.tv-banner-previo-cerrar {
    background: transparent;
    border: none;
    color: var(--tv-color-primario, #021780);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

/* ---------- Hero ---------- */
.tv-hero {
    background: linear-gradient(135deg, var(--tv-color-primario, #021780) 0%, #004D9D 100%);
    color: #fafafa;
    padding: 60px 5% 90px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.tv-hero-texto {
    flex: 1 1 420px;
}

.tv-hero-texto h1 {
    font-size: 2.6em;
    font-weight: 700;
    margin-bottom: .3em;
}

.tv-hero-texto p {
    font-size: 1.15em;
    opacity: .9;
    margin-bottom: 1.5em;
}

.tv-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Tarjeta de Tipo de Cambio superpuesta al hero (estilo dxpdolar) */
.tv-tipocambio {
    flex: 1 1 320px;
    max-width: 380px;
    background: #fff;
    color: #2c3e50;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.tv-tipocambio h3 {
    color: var(--tv-color-primario, #021780);
    font-size: 1.1em;
    margin-bottom: 14px;
    text-align: center;
}

.tv-tipocambio-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.tv-tipocambio-fila:last-child {
    border-bottom: none;
}

.tv-tipocambio-moneda {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.tv-tipocambio-moneda img {
    width: 20px;
    height: 14px;
}

.tv-tipocambio-precios {
    display: flex;
    gap: 18px;
    font-size: .95em;
}

.tv-tipocambio-compra { color: #28A745; font-weight: 700; }
.tv-tipocambio-venta { color: #DC3545; font-weight: 700; }

.tv-tipocambio-nota {
    font-size: .75em;
    color: #999;
    text-align: center;
    margin-top: 10px;
}

/* ---------- HOME_OPERACION: layout de OPERACION_IZQUIERDA/OPERACION_DERECHA + OPERACION_FORM ----------
   Posición configurable por marca (ver IdentidadMarca.md, sección "Layout de Operación",
   ENEmpresa.StrLayoutOperacion):
   - IZQUIERDA (por defecto): se muestra OPERACION_IZQUIERDA, formulario a la derecha.
   - DERECHA: se muestra OPERACION_DERECHA, formulario a la izquierda.
   - CENTRO: no se muestra contenido libre, solo el formulario centrado.
   El code-behind decide qué div mostrar (Visible=true/false) en vez de reordenar con CSS,
   así que el orden de estos divs en el HTML ya resuelve el layout izquierda/derecha por sí solo.
   En móvil, por defecto el banner visible queda arriba del formulario; con
   .tv-operacion-wrap--movil-abajo queda debajo; con .tv-operacion-wrap--movil-oculto
   el banner se oculta por completo en móvil. */
.tv-operacion-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 8px 5% 0;
}

.tv-operacion-banner {
    flex: 1 1 380px;
}

.tv-operacion-form-col {
    flex: 1 1 420px;
    min-width: 0;
}

/* El widget se pega al lado que le corresponde de su columna (derecha por defecto; izquierda si el
   contenido libre queda a su derecha, o centrado en el layout CENTRO). */
.tv-operacion-form-col {
    display: flex;
    justify-content: flex-end;
}

.tv-operacion-form-col:not(:last-child),
.tv-operacion-wrap--form-izq .tv-operacion-form-col {
    justify-content: flex-start;
}

/* Sin contenido libre al costado: el formulario ocupa su ancho natural y se alinea a su lado. */
.tv-operacion-wrap--form-der { justify-content: flex-end; }
.tv-operacion-wrap--form-izq { justify-content: flex-start; }
.tv-operacion-wrap--form-der .tv-operacion-form-col,
.tv-operacion-wrap--form-izq .tv-operacion-form-col { flex: 0 1 440px; }

.tv-operacion-wrap--centro .tv-operacion-form-col {
    display: flex;
    justify-content: center;
}

@media (max-width: 900px) {
    .tv-operacion-wrap {
        flex-direction: column;
        padding: 16px 6% 10px;
    }

    /* En móvil el widget de operación es lo primero que ve el cliente: el contenido libre de los costados (izquierda/derecha) no se muestra. */
    .tv-operacion-wrap > .tv-operacion-banner {
        display: none;
    }

    .tv-operacion-wrap--movil-abajo {
        flex-direction: column-reverse;
    }

    .tv-operacion-wrap--movil-oculto > .tv-operacion-banner {
        display: none;
    }
}

/* ---------- OPERACION_FORM (ControlFormularioOperacion.ascx) ---------- */
.tv-form-operacion {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    padding: 26px;
    position: relative;
    z-index: 2;
}

.tv-form-tc {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 18px;
    font-size: .95em;
    color: #666;
}

.tv-form-tc-item b {
    color: var(--tv-color-primario, #021780);
    font-size: 1.1em;
}

.tv-form-filas {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tv-form-filas.tv-form-invertido {
    flex-direction: row-reverse;
}

.tv-form-campo {
    flex: 1 1 220px;
}

.tv-form-campo label {
    display: block;
    font-size: .85em;
    color: #666;
    margin-bottom: 0;
    font-weight: 600;
}

/* Cabecera del campo: etiqueta (Envías/Recibes) + selector de moneda, uno al lado del otro */
.tv-form-campo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.tv-form-campo-input {
    display: flex;
    align-items: stretch;
}

/* Símbolo de la moneda ($ / S/) pegado a la izquierda del campo de importe */
.tv-form-simbolo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 0 10px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: var(--tv-color-primario, #021780);
    font-weight: 700;
}

.tv-form-input {
    flex: 1 1 auto;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 0 6px 6px 0;
    font-size: 1.15em;
}

.tv-form-select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    font-weight: 700;
    color: var(--tv-color-primario, #021780);
}

.tv-form-swap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding-top: 18px;
}

.tv-form-swap-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--tv-color-primario, #021780);
    color: #fafafa;
    font-size: 1.1em;
    cursor: pointer;
}

.tv-form-swap-btn:hover {
    background: var(--tv-color-secundario-2, #DEEB6C);
    color: var(--tv-color-primario, #021780);
}

.tv-form-cupon {
    margin-top: 18px;
}

.tv-form-cupon label {
    display: block;
    font-size: .85em;
    color: #666;
    margin-bottom: 6px;
}

.tv-form-select-cupon {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
}

.tv-form-cta {
    margin-top: 20px;
    text-align: center;
}

.tv-form-cta .tv-btn {
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
}

/* ---------- Secciones genericas ---------- */
/* zona-1..zona-5 son los IDs fijos de HOME_ZONA_1..HOME_ZONA_5 (ver Index.aspx), usables como
   destino de un enlace/scroll (ej. <a href="#zona-2">). scroll-margin-top evita que el navbar
   sticky tape el inicio de la sección al enfocarla. */
[id^="zona-"] {
    scroll-margin-top: 76px;
}

.tv-seccion {
    padding: 70px 5%;
}

.tv-seccion-titulo {
    text-align: center;
    color: var(--tv-color-primario, #021780);
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 12px;
}

.tv-seccion-subtitulo {
    text-align: center;
    color: #666;
    max-width: 680px;
    margin: 0 auto 40px;
}

.tv-seccion-gris {
    background: #F1F1F1;
}

/* ---------- Beneficios ---------- */
.tv-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tv-beneficio-card {
    text-align: center;
    padding: 30px 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.tv-beneficio-card i {
    font-size: 2.2em;
    color: var(--tv-color-primario, #021780);
    margin-bottom: 14px;
}

.tv-beneficio-card h4 {
    color: var(--tv-color-primario, #021780);
    font-size: 1.05em;
    margin-bottom: 8px;
}

.tv-beneficio-card p {
    font-size: .9em;
    color: #666;
}

/* ---------- Como funciona ---------- */
.tv-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: tv-paso;
}

.tv-paso {
    text-align: center;
    padding: 10px;
}

.tv-paso-numero {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    background: var(--tv-color-primario, #021780);
    color: #fafafa;
    font-weight: 700;
    margin: 0 auto 14px;
}

.tv-paso h4 {
    color: var(--tv-color-primario, #021780);
    font-size: 1em;
    margin-bottom: 6px;
}

.tv-paso p {
    font-size: .88em;
    color: #666;
}

/* ---------- Nosotros / confianza ---------- */
.tv-confianza {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.tv-confianza-item {
    flex: 1 1 200px;
    max-width: 220px;
}

.tv-confianza-item .num {
    font-size: 2em;
    font-weight: 700;
    color: var(--tv-color-primario, #021780);
}

.tv-confianza-item .txt {
    color: #666;
    font-size: .9em;
}

/* ---------- Testimonios ---------- */
.tv-testimonio-card {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    margin: 0 10px;
}

.tv-testimonio-card p {
    font-style: italic;
    color: #444;
}

.tv-testimonio-autor {
    margin-top: 14px;
    font-weight: 700;
    color: var(--tv-color-primario, #021780);
    font-style: normal !important;
}

/* ---------- CTA de registro ---------- */
.tv-cta-registro {
    background: linear-gradient(135deg, #004D9D 0%, var(--tv-color-primario, #021780) 100%);
    color: #fafafa;
    text-align: center;
    padding: 60px 5%;
}

.tv-cta-registro h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.tv-cta-registro-botones {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.tv-footer {
    background: #021019;
    color: #cfd8e3;
    padding: 40px 5% 20px;
}

.tv-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.tv-footer h5 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 1em;
}

.tv-footer a {
    color: #cfd8e3;
    display: block;
    margin-bottom: 6px;
    font-size: .9em;
}

.tv-footer a:hover {
    color: var(--tv-color-secundario-2, #DEEB6C);
}

.tv-footer-copy {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 16px;
    font-size: .8em;
    color: #8a99ab;
}

/* ---------- WhatsApp flotante ---------- */
.tv-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #25D366;
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    z-index: 999;
}

.tv-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .tv-grid-4,
    .tv-pasos,
    .tv-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tv-navbar-toggle {
        display: inline-block;
    }

    .tv-navbar-links {
        display: none;
        width: 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-top: 14px;
    }

    .tv-navbar-links.tv-navbar-links--abierto {
        display: flex;
    }
}

@media (max-width: 600px) {
    .tv-hero {
        padding: 40px 6% 70px;
        text-align: center;
        justify-content: center;
    }

    .tv-hero-texto h1 {
        font-size: 1.9em;
    }

    .tv-form-operacion {
        padding: 18px;
    }

    .tv-form-filas,
    .tv-form-filas.tv-form-invertido {
        flex-direction: column;
    }

    .tv-form-swap {
        padding-top: 0;
    }

    .tv-grid-4,
    .tv-pasos,
    .tv-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* El widget React se monta dentro de este div: hereda la alineación de la columna para pegarse a su lado. */
.tv-operacion-form-col > #tv-widget-operaciones {
    display: flex;
    justify-content: inherit;
    width: 100%;
}