/* combo-ciudad.css — el selector de ciudad con búsqueda integrada.
 *
 * POR QUÉ ESTÁ EN UN ARCHIVO Y NO DENTRO DE CADA PÁGINA: estos estilos estaban copiados en
 * unete_restaurantes.php y en admin_restaurantes_nuevos.php, con las mismas reglas escritas dos
 * veces. Es la misma duplicación que ya había causado un error en el JS (ver la cabecera de
 * cargar-ciudades.js): alguien arregla una copia y no sabe que existe la otra.
 *
 * QUÉ ES: un <input> de texto y una lista desplegable propia, unidos en un solo control. Se
 * escribe y la lista se va filtrando; se elige con el ratón, con el dedo o con las flechas.
 * Sustituye al par "caja de búsqueda + <select> aparte" que había antes, donde había que escribir
 * en un sitio y luego ir a elegir a otro.
 *
 * NO SE USA EL <select> NATIVO A PROPÓSITO: no se puede escribir dentro de él, y con 125
 * municipios (Antioquia) obliga a recorrer una lista larguísima en un celular.
 */

.combo-ciudad {
    position: relative;
}

/* La caja donde se escribe. La flecha ▾ va como fondo para que se lea como un desplegable de
   toda la vida y se note que además de escribir se puede abrir la lista. */
.combo-ciudad-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 34px 12px 14px;
    border: 1.5px solid #DCCBAF;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    color: #3B3229;
    background-color: #FFFDF9;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B5842' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.combo-ciudad-input:focus {
    outline: none;
    border-color: #B14B27;
    background-color: #fff;
}
.combo-ciudad-input:disabled {
    background-color: #F3ECE0;
    color: #948870;
    cursor: not-allowed;
}

/* La lista. position:absolute para que se despliegue ENCIMA de lo que haya debajo y no empuje el
   formulario hacia abajo cada vez que se escribe una letra. */
.combo-ciudad-lista {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1.5px solid #DCCBAF;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    /* Tope de altura + scroll: sin esto, Antioquia (125 municipios) dibujaría una lista más larga
       que la pantalla y taparía el resto del formulario. */
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.combo-ciudad-lista[hidden] { display: none; }

.combo-ciudad-opcion {
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 14.5px;
    color: #3B3229;
    cursor: pointer;
}
/* Un solo estilo para "el ratón está encima" y "está elegida con las flechas": así el teclado y
   el ratón se ven igual y no hay dos resaltados distintos compitiendo. */
.combo-ciudad-opcion:hover,
.combo-ciudad-opcion.activa {
    background: #F6ECDD;
}
.combo-ciudad-opcion[aria-selected="true"] {
    font-weight: 700;
    color: #8C3B1E;
}

/* Cuando no coincide nada. No es pulsable a propósito: es un mensaje, no una opción. */
.combo-ciudad-vacio {
    padding: 12px;
    font-size: 13.5px;
    color: #948870;
    cursor: default;
}
.combo-ciudad-vacio:hover { background: none; }

/* Línea de ayuda debajo del campo ("125 municipios", "Cargando…", "Sin resultados"). */
.combo-ciudad-ayuda {
    display: block;
    font-size: 11.5px;
    color: #948870;
    margin-top: 4px;
    min-height: 14px;
}
.combo-ciudad-ayuda.error { color: #B3261E; }

.btn-reintentar-ciudades {
    margin-top: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #8C3B1E;
    background: #FFFDF9;
    border: 1.5px solid #DCCBAF;
    border-radius: 9px;
    padding: 8px 14px;
    cursor: pointer;
}
.btn-reintentar-ciudades:hover { background: #F6ECDD; border-color: #B14B27; }