/* =====================================================================
   El panel de filtros.

   Se abre encima del listado. En el celular ocupa toda la pantalla; en
   la computadora queda como una hoja al costado, para que el listado se
   siga viendo atrás y no parezca que te fuiste a otro lado.
   ===================================================================== */

.pf{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(4,3,8,.72);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    display:flex;
    justify-content:flex-end;
}

.pf[hidden]{ display:none; }

.pf-caja{
    width:100%;
    max-width:440px;
    background:#14101C;
    color:#F4F1EA;
    display:flex;
    flex-direction:column;
    position:relative;
    box-shadow:-20px 0 60px rgba(0,0,0,.55);
}

/* Cada pantalla ocupa la caja entera: se entra y se sale, no se
   despliega nada adentro. Así no hay una lista que scrollea adentro de
   otra que scrollea, que es lo que se veía mal. */
.pf-vista{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
}

.pf-vista[hidden]{ display:none; }

/* ---------- encabezado ---------- */

.pf-cab{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 18px 14px;
    border-bottom:1px solid rgba(244,241,234,.08);
}

.pf-titulo{
    flex:1 1 auto;
    text-align:center;
    font-size:16.5px;
    font-weight:800;
    letter-spacing:-.01em;
}

/* Salidas con palabras, no con símbolos: una cruz sola no dice si
   cierra, si borra, ni qué pasa con lo marcado. */
.pf-txt{
    flex:0 0 auto;
    border:none;
    background:transparent;
    color:rgba(244,241,234,.62);
    font-size:14.5px;
    font-weight:500;
    padding:10px 4px;
    min-height:44px;
    cursor:pointer;
    font-family:inherit;
}

.pf-txt--fuerte{ color:#E8B45C; font-weight:600; }
.pf-txt:disabled{ color:rgba(244,241,234,.25); cursor:default; }

.pf-atras,
.pf-hueco{
    flex:0 0 auto;
    width:40px;
    height:40px;
}

.pf-atras{
    border:1px solid rgba(244,241,234,.18);
    background:transparent;
    color:#F4F1EA;
    border-radius:999px;
    font-size:17px;
    line-height:1;
    cursor:pointer;
}

/* ---------- lo elegido ---------- */

.pf-elegidos{
    flex:0 0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:14px 18px 2px;
}

.pf-elegidos[hidden]{ display:none; }

.pf-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(232,180,92,.16);
    border:1px solid rgba(232,180,92,.42);
    color:#F5D48F;
    border-radius:999px;
    padding:8px 11px 8px 14px;
    font-size:12.5px;
    font-weight:600;
    min-height:36px;
    cursor:pointer;
    font-family:inherit;
}

.pf-chip i{ font-style:normal; font-size:15px; opacity:.75; }

/* ---------- buscador ---------- */

.pf-buscar{ flex:0 0 auto; padding:12px 18px; }

.pf-buscar input{
    width:100%;
    box-sizing:border-box;
    background:rgba(244,241,234,.06);
    border:1px solid rgba(244,241,234,.14);
    border-radius:12px;
    padding:13px 14px;
    color:#F4F1EA;
    font-size:15px;            /* 16 o más evita que el iPhone haga zoom */
    font-family:inherit;
}

.pf-buscar input:focus{
    outline:none;
    border-color:rgba(232,180,92,.55);
}

.pf-buscar input::placeholder{ color:rgba(244,241,234,.4); }

/* ---------- cuerpo ---------- */

.pf-cuerpo{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:6px 18px 12px;
}

.pf-rotulo{
    margin:14px 0 9px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(244,241,234,.35);
}

.pf-rotulo--corte{
    border-top:1px solid rgba(244,241,234,.1);
    padding-top:16px;
}

/* ---------- filas del inicio ---------- */

.pf-fila{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:14px;
    background:rgba(244,241,234,.04);
    border:1px solid rgba(244,241,234,.09);
    border-radius:14px;
    padding:15px 16px;
    margin-bottom:10px;
    min-height:70px;
    cursor:pointer;
    text-align:left;
    color:inherit;
    font-family:inherit;
}

.pf-fila > span{ flex:1 1 auto; min-width:0; }
.pf-fila b{ display:block; font-size:15px; font-weight:700; }

.pf-fila small{
    display:block;
    font-size:13px;
    color:rgba(244,241,234,.45);
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pf-fila small.pf-hay{ color:#F5D48F; }
.pf-fila i{ font-style:normal; font-size:18px; color:rgba(244,241,234,.35); }

/* ---------- una opción ---------- */

.pf-op{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(244,241,234,.03);
    border:1px solid rgba(244,241,234,.08);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:6px;
    min-height:50px;
    cursor:pointer;
    text-align:left;
    color:#F4F1EA;
    font-family:inherit;
}

.pf-op--si{
    background:rgba(232,180,92,.12);
    border-color:rgba(232,180,92,.45);
    color:#F5D48F;
}

.pf-op--chica{ min-height:46px; padding:10px 13px; }

.pf-caja-tilde{
    flex:0 0 auto;
    width:21px;
    height:21px;
    border-radius:7px;
    border:1.5px solid rgba(244,241,234,.28);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    color:#14101C;
}

.pf-op--si .pf-caja-tilde{
    background:#E8B45C;
    border-color:#E8B45C;
}

.pf-op-txt{ flex:1 1 auto; font-size:14.5px; font-weight:500; }

/* El número. En verde porque es lo bueno: hay gente ahí. */
.pf-n{
    flex:0 0 auto;
    font-size:12.5px;
    font-weight:700;
    color:#86EFAC;
    font-variant-numeric:tabular-nums;
}

.pf-op--si .pf-n{ color:#F5D48F; }

/* ---------- departamentos ---------- */

.pf-hijos{
    margin:8px 0 12px 13px;
    padding-left:15px;
    border-left:2px solid rgba(232,180,92,.3);
}

.pf-nota{
    margin:6px 0 0;
    font-size:11px;
    color:rgba(244,241,234,.3);
    line-height:1.5;
}

/* ---------- cuando no hay nada ---------- */

.pf-vacio{
    margin-top:14px;
    padding:24px 18px;
    border:1px dashed rgba(244,241,234,.14);
    border-radius:14px;
    text-align:center;
    font-size:13.5px;
    color:rgba(244,241,234,.55);
    line-height:1.55;
}

/* ---------- edad ---------- */

.pf-rango{ padding:18px 4px 8px; }

.pf-rango label{
    font-size:15px;
    font-weight:700;
    margin-right:10px;
}

.pf-rango output{
    font-size:13.5px;
    font-weight:700;
    color:#F5D48F;
    float:right;
}

.pf-rango input[type="range"]{
    width:100%;
    margin:16px 0 0;
    accent-color:#E8B45C;
}

.pf-rango-pie{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:11.5px;
    color:rgba(244,241,234,.4);
}

/* ---------- el botón ---------- */

.pf-pie{
    flex:0 0 auto;
    padding:14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid rgba(244,241,234,.08);
    background:#14101C;
}

.pf-ver{
    width:100%;
    box-sizing:border-box;
    border:none;
    border-radius:14px;
    padding:16px;
    background:linear-gradient(135deg, #E8B45C, #F5D48F);
    color:#1A1206;
    font-size:16px;
    font-weight:800;
    min-height:56px;
    cursor:pointer;
    font-family:inherit;
}

.pf-ver:disabled{
    background:rgba(244,241,234,.08);
    color:rgba(244,241,234,.35);
    cursor:default;
}

/* ---------- celular ---------- */

@media (max-width: 560px){
    .pf-caja{ max-width:none; }
}

/* Quien pidió que no se muevan las cosas, que no se muevan. */
@media (prefers-reduced-motion: reduce){
    .pf-caja, .pf-vista{ transition:none !important; }
}