/* Las Casas — Panel de búsqueda Expedia (estilo de marca: negro + oro #E2C48E)
   Usa variables de brand.css con fallback por si la página no las carga. */
.lc-exp{
    position:relative;z-index:1;
    max-width:1080px;margin:18px auto;
    background:var(--card-bg, #1a1f24);
    border:1px solid var(--border-light, rgba(226,196,142,.25));
    border-radius:var(--border-radius-lg, 16px);
    box-shadow:0 12px 34px rgba(0,0,0,.45);
    /* overflow visible: el desplegable de aeropuertos no debe recortarse */
    overflow:visible;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--text, #F5F5F5);
}
/* La fila de pestañas conserva las esquinas redondeadas superiores de la tarjeta */
.lc-exp-tabs{border-top-left-radius:var(--border-radius-lg, 16px);border-top-right-radius:var(--border-radius-lg, 16px);}
.lc-exp-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
    border-bottom:1px solid var(--border-light, rgba(226,196,142,.2));padding:12px 12px 0;}
.lc-exp-tab{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;
    padding:8px 14px 12px;cursor:pointer;color:var(--text-muted, #D0D0D0);font-size:.86rem;font-weight:600;
    border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
    perspective:600px;}

/* Icono en una pastilla redonda con relieve 3D (degradado + luces/sombras
   internas) — funciona igual en escritorio y móvil. */
.lc-exp-tab-ic{
    font-size:1.5rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    width:50px;height:50px;border-radius:50%;
    background:linear-gradient(160deg,#3a4147,#1b2024);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.18),
        inset 0 -3px 6px rgba(0,0,0,.55),
        0 6px 14px rgba(0,0,0,.45);
    transition:transform .25s ease, box-shadow .25s ease;
    transform-style:preserve-3d;will-change:transform;
}
.lc-exp-tab:hover{color:var(--primary, #E2C48E);}
.lc-exp-tab:hover .lc-exp-tab-ic{
    transform:translateY(-2px) rotateX(12deg);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.22),
        inset 0 -3px 6px rgba(0,0,0,.55),
        0 10px 22px rgba(0,0,0,.5);
}
.lc-exp-tab.is-active{color:var(--primary, #E2C48E);border-bottom-color:var(--primary, #E2C48E);}
.lc-exp-tab.is-active .lc-exp-tab-ic{
    background:linear-gradient(160deg,#4a3f24,#2a2410);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.25),
        inset 0 -3px 6px rgba(0,0,0,.5),
        0 0 0 2px var(--primary, #E2C48E),
        0 8px 18px rgba(226,196,142,.35);
}

/* Clic: gira rápido y desacelera atenuándose (la añade el JS, se quita al terminar) */
@keyframes lcExpIconSpin{
    0%{transform:rotate(0) scale(1);opacity:1;}
    12%{transform:rotate(160deg) scale(1.16);opacity:1;}
    60%{opacity:.55;}
    100%{transform:rotate(720deg) scale(1);opacity:1;}
}
.lc-exp-tab-ic.is-spinning{animation:lcExpIconSpin 1s cubic-bezier(.12,.8,.2,1) both;}

@media(prefers-reduced-motion:reduce){
    .lc-exp-tab-ic.is-spinning{animation:none;}
}

.lc-exp-panes{padding:16px;}
.lc-exp-pane{display:none;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.lc-exp-pane.is-active{display:flex;}
/* Pestaña «Apartamentos» = nuestro buscador interno → bloque completo (no flex). */
.lc-exp-pane--apart.is-active{display:block;}
.lc-exp-pane--apart .lc-search-bar-modern{margin:0;}
.lc-exp-field{position:relative;display:flex;flex-direction:column;gap:4px;flex:0 0 auto;min-width:130px;}
.lc-exp-field.lc-exp-grow{flex:1 1 240px;min-width:200px;}
.lc-exp-field label{font-size:.72rem;font-weight:700;color:var(--text-muted, #D0D0D0);
    text-transform:uppercase;letter-spacing:.03em;}
.lc-exp-field input,.lc-exp-field select{
    height:46px;padding:0 12px;border:1px solid var(--border, #2a2a2a);
    border-radius:var(--border-radius-sm, 10px);font-size:.95rem;
    background:var(--card-bg-deep, #293133);color:var(--text, #F5F5F5);
    box-sizing:border-box;color-scheme:dark;
}
.lc-exp-field input::placeholder{color:var(--text-muted, #D0D0D0);opacity:.8;}
.lc-exp-field input:focus,.lc-exp-field select:focus{
    outline:none;border-color:var(--primary, #E2C48E);
    box-shadow:0 0 0 3px var(--primary-light, rgba(226,196,142,.2));}
.lc-exp-go{height:46px;align-self:flex-end;padding:0 30px;border:none;border-radius:40px;
    background:var(--primary, #E2C48E);color:var(--dark, #000);
    font-size:.95rem;font-weight:800;cursor:pointer;flex:0 0 auto;transition:all .25s;}
.lc-exp-go:hover{background:var(--primary-hover, #F8D189);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.35);}
/* Botón de búsqueda como lupa: solo el icono visible; «Buscar» queda para lectores de pantalla. */
.lc-exp-go .fa-magnifying-glass{font-size:1.05rem;line-height:1;}
.lc-exp-go-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.lc-exp-disclaimer{margin:0;padding:0 16px 14px;font-size:.72rem;color:var(--text-muted, #D0D0D0);opacity:.75;}

/* Autocomplete — montado en <body> con position:fixed para no ser recortado
   por ningún contenedor de la página (la posición la fija el JS). */
.lc-exp-ac{position:fixed;z-index:2147483000;
    background:var(--card-bg-deep, #293133);border:1px solid var(--border-light, rgba(226,196,142,.25));
    border-radius:10px;max-height:280px;overflow-y:auto;box-shadow:0 10px 26px rgba(0,0,0,.5);
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.lc-exp-ac-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:.9rem;
    color:var(--text, #F5F5F5);}
.lc-exp-ac-item:hover,.lc-exp-ac-item.is-active{background:var(--primary-light, rgba(226,196,142,.2));}
.lc-exp-ac-code{flex:0 0 auto;width:42px;font-weight:800;color:var(--primary, #E2C48E);font-variant-numeric:tabular-nums;}
.lc-exp-ac-city{color:var(--text-secondary, #E0E0E0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media(max-width:760px){
    .lc-exp-pane{flex-direction:column;align-items:stretch;}
    .lc-exp-field,.lc-exp-field.lc-exp-grow{min-width:0;width:100%;}
    .lc-exp-go{width:100%;border-radius:12px;}

    /* Móvil: solo los 5 iconos en una fila, sin texto. El estado activo lo
       marca el aro dorado del propio icono (no la línea inferior). */
    .lc-exp-tabs{flex-wrap:nowrap;gap:0;justify-content:space-between;padding:12px 6px 10px;}
    .lc-exp-tab{flex:1 1 0;padding:4px 2px 6px;border-bottom:none;gap:0;}
    .lc-exp-tab.is-active{border-bottom-color:transparent;}
    .lc-exp-tab-lbl{display:none;}
    .lc-exp-tab-ic{width:48px;height:48px;font-size:1.5rem;}
}


/* LC_EXP_STEPS_V1 — recorrido por pasos (solo en el movil; el guion los
   oculta en escritorio).

   La flecha va DENTRO del campo, pegada al borde derecho, sin pastilla ni
   fondo: exactamente el mismo gesto que la lupa dentro de la casilla de
   busqueda de la cabecera. Como boton redondo aparte se comia una fila entera
   del formulario — en un telefono eso es media pantalla — para no decir nada
   que el propio campo no dijera ya. */
.lc-exp-field.lc-exp-inflecha {
    position: relative;
}

/* Sitio para la flecha: sin esto el texto largo de una ciudad le pasa por
   debajo y no se lee ni una cosa ni la otra.

   El `.lc-exp` de delante no es adorno: la barra trae su propio
   `.lc-exp .lc-exp-field input{padding:0 8px}` en un <style> dentro del
   cuerpo de la pagina. A igualdad de peso gana el que va despues, y ese va
   despues — sin este selector mas concreto el hueco no se abriria. */
.lc-exp .lc-exp-field.lc-exp-inflecha input,
.lc-exp .lc-exp-field.lc-exp-inflecha select,
.lc-exp-field.lc-exp-inflecha input,
.lc-exp-field.lc-exp-inflecha select {
    padding-right: 36px;
}

.lc-exp-next {
    position: absolute;
    right: 2px;
    bottom: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #E2C48E;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.lc-exp-next:hover {
    color: #F8D189;
}

.lc-exp-back {
    background: none;
    border: 0;
    color: #E2C48E;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    align-self: flex-start;
}