/* ════════════════════════════════════════════════════════════════════════════
   home-calculadora.css — Transotel.Web
   Ubicacion: wwwroot/css/home-calculadora.css
   LOTE CALC-3 · calculadora de precios en la cabecera de la portada

   Contiene SOLO lo nuevo del lote. No redefine nada de site.css, home.css ni
   home-reserva.css: las clases nuevas empiezan por "hcalc", y las que tocan
   la cabecera de siempre llevan los modificadores --calc que pone Index.cshtml.

   NOTA DE CASCADA: se carga DETRAS de home.css (Index.cshtml, @section Styles).
   Las reglas que cambian la cabecera usan dos clases (.hero-content.hero-content--calc)
   para ganar a las de home.css sin !important.

   Colores de marca: #008572 fondos y detalles · #dfbb3e botones.
   Se reutilizan las variables de home.css (--hm-navy, --hm-gold...).
   ════════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   0. [hidden] SIEMPRE OCULTA
   Una regla display de abajo podria ganar al atributo hidden (pasa con
   display:flex o grid). Esto lo impide solo dentro de la cabecera.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-text--calc [hidden],
.hcalc[hidden] {
    display: none !important;
}


/* ───────────────────────────────────────────────────────────────────────────
   1. CABECERA EN UNA COLUMNA CENTRADA (diseño 2)
   ─────────────────────────────────────────────────────────────────────────── */
.hero-content.hero-content--calc {
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0;
    padding:         2.25rem 0 2.5rem;
    text-align:      center;
    /* Por encima de la franja de confianza (z-index 2 en home.css), para que
       la lista de sugerencias no quede debajo de ella. */
    z-index:         3;
}

@media (min-width: 992px) {
    .hero-content.hero-content--calc {
        flex-direction: column;
        align-items:    center;
        gap:            0;
        padding:        4.25rem 0 3.25rem;
    }
}

.hero-content--calc .hero-text.hero-text--calc {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    flex:           0 1 auto;
    width:          100%;
    max-width:      1080px;
}

.hero-text--calc .hero-badge {
    margin-left:  auto;
    margin-right: auto;
}

.hero-text--calc .hero-subtitle {
    max-width:     46rem;
    margin-left:   auto;
    margin-right:  auto;
    margin-bottom: 1.6rem;
}

/* En el movil, el subtitulo va DESPUES de la calculadora para que esta se vea
   sin bajar. Solo cambia el orden visual: en el HTML (lo que leen Google y las
   IA) el subtitulo sigue justo debajo del H1. */
@media (max-width: 767px) {
    .hero-text--calc .hcalc                  { order: 2; }
    .hero-text--calc .hero-subtitle          { order: 3; margin-top: 1.4rem; margin-bottom: 0.5rem; font-size: 1rem; }
    .hero-text--calc .hero-enlaces           { order: 4; }
    .hero-text--calc .hero-tracking-details  { order: 5; }
    .hero-text--calc .hero-title             { margin-bottom: 1.1rem; }
}


/* ───────────────────────────────────────────────────────────────────────────
   2. LA CALCULADORA
   Las alturas de leyenda, etiqueta y caja van fijadas en px a proposito: el
   boton de intercambiar y el de «Ver precios» se alinean con las cajas por
   cuenta, y si cambiaran con la letra del sitio se descolocarian.
     leyenda 24 + 8 = 32 · etiqueta 20 + 5 = 25 · caja desde 57 px, alta 52.
   ─────────────────────────────────────────────────────────────────────────── */
.hcalc {
    width:      100%;
    max-width:  1080px;
    margin:     0 auto 0.5rem;
    color:      var(--hm-text-dark, #111827);
    text-align: left;
}

.hcalc-titulo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.6rem;
    margin:          0 0 0.3rem;
    color:           #ffffff;
    font-size:       clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight:     800;
    line-height:     1.3;
    text-align:      center;
}

.hcalc-titulo i {
    color: var(--hm-gold, #dfbb3e);
}

.hcalc-desde {
    margin:     0 0 1rem;
    color:      rgba(255, 255, 255, 0.86);
    font-size:  0.95rem;
    text-align: center;
}

.hcalc-desde strong {
    margin:    0 0.2rem;
    color:     #ffffff;
    font-size: 1.1rem;
}

.hcalc-barra {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   0.35rem;
    padding:               1rem;
    border-radius:         var(--hm-radius-lg, 18px);
    background:            #ffffff;
    box-shadow:            0 22px 60px rgba(0, 0, 0, 0.35);
}

.hcalc-lado {
    min-width: 0;
    margin:    0;
    padding:   0;
    border:    0;
}

.hcalc-leyenda {
    display:       block;
    width:         100%;
    margin:        0 0 8px;
    padding:       0;
    color:         var(--hm-navy, #0B1F3A);
    font-size:     16px;
    font-weight:   800;
    line-height:   24px;
}

.hcalc-leyenda i {
    margin-right: 0.3rem;
    color:        #008572;
}

.hcalc-campos {
    display:               grid;
    grid-template-columns: minmax(0, 7.2rem) minmax(0, 1fr);
    gap:                   0 0.6rem;
    align-items:           end;
}

.hcalc-campo label {
    display:     block;
    margin:      0 0 5px;
    overflow:    hidden;
    color:       var(--hm-text-mid, #4b5563);
    font-size:   13px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hcalc-campo select,
.hcalc-campo input {
    display:          block;
    width:            100%;
    height:           52px;
    margin:           0;
    padding:          0 0.85rem;
    border:           2px solid #d6dce7;
    border-radius:    var(--hm-radius, 12px);
    background-color: #ffffff;
    color:            var(--hm-text-dark, #111827);
    font:             inherit;
    font-size:        16px;   /* 16 px o mas: el iPhone no hace zoom al tocar */
    line-height:      normal;
    box-shadow:       none;
}

.hcalc-campo select {
    -webkit-appearance:  none;
    appearance:          none;
    padding-right:       1.9rem;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B1F3A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.6rem center;
    background-size:     14px;
    cursor:              pointer;
}

.hcalc-campo input::placeholder {
    color:   #7d869b;
    opacity: 1;
}

.hcalc-campo select:focus,
.hcalc-campo input:focus {
    outline:      none;
    border-color: #008572;
    box-shadow:   0 0 0 4px rgba(0, 133, 114, 0.22);
}

.hcalc-cp {
    position: relative;
}

/* Lo que se ha reconocido: «✓ Madrid», debajo de la caja del codigo postal */
.hcalc-chip {
    grid-column: 2 / 3;
    margin:      0.35rem 0 0;
    color:       #006656;
    font-size:   0.85rem;
    font-weight: 700;
    line-height: 1.35;
}

.hcalc-chip:empty {
    display: none;
}

.hcalc-chip.es-error {
    color: #b42318;
}

.hcalc-nota-pais {
    grid-column: 1 / -1;
    margin:      0.35rem 0 0;
    color:       var(--hm-text-mid, #4b5563);
    font-size:   0.85rem;
    line-height: 1.4;
}

.hcalc-nota-pais i {
    color: #008572;
}

/* Con otro pais no hay codigo postal: el pais ocupa todo el ancho */
.hcalc-lado.es-extranjero .hcalc-campos {
    grid-template-columns: minmax(0, 1fr);
}

.hcalc-lado.es-extranjero .hcalc-chip {
    grid-column: 1 / -1;
}

@media (max-width: 359px) {
    .hcalc-campos {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
    .hcalc-chip {
        grid-column: 1 / -1;
    }
}

/* Sugerencias de provincia */
.hcalc-sug {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    z-index:       30;
    max-height:    290px;
    overflow:      auto;
    margin:        0;
    padding:       6px;
    list-style:    none;
    border:        1px solid #d6dce7;
    border-radius: var(--hm-radius, 12px);
    background:    #ffffff;
    box-shadow:    0 14px 34px rgba(11, 31, 58, 0.22);
    text-align:    left;
}

.hcalc-sug li {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.6rem;
    min-height:      44px;
    padding:         0.55rem 0.7rem;
    border-radius:   9px;
    color:           var(--hm-text-dark, #111827);
    font-size:       1rem;
    line-height:     1.3;
    cursor:          pointer;
}

.hcalc-sug li small {
    flex:        0 0 auto;
    color:       var(--hm-text-mid, #4b5563);
    font-weight: 800;
}

.hcalc-sug li:hover,
.hcalc-sug li[aria-selected="true"] {
    background: #e2f2ee;
}

/* Intercambiar origen y destino */
.hcalc-cambio {
    display:         flex;
    justify-content: center;
}

.hcalc-swap {
    display:       inline-grid;
    place-items:   center;
    width:         44px;
    height:        44px;
    margin:        0;
    padding:       0;
    border:        2px solid #d6dce7;
    border-radius: 50%;
    background:    #ffffff;
    color:         var(--hm-navy, #0B1F3A);
    font-size:     1rem;
    cursor:        pointer;
    transition:    border-color var(--hm-dur, 0.25s), color var(--hm-dur, 0.25s);
}

.hcalc-swap:hover,
.hcalc-swap:focus-visible {
    border-color: #008572;
    color:        #008572;
}

/* En el movil las dos filas van una debajo de otra: la flecha gira */
@media (max-width: 991px) {
    .hcalc-swap i {
        transform: rotate(90deg);
    }
}

/* Ver precios */
.hcalc-ver {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.55rem;
    width:           100%;
    min-height:      52px;
    margin:          0.5rem 0 0;
    padding:         0 1.6rem;
    border:          0;
    border-radius:   var(--hm-radius, 12px);
    background:      var(--hm-gold, #dfbb3e);
    color:           var(--hm-navy, #0B1F3A);
    font:            inherit;
    font-size:       1.05rem;
    font-weight:     800;
    cursor:          pointer;
    transition:      background var(--hm-dur, 0.25s);
}

.hcalc-ver:hover {
    background: var(--hm-gold-dark, #c9a830);
}

.hcalc-ver:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
    box-shadow:     0 0 0 6px #008572;
}

.hcalc-ver[disabled] {
    opacity: 0.8;
    cursor:  progress;
}

/* En ordenador, todo en una barra: [Desde] [⇄] [Hasta] [Ver precios] */
@media (min-width: 992px) {
    .hcalc-barra {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
        align-items:           start;
        gap:                   0 1rem;
        padding:               1rem 1rem 0.9rem 1.3rem;
    }

    .hcalc-cambio {
        padding-top: 61px;   /* 57 + (52 - 44) / 2: centrado con las cajas */
    }

    .hcalc-ver {
        width:       auto;
        margin-top:  57px;   /* a la altura de las cajas */
        white-space: nowrap;
    }
}


/* ───────────────────────────────────────────────────────────────────────────
   3. EL RESULTADO
   ─────────────────────────────────────────────────────────────────────────── */
.hcalc-res {
    margin-top:         1rem;
    padding:            1.25rem;
    border-radius:      var(--hm-radius-lg, 18px);
    background:         #ffffff;
    box-shadow:         0 22px 60px rgba(0, 0, 0, 0.35);
    color:              var(--hm-text-dark, #111827);
    text-align:         left;
    scroll-margin-top:  90px;
}

.hcalc-res:focus {
    outline: none;
}

.hcalc-res-titulo {
    display:     flex;
    flex-direction: column;
    gap:         0.1rem;
    margin:      0;
    line-height: 1.3;
}

.hcalc-res-etiqueta {
    color:       var(--hm-text-mid, #4b5563);
    font-size:   0.85rem;
    font-weight: 700;
}

.hcalc-res-ruta {
    color:       var(--hm-navy, #0B1F3A);
    font-size:   1.2rem;
    font-weight: 800;
}

.hcalc-res-plazo {
    margin:      0.4rem 0 0.9rem;
    color:       var(--hm-text-mid, #4b5563);
    font-weight: 600;
}

.hcalc-res-plazo i {
    color: #008572;
}

.hcalc-tarifas {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   0.75rem;
    margin:                0;
    padding:               0;
    list-style:            none;
}

@media (min-width: 992px) {
    .hcalc-tarifas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 359px) {
    .hcalc-tarifas {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hcalc-tarifa {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    padding:        0.9rem;
    border:         2px solid #e3e7f0;
    border-radius:  var(--hm-radius, 12px);
}

.hcalc-tarifa-ico {
    display:       grid;
    place-items:   center;
    width:         42px;
    height:        42px;
    margin-bottom: 0.2rem;
    border-radius: 10px;
    background:    #e2f2ee;
    color:         #006656;
}

.hcalc-tarifa-ico--1 { font-size: 0.9rem; }
.hcalc-tarifa-ico--2 { font-size: 1.1rem; }
.hcalc-tarifa-ico--3 { font-size: 1.35rem; }

.hcalc-tarifa-nombre {
    font-weight: 800;
    line-height: 1.3;
}

.hcalc-tarifa-det {
    color:       var(--hm-text-mid, #4b5563);
    font-size:   0.82rem;
    line-height: 1.35;
}

.hcalc-tarifa-precio {
    margin-top:  auto;
    padding-top: 0.35rem;
    color:       var(--hm-navy, #0B1F3A);
    font-size:   1.5rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.hcalc-tarifa.no-disp {
    opacity: 0.65;
}

.hcalc-tarifa.no-disp .hcalc-tarifa-precio {
    font-size:   0.85rem;
    font-weight: 700;
    white-space: normal;
}

.hcalc-res-nota {
    margin:    0.9rem 0 0;
    color:     var(--hm-text-mid, #4b5563);
    font-size: 0.85rem;
}

.hcalc-res-int {
    margin-top:  0.35rem;
    color:       #006656;
    font-weight: 700;
}

.hcalc-res-acc {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.6rem 1.25rem;
    margin-top:  1rem;
}

.hcalc-reservar {
    display:         inline-flex;
    align-items:     center;
    gap:             0.55rem;
    min-height:      52px;
    padding:         0 1.5rem;
    border-radius:   var(--hm-radius, 12px);
    background:      var(--hm-gold, #dfbb3e);
    color:           var(--hm-navy, #0B1F3A);
    font-weight:     800;
    text-decoration: none;
    transition:      background var(--hm-dur, 0.25s);
}

.hcalc-reservar:hover,
.hcalc-reservar:focus {
    background:      var(--hm-gold-dark, #c9a830);
    color:           var(--hm-navy, #0B1F3A);
    text-decoration: none;
}

.hcalc-cambiar {
    display:               inline-flex;
    align-items:           center;
    gap:                   0.45rem;
    min-height:            44px;
    margin:                0;
    padding:               0;
    border:                0;
    background:            none;
    color:                 var(--hm-navy, #0B1F3A);
    font:                  inherit;
    font-weight:           700;
    text-decoration:       underline;
    text-underline-offset: 3px;
    cursor:                pointer;
}

.hcalc-wa {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    min-height:      44px;
    color:           #006656;
    font-weight:     700;
    text-decoration: none;
}

.hcalc-wa:hover {
    color:           #006656;
    text-decoration: underline;
}

@media (max-width: 575px) {
    .hcalc-reservar {
        width:           100%;
        justify-content: center;
    }
}


/* ───────────────────────────────────────────────────────────────────────────
   4. ENLACES Y SEGUIMIENTO DEBAJO DE LA CALCULADORA
   ─────────────────────────────────────────────────────────────────────────── */
.hero-enlaces {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.25rem 1.5rem;
    margin:          0.75rem 0 0;
    padding:         0;
    list-style:      none;
}

.hero-enlaces a {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    min-height:      44px;
    color:           #ffffff;
    font-weight:     700;
    text-decoration: none;
}

.hero-enlaces a:hover,
.hero-enlaces a:focus {
    color:                 #ffffff;
    text-decoration:       underline;
    text-underline-offset: 3px;
}

.hero-enlaces i {
    color: var(--hm-gold, #dfbb3e);
}

.hero-text--calc .hero-tracking-details {
    width:      100%;
    max-width:  560px;
    margin-top: 0.25rem;
    text-align: center;
}

.hero-text--calc .hero-tracking-form {
    text-align: left;
}


/* ───────────────────────────────────────────────────────────────────────────
   5. LA FOTO DE LAS MALETAS EN LA BANDA DE RESERVA
   Antes estaba en la cabecera. Mismo fichero, mismo alt y mismo pie.
   ─────────────────────────────────────────────────────────────────────────── */
.banda-reserva-grid {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   1.75rem;
    align-items:           center;
}

@media (min-width: 992px) {
    .banda-reserva-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
        gap:                   3rem;
    }
}

.banda-reserva-foto {
    margin: 0;
}

.banda-reserva-foto img {
    display:       block;
    width:         100%;
    height:        auto;
    aspect-ratio:  4 / 3;
    object-fit:    cover;
    border:        3px solid rgba(223, 187, 62, 0.35);
    border-radius: var(--hm-radius-xl, 26px);
    box-shadow:    0 18px 44px rgba(0, 0, 0, 0.28);
}

@media (max-width: 991px) {
    .banda-reserva-foto {
        justify-self: center;
        width:        100%;
        max-width:    480px;
    }
}


/* ───────────────────────────────────────────────────────────────────────────
   6. VENTANAS DE AVISO (SweetAlert) DE LA CALCULADORA
   Solo las de la calculadora: llevan la clase hcalc-swal.
   ─────────────────────────────────────────────────────────────────────────── */
.hcalc-swal {
    border-radius: 18px !important;
    font-family:   inherit !important;
}

.hcalc-swal .swal2-title {
    color: var(--hm-navy, #0B1F3A);
}

.hcalc-swal-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-height:    48px;
    margin:        0.5rem;
    padding:       0 1.6rem;
    border:        0;
    border-radius: 12px;
    background:    #dfbb3e;
    color:         #0B1F3A;
    font:          inherit;
    font-weight:   800;
    cursor:        pointer;
}

.hcalc-swal-btn:hover {
    background: #c9a830;
}


/* ───────────────────────────────────────────────────────────────────────────
   7. MOVIMIENTO REDUCIDO
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hcalc-swap,
    .hcalc-ver,
    .hcalc-reservar {
        transition: none;
    }
}