/* Cannis Asesores (cara pública) — vidriera.css
   La portada y el listado de profesionales. DERIVADO de public/css/repronline/v3/embudo.css (§6, «marketplace»: barra, segmentos, resultados,
   grilla, vacío y paginación) con el prefijo rp- → as-. Se parte de Repronline a propósito: Asesores NO depende del bundle de Repronline
   (lo arma `php artisan repronline:css` y no está en git).

   Lo que Asesores le suma: el segmentado de TIPO de servicio hecho con enlaces (`aria-current`, no `aria-pressed`), una segunda fila liviana
   de filtros (atención, provincia y orden) debajo de la barra y la paginación con enlaces reales (el listado es un formulario GET que funciona
   sin JavaScript). La portada (`w-portada`, `w-bento`, `w-pasos`) es del sitio: no tiene CSS acá.

   La paginación (`.as-paginas*`) y `.as-solo-lector` son de las dos pantallas que paginan y viven en `armazon.css`. */

/* ── El tipo de servicio: un segmentado de enlaces ─────────────────────────
   «Todos / Asesores legales / Ingenieros agrónomos». Es navegación, no un
   filtro del formulario: cada opción es otra dirección. La actual se marca
   con aria-current="page" y se pinta como el elegido del segmentado de
   Repronline: menta sólida con la tinta navy. */

.as-segmentos {
    display: flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--w-surface-2);
}

.as-segmentos--centro {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--w-s3);
    /* En teléfono se desliza antes que romper la página; sin barra. */
    overflow-x: auto;
    scrollbar-width: none;
}

.as-segmentos--centro::-webkit-scrollbar { display: none; }

.as-segmentos__btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    color: var(--w-muted);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--w-transicion), background var(--w-transicion);
}

.as-segmentos__btn:hover { color: var(--w-text); }

.as-segmentos__btn[aria-current="page"] {
    /* La tinta sobre la menta es la navy. Nunca blanco: da 1,6:1. */
    background: var(--w-menta);
    color: var(--w-ink);
}

.as-segmentos__btn:focus-visible {
    outline: 2px solid var(--w-text);
    outline-offset: 2px;
}

/* ── Buscar y filtrar ──────────────────────────────────────────────────────
   La barra es el buscador y el botón, en una sola píldora (como la de
   Repronline). Atención, provincia y orden son tres elecciones con su propia
   etiqueta: van en una segunda fila, liviana, para que la píldora no se
   vuelva ilegible con cinco controles adentro. */

.as-filtros { margin-bottom: var(--w-s3); }

.as-barra {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding: 5px 5px 5px 0;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
    transition: border-color var(--w-transicion);
}

/* El foco tiene que verse: el borde de 1 px que pasa de gris a menta no alcanza para quien navega con teclado. */
.as-barra:focus-within {
    border-color: var(--w-border-fuerte);
    outline: 2px solid var(--w-menta);
    outline-offset: 2px;
}

.as-barra__buscar {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding-left: var(--w-s3);
}

.as-barra__buscar .w-ico { color: var(--w-muted); flex-shrink: 0; }

/* El campo va sin borde propio: el control que se ve es la barra entera. */
.as-barra__buscar input {
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0;
    border: 0;
    background: none;
    color: var(--w-text);
    font-family: var(--w-font-texto);
    font-size: 1rem;
    /* El placeholder es la única etiqueta visible: si no entra se corta con puntos suspensivos en vez de quedar a medias. */
    text-overflow: ellipsis;
}

.as-barra__buscar input:focus { outline: none; }
/* La tinta apagada del sistema (6,1:1 sobre la barra). El 35 % de blanco que traía Repronline daba 3,2:1. */
.as-barra__buscar input::placeholder { color: var(--w-muted); opacity: 1; }
.as-barra__buscar input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.4; }

.as-barra__filtrar {
    flex-shrink: 0;
    min-height: 42px;
    padding-inline: 1.4rem;
}

/* En escritorio la fila va centrada, como la cabecera y el segmentado que tiene encima; los campos no se estiran y «Limpiar» queda pegado al
   último, no al borde de la barra. */
.as-filtros__fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--w-s2) var(--w-s3);
    margin-top: var(--w-s3);
}

.as-filtros__fila .w-campo { flex: 0 1 15rem; min-width: 0; }

/* `w-campo` del sitio, en chico: la etiqueta es el mismo rótulo de las barras («ORDENAR», «PRECIO»). */
.as-filtros__fila .w-campo { gap: 0.4rem; }

.as-filtros__fila .w-campo__label {
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.as-filtros__fila .w-campo select {
    padding: 0.6rem 2.4rem 0.6rem 0.9rem;
    background-position: right 0.8rem center;
    background-size: 1em;
    font-size: 0.95rem;
}

.as-filtros__fila .w-campo__ayuda { font-size: 0.78rem; }

.as-filtros__limpiar {
    align-self: start;
    /* Alineado con los selects, no con sus etiquetas (rótulo + aire). */
    margin-top: 1.85rem;
}

@media (max-width: 860px) {
    /* Tres campos parejos, ocupando el ancho: no queda ninguno solo en un renglón con medio ancho vacío. */
    .as-filtros__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
    .as-filtros__fila .w-campo { flex: none; }
    /* El texto de «Limpiar» queda a la altura de los campos: el botón de texto trae 0,5 rem de aire a cada lado. */
    .as-filtros__limpiar { grid-column: 1 / -1; justify-self: start; margin: 0 0 0 -0.5rem; }
}

@media (max-width: 640px) {
    /* Atención y provincia lado a lado; el orden, a todo el ancho debajo. */
    .as-filtros__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-filtros__fila .w-campo:nth-child(3) { grid-column: 1 / -1; }
    /* Con 16 px o más iOS no hace zoom al enfocar un campo. */
    .as-filtros__fila .w-campo select { font-size: 1rem; }
}

@media (max-width: 480px) {
    /* En teléfono el segmentado ocupa el ancho y cada opción reparte el suyo: si un nombre no entra se parte en dos renglones, y ninguna queda
       escondida detrás de un deslizador (la actual podría ser justo la que no se ve). */
    .as-segmentos--centro { width: 100%; border-radius: 22px; }
    .as-segmentos__btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
    .as-barra__buscar { padding-left: var(--w-s2); gap: var(--w-s1); }
    .as-barra__filtrar { padding-inline: 1.1rem; }
}

@media (max-width: 360px) {
    /* A 320 px cada columna de selects mide 130 px: «Cualquiera» tiene que entrar sin pisar el chevron. */
    .as-filtros__fila .w-campo select { padding-left: 0.75rem; padding-right: 2rem; background-position: right 0.65rem center; }
    .as-barra__filtrar { padding-inline: 0.9rem; }
}

/* ── El resultado ──────────────────────────────────────────────────────── */

.as-resultados {
    margin: 0 0 var(--w-s3);
    color: var(--w-muted);
    font-size: 0.88rem;
}

.as-resultados strong { color: var(--w-text); font-weight: 700; }

.as-medicos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--w-s3);
}

@media (max-width: 480px) {
    .as-medicos { grid-template-columns: minmax(0, 1fr); }
}

/* Vacío: el listado sin nadie, o sin nadie con esos filtros. Dos textos distintos que salen de la config. */

.as-vacio {
    margin-top: var(--w-s3);
    padding: var(--w-s6) var(--w-s4);
    border: 1px dashed var(--w-border);
    border-radius: var(--w-radio);
    text-align: center;
    color: var(--w-muted);
}

.as-vacio .w-ico { width: 2.5em; height: 2.5em; color: var(--w-border-fuerte); margin-bottom: var(--w-s3); }
.as-vacio p { margin-inline: auto; max-width: 52ch; }
.as-vacio__titulo { font-family: var(--w-font-titulos); font-size: 1.15rem; color: var(--w-text); margin-bottom: var(--w-s1); }
.as-vacio__acciones { margin-top: var(--w-s3); }

/* ── El remate de «cómo funciona» ──────────────────────────────────────── */

.as-cta-centro {
    margin-top: var(--w-s5);
    text-align: center;
}

.as-cta-centro .w-portada__dato { margin-top: var(--w-s2); }