/*
 * Panel de sugerencias del autocompletado propio.
 *
 * Va en <body> con posicion fija, con las medidas calculadas del propio input: colgarlo
 * del contenedor del campo lo sacaba 30px mas ancho —el input vive en una columna de
 * Bootstrap con relleno— y el modal le recortaba lo que sobresalia.
 *
 * Va SEPARADO EN SECCIONES —aeropuertos, hoteles, direcciones— siguiendo el patron de
 * ShuttleDirect, que es la referencia del diseno. El operador no piensa en "de donde salio
 * la coordenada" sino en "que clase de sitio es", y agrupar por eso convierte ocho lineas
 * parecidas en algo que se escanea de un vistazo.
 *
 * Lo que NO se copia de ahi es la seccion "powered by Google" de abajo: esa atribucion es
 * obligatoria cuando se ensenan resultados de Places, y aqui solo se ensenan si se ha salido
 * fuera de verdad — entonces si aparece.
 *
 * OJO CON LAS UNIDADES: aqui NO se usa rem. Bootstrap 3 pone html{font-size:10px} y el body
 * a 14px, asi que un "rem" en esta aplicacion vale 10px y no 16. Este fichero estaba escrito
 * en rem: .8125rem parecia 13px y eran OCHO, y las cabeceras de seccion .75rem eran 7,5px.
 * Todo en px, que aqui es lo unico que no engana.
 */

.panel-sugerencias {
    position: fixed;
    z-index: 1060;          /* por encima del modal de servicio, que va en 1050 */
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #c8d0d4;
    border-top: none;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 6px 16px rgba(22, 35, 46, .18);
}

.panel-sugerencias.hacia-arriba {
    border-top: 1px solid #c8d0d4;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -6px 16px rgba(22, 35, 46, .18);
}

/* Cabecera de seccion. Se queda pegada arriba al desplazar: con la lista larga, saber en
   que grupo estas importa mas que ver una linea mas. */
.panel-sugerencias .sugerencia-seccion {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    /* Un punto mas oscura que las filas, y la misma para todas las secciones: separa los
       grupos (aeropuertos, hoteles, direcciones) sin que ninguno llame mas que otro. */
    background: #e3eaf1;
    border-top: 1px solid #d3dde7;
    border-bottom: 1px solid #d3dde7;
    color: #2b4a6b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* La atribucion del proveedor externo. Obligatoria al ensenar sus resultados, y util:
   dice al operador que esa parte no la ponemos nosotros. */
.panel-sugerencias .sugerencia-atribucion {
    margin-left: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #6b7c8d;
    font-size: 11px;
}

/* El logo oficial de Google.

   Va a su tamano nativo (120x14) y SIN filtros, opacidad ni recoloreado: sus terminos exigen
   usar la marca sin modificar. Por eso tampoco hereda el `opacity: .75` de los iconos de la
   cabecera. El fondo es claro (#f2f6fa) y el logo es la version "on white", asi que cuadra;
   si algun dia se oscurece hay que cambiar al fichero "on-non-white", que ya esta al lado. */
.panel-sugerencias .sugerencia-atribucion-logo {
    margin-left: auto;
    display: block;
    width: 120px;
    height: 14px;
    opacity: 1;
    filter: none;
}

.panel-sugerencias .sugerencia-seccion i {
    opacity: .75;
    width: 1em;
    text-align: center;
}

.panel-sugerencias .sugerencia {
    padding: 7px 9px 7px 29px;   /* sangrado bajo el icono de su seccion */
    border-bottom: 1px solid #eef1f2;
    cursor: pointer;
    /* 15px de verdad. El desplegable de Google usaba 13 y este se mira de reojo mientras
       se teclea, asi que un punto por encima se agradece. En px y no en rem: ver la cabecera. */
    font-size: 15px;
    line-height: 1.4;
    position: relative;
}

/* Aeropuerto, estacion o puerto: va en el sangrado de la fila, donde no empuja el texto. */
.panel-sugerencias .sugerencia-icono {
    position: absolute;
    left: 9px;
    top: 10px;
    width: 1em;
    text-align: center;
    font-size: 13px;
    color: #4a6275;
}

.panel-sugerencias .sugerencia:last-child { border-bottom: none; }

.panel-sugerencias .sugerencia:hover,
.panel-sugerencias .sugerencia.activa {
    background: #eef4fb;
}

/* El texto puede ser largo; que envuelva en vez de desbordar o quedar cortado. */
.panel-sugerencias .sugerencia-linea {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.panel-sugerencias .sugerencia-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #16232e;
    font-weight: 500;
}

/* Discreta a proposito: informa de que el punto es nuestro, no reclama atencion. */
.panel-sugerencias .sugerencia-marca {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    background: #e6f0ea;
    color: #1d6e52;
}


/* «No encontramos …»: solo con la respuesta definitiva, cuando ni en casa ni fuera hay nada. */
.panel-sugerencias .sugerencia-vacia {
    padding: 10px 12px;
    color: #4a6275;
    font-size: 14px;
}

/* El pie: que el buscador es nuevo, y por donde avisar de lo que no se encuentra. Pegado abajo
   como las cabeceras arriba, para que no se pierda con la lista larga. */
.panel-sugerencias .sugerencias-pie {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    background: #f6f8fa;
    border-top: 1px solid #e1e7ec;
    font-size: 12px;
    color: #6b7c8d;
}

.panel-sugerencias .sugerencias-pie-beta {
    display: inline-block;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 8px;
    background: #fff3cd;
    color: #7a5b00;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.panel-sugerencias .sugerencias-pie-avisar {
    color: #2b6cb0;
    font-weight: 600;
    white-space: nowrap;
}

.panel-sugerencias .sugerencias-pie-avisar:hover {
    text-decoration: underline;
}

/* La ventanita de «Avísanos». Por encima del panel (1060) y del modal del servicio (1050). */
.aviso-geocoder {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(22, 35, 46, .35);
}

.aviso-geocoder-caja {
    width: 100%;
    max-width: 460px;
    padding: 18px 20px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(22, 35, 46, .3);
    font-size: 14px;
    color: #16232e;
}

.aviso-geocoder-caja h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}

.aviso-geocoder-caja label {
    display: block;
    margin: 12px 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.aviso-geocoder-ayuda,
.aviso-geocoder-nota {
    margin: 0;
    color: #4a6275;
    font-size: 13px;
}

.aviso-geocoder-nota {
    margin-top: 8px;
    font-size: 12px;
}

.aviso-geocoder-estado {
    min-height: 18px;
    margin: 10px 0 0;
    font-size: 13px;
    color: #1d6e52;
}

.aviso-geocoder-botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}