/*
 * Campos propios: selector múltiple (web/js/selector.js) y fecha+hora
 * (web/js/fechahora.js).
 *
 * Sustituyen a Select2 y al DateTimePicker de kartik, que arrastraban jQuery. El aspecto
 * sigue al calendario de rango que ya usan el panel, el mapa y las mediciones, para que
 * no parezcan tres controles de tres sitios distintos.
 */

/* ==================== selector múltiple ==================== */

.sel { position: relative; }

/* El <select multiple> nativo sigue en el DOM: es quien manda y quien se envía. Se oculta
   recortándolo y no con display:none, para que siga siendo enfocable por el navegador si
   la validación necesita llevar el foco al campo con error. */
.sel-nativo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sel-campo {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .25rem .5rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
}
.sel-campo:hover { border-color: #adb5bd; }
.sel-campo:focus-visible,
.sel-campo[aria-expanded="true"] {
    outline: none;
    border-color: #f2849e;
    box-shadow: 0 0 0 3px rgba(242,132,158,.2);
}

.sel-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.sel-placeholder { color: #8c98a4; font-size: 14px; }

.sel-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #f4f5f7;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    padding: 1px 4px 1px 8px;
    font-size: 12px;
    color: #5f6b76;
}
.sel-quitar {
    border: 0;
    background: none;
    color: #8c98a4;
    font-size: 15px;
    line-height: 1;
    /* 20 px para que se pueda quitar con el dedo sin acertar en una cruz de 8 px. */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}
.sel-quitar:hover { background: #e6e9ec; color: #c9302c; }

.sel-flecha { color: #8c98a4; font-size: 12px; flex: 0 0 auto; }

.sel-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: .5rem;
}
.sel-panel[hidden] { display: none; }

.sel-buscar {
    width: 100%;
    font-size: 14px;
    padding: .3rem .5rem;
    border: 1px solid #e4e7ea;
    border-radius: 5px;
    margin-bottom: .35rem;
}
.sel-buscar:focus { outline: none; border-color: #f2849e; }

/* Alto acotado: con dieciséis categorías el panel tapaba el resto del formulario. */
.sel-lista { max-height: 240px; overflow-y: auto; }

.sel-opcion {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font-size: 14px;
    color: #585858;
    padding: .35rem .5rem;
    border-radius: 5px;
    cursor: pointer;
}
.sel-opcion:hover { background: #f4f5f7; }
.sel-opcion[hidden] { display: none; }

.sel-marca {
    flex: 0 0 16px;
    height: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
}
.sel-elegida .sel-marca { background: #f2849e; border-color: #f2849e; color: #fff; }
.sel-elegida { font-weight: 600; }

.sel-vacio { font-size: 13px; color: #8c98a4; margin: .4rem .5rem 0; }

.sel-desactivado .sel-campo { background: #f1f3f5; cursor: not-allowed; }

/* ==================== fecha y hora ==================== */

.fh { position: relative; display: flex; align-items: stretch; }
.fh input { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.fh-abrir {
    flex: 0 0 auto;
    border: 1px solid #ced4da;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #f8f9fa;
    color: #6c7d8e;
    padding: 0 .7rem;
    cursor: pointer;
}
.fh-abrir:hover { background: #f0f1f3; color: #f2849e; }

.fh-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    left: 0;
    width: 260px;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: .6rem;
}
.fh-panel[hidden] { display: none; }

.fh-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.fh-mes { font-size: 13px; font-weight: 600; color: #585858; }
.fh-mover {
    border: 0; background: none; color: #6c7d8e;
    font-size: 18px; line-height: 1; cursor: pointer;
    width: 28px; height: 28px; border-radius: 5px;
}
.fh-mover:hover { background: #f4f5f7; color: #f2849e; }

.fh-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.fh-dia-nombre { font-size: 10px; color: #9aa5b1; text-align: center; padding: 2px 0; }
.fh-hueco { height: 30px; }
.fh-dia {
    height: 30px; border: 0; background: none;
    font-size: 12px; color: #585858; border-radius: 5px; cursor: pointer;
}
.fh-dia:hover { background: #f4f5f7; }
.fh-hoy { box-shadow: inset 0 0 0 1px #c9c9c9; font-weight: 600; }
.fh-elegido { background: #f2849e; color: #fff; font-weight: 600; }
.fh-elegido:hover { background: #e06e8a; }

.fh-hora {
    display: flex; align-items: center; gap: .3rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #eef0f2;
}
.fh-hora-etiqueta {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: #9aa5b1; font-weight: 700; margin-right: .2rem;
}
.fh-hora select { font-size: 13px; padding: .15rem .3rem; }

.fh-pie { display: flex; justify-content: space-between; margin-top: .5rem; }
.fh-atajo, .fh-cerrar {
    border: 1px solid #e4e7ea; background: #fff;
    font-size: 12px; color: #6c7d8e;
    border-radius: 5px; padding: .2rem .6rem; cursor: pointer;
}
.fh-atajo:hover, .fh-cerrar:hover { background: #f4f5f7; color: #585858; }

@media (max-width: 420px) {
    /* A 375 px un panel de 260 px pegado a la izquierda se sale por la derecha, así que
       se estira entre los dos bordes del campo.

       El `min-width` es una salvaguarda: con `width: auto` entre `left` y `right`, si el
       contenedor midiera cero el panel colapsaría a un par de píxeles y quedaría un
       calendario de 21 px de ancho. Se vio al probarlo en un panel de vista previa que
       reportaba `window.innerWidth === 0`. No es un caso de un visitante real, pero el
       coste de protegerlo es una línea. */
    .fh-panel { width: auto; left: 0; right: 0; min-width: 240px; }
}