/* Appointsly Web — estilos globales */
/* Bootstrap eliminado. El sistema de diseño usa Tailwind CSS (CDN) con el tema Luminous Azure. */

/* Altura de la cabecera fija del layout publico: la marca (h-12 / sm:h-14) mas su py-4.
   El contenido la consume con pt-[var(--header-h)] en vez del "pt-24" fijo que habia en
   LayoutResolver.TopPadding, que dejaba 16 px de hueco por debajo de sm y 8 px por
   encima sin que nadie lo decidiera, y que descuadraba todas las paginas publicas a la
   vez en cuanto cambiaba el tamano de la marca. */
:root { --header-h: 5rem; }

@media (min-width: 640px) {
    :root { --header-h: 5.5rem; }
}

html, body {
    margin: 0;
    padding: 0;
}

/* El ancla de un enlace #seccion no puede quedar debajo de la cabecera fija. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }

/* ── Sidebar de la app (_LayoutApp) ──────────────────────────────────────────
   En móvil (<1024px) el sidebar es un drawer off-canvas (Tailwind:
   -translate-x-full + lg:translate-x-0) que se abre con la hamburguesa.
   En escritorio es un rail de iconos (4.5rem). El contenido no se desplaza:
   al pasar el ratón —o al enfocar con teclado, vía :focus-within— se ensancha a
   16rem superpuesto. El :focus-within no es decorativo: sin él, tabulando se
   recorrían catorce enlaces sin etiqueta visible.
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    #app-sidebar {
        width: 4.5rem;
        overflow: hidden;
        transition: width .2s ease, box-shadow .2s ease;
    }

    /* El desplazamiento va en el envoltorio, que ahora contiene main y footer. */
    #app-shell { margin-left: 4.5rem; }

    /* Cerrado: ocultar todo el chrome (textos, toggle, selector, perfil, scroll). */
    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-chrome {
        display: none !important;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-brand {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        margin-bottom: 0.25rem;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-brand > div {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-brand .font-headline {
        justify-content: center;
        width: 100%;
        gap: 0;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-brand img {
        margin-inline: auto;
        height: 2.25rem;
        width: auto;
    }

    #app-sidebar:not(.is-open):not(:focus-within) nav a {
        justify-content: center;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Se desplaza aunque la barra no se vea: con catorce destinos (modo Negocio),
       en un portatil de 768 px de alto los ultimos quedaban cortados y no habia
       forma de alcanzarlos sin pasar el raton por encima. */
    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-nav {
        overflow-y: auto;
        scrollbar-width: none;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .nav-badge {
        position: absolute;
        top: 0.35rem;
        right: 0.2rem;
        margin: 0;
        /* 9 px estaba por debajo de cualquier minimo legible; a 10 px el circulo
           necesita algo mas de sitio para que quepan dos cifras. */
        min-width: 1.1rem;
        height: 1.1rem;
        padding: 0 0.2rem;
        font-size: 10px;
    }

    #app-sidebar:not(.is-open):not(:focus-within) .sidebar-search-cta {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        justify-content: center;
    }

    #app-sidebar.is-open,
    #app-sidebar:focus-within {
        width: 16rem;
        box-shadow: 8px 0 28px rgba(1, 27, 42, .12);
    }

    #app-sidebar.is-open .sidebar-nav,
    #app-sidebar:focus-within .sidebar-nav {
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* ── Custom Select (cs-group) ────────────────────────────────────────────────
   Dropdowns accesibles que reemplazan los <select> nativos del navegador.
   Usados en las páginas de Reservar, Panel y filtros de negocio/trabajador.

   Dos formas de usarlos:
   1. Markup escrito a mano (cs-group + cs-trigger + cs-dropdown), como en
      Panel/Reservas, cuando la opción lleva avatar, icono o subtítulo.
   2. Clase "cs-select" sobre un <select> normal: wwwroot/js/select-enhance.js
      construye el markup anterior al cargar la página. Es la opción por
      defecto para selects de solo texto.

   Los colores salen de la gama de marca de tailwind.config.js (azul del logo):
   primary #011B2A, primary-container #0E4A6B, outline-variant #CBD5DD.
   ─────────────────────────────────────────────────────────────────────────── */

.cs-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cs-group  { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cs-label  { font-size: 11px; font-weight: 700; color: #4B5563; text-transform: uppercase; letter-spacing: .06em; }

.cs-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #F4F7F9; border: 1.5px solid #CBD5DD; border-radius: 12px;
    padding: 10px 12px; font-family: inherit; cursor: pointer; text-align: left;
    transition: border-color .2s, box-shadow .2s, background .15s;
}
.cs-trigger:hover  { border-color: #0E4A6B; background: white; }
.cs-trigger:focus  { outline: none; border-color: #011B2A; background: white; box-shadow: 0 0 0 3px rgba(14,74,107,.14); }
.cs-trigger.open   { border-color: #011B2A; background: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.cs-chevron { flex-shrink: 0; color: #4B5563; font-size: 20px !important; transition: transform .2s; }
.cs-trigger.open .cs-chevron { transform: rotate(180deg); }

/* Estado deshabilitado: el enhancer copia el disabled del <select> nativo. */
.cs-trigger:disabled { cursor: not-allowed; opacity: .55; background: #EDF1F4; }
.cs-trigger:disabled:hover { border-color: #CBD5DD; background: #EDF1F4; }

.cs-dropdown {
    position: absolute; top: calc(100% - 2px); left: 0; right: 0;
    background: white; border: 1.5px solid #011B2A; border-top: none;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
    padding: 4px 6px 8px; box-shadow: 0 12px 32px rgba(1,27,42,.16);
    z-index: 100; max-height: 260px; overflow-y: auto;
}

/* Cuando no hay sitio debajo, el JS abre hacia arriba (clase en trigger y lista). */
.cs-trigger.open-up { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.cs-dropdown--up {
    top: auto; bottom: calc(100% - 2px);
    border-top: 1.5px solid #011B2A; border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 32px rgba(1,27,42,.16);
}

.cs-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; transition: background .1s; }
.cs-option:hover, .cs-option--focus { background: #EDF1F4; }
.cs-option--active { background: rgba(14,74,107,.10); }
.cs-option--active .cs-name { font-weight: 700; color: #0E4A6B; }
.cs-option--disabled { opacity: .45; cursor: not-allowed; }
.cs-option--disabled:hover { background: transparent; }

.cs-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(14,74,107,.25); }
.cs-avatar-fallback { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #A3CCE2, #8ABBD6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; color: #011B2A; }
.cs-avatar--muted { background: #E6EBEF; color: #4B5563; }

.cs-icon { width: 30px; height: 30px; border-radius: 6px; background: rgba(14,74,107,.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0E4A6B; }
.cs-icon .material-symbols-outlined { font-size: 17px !important; }
.cs-icon--muted { background: #E6EBEF; color: #4B5563; }

.cs-row  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cs-info { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.cs-name { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-name--muted { color: #4B5563; font-weight: 400; }
.cs-sub  { font-size: 11px; color: #4B5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* El <select class="cs-select"> original sigue en el DOM tras la mejora visual:
   es el que viaja en el formulario. Se vuelve invisible con opacity, NO con
   display:none ni reduciéndolo a 1px, porque un <select required> sin caja de
   layout hace que el navegador aborte el envío con "An invalid form control is
   not focusable" y sin mostrar mensaje. Ocupando el mismo hueco que el trigger,
   la validación nativa funciona y su globo aparece donde toca.
   Si el JS no llegara a ejecutarse, el atributo data-cs-ready no se pone y el
   select se ve y funciona como uno normal. */
.cs-select[data-cs-ready] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; appearance: none; border: none; background: none;
}

/* ── Campos de hora y fecha ──────────────────────────────────────────────────
   Se dejan como campos de texto con formato: se escriben con el teclado, que es
   lo mas rapido en el editor de horarios (56 campos), y conservan la validacion
   y el formato HH:mm del navegador.

   A las horas se les quita el boton de reloj, que es lo unico que abre el
   desplegable nativo del sistema. Ese desplegable se dibuja fuera del documento
   y ninguna regla CSS llega a el, asi que o desentonaba con el resto de la web o
   habia que sustituirlo por uno propio; se probo y estorbaba mas que ayudaba en
   una rejilla tan densa. Sin boton no hay desplegable y el campo se comporta como
   lo que es: un campo de texto con formato de hora.

   Las fechas SI conservan su calendario: ahi el nativo es util y no hay nada
   equivalente que teclear.

   Lo unico que no se fija aqui es el relleno: cada sitio tiene el suyo (las filas
   del horario son compactas a proposito) y forzarlo desmontaria esas rejillas.
   ─────────────────────────────────────────────────────────────────────────── */
/* Fuera el boton de reloj del navegador: es lo unico que abre su desplegable. */
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   Campos numericos sin las flechas del navegador.

   Se aplica con la clase .no-spinner, no a todo [type="number"]: hay campos
   donde subir de uno en uno es comodo. Donde el campo va dentro de un recuadro
   con un icono de unidad al lado (minutos, precio) las flechas quedan pegadas
   al icono y ensucian el conjunto.
   ─────────────────────────────────────────────────────────────────────────── */
input[type="number"].no-spinner::-webkit-outer-spin-button,
input[type="number"].no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* En su lugar, un reloj dibujado como fondo. Es decorativo (no se pulsa): solo
   sirve para que se lea de un vistazo que ahi va una hora. Va como data URI y no
   como icono de fuente porque la CSP de produccion no admite peticiones externas
   y un ::after no se puede pintar sobre un input, que es un elemento vacio. */
input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    /* Sitio para el icono; gana al px-3 de Tailwind por especificidad. */
    padding-right: 2rem;
}

input[type="time"],
input[type="date"],
input[type="month"] {
    font-family: inherit;
    font-size: 14px;
    /* Cifras de ancho fijo: sin esto "11:00" y "09:30" mueven el campo al escribir. */
    font-variant-numeric: tabular-nums;
    color: #111827;
    line-height: 1.2;
    min-height: 38px;

    /* Mismo lenguaje visual que .cs-trigger: fondo, borde y radio identicos.
       background-color y no el atajo background: el atajo reinicia la imagen de
       fondo y se llevaria por delante el reloj de las horas. */
    background-color: #F4F7F9;
    border: 1.5px solid #CBD5DD;
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background .15s;

    accent-color: #0E4A6B;
    color-scheme: light;
}

input[type="time"]:hover,
input[type="date"]:hover,
input[type="month"]:hover {
    border-color: #0E4A6B;
    background-color: white;
}

input[type="time"]:focus,
input[type="date"]:focus,
input[type="month"]:focus {
    outline: none;
    border-color: #011B2A;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(14, 74, 107, .14);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
    opacity: .5;
    transition: opacity .15s, background .15s;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    background: rgba(14, 74, 107, .10);
}

/* Los tramos internos (hh, mm) llevan su propio resaltado del navegador, gris
   por defecto; se pasa al azul de la marca para que case con el foco del resto. */
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: rgba(14, 74, 107, .14);
    color: #011B2A;
    border-radius: 4px;
    outline: none;
}

input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Desplegables del selector de mes/año (_MonthPicker) ─────────────────────
   Los rellena month-picker.js en caliente, asi que no pasan por select-enhance
   y se quedaban con el control nativo. Se les quita la apariencia del sistema y
   se dibuja la flecha con el mismo gris que usa .cs-chevron.
   ─────────────────────────────────────────────────────────────────────────── */
.mp-month,
.mp-year {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    cursor: pointer;
}

.mp-month:hover,
.mp-year:hover { border-color: #0E4A6B; }

/* ══ Campos con error de validación ═══════════════════════════════════════════
   ASP.NET marca solo los campos inválidos con la clase .input-validation-error,
   tanto al redibujar la página desde el servidor como con la validación de
   jQuery en cliente. No había ninguna regla para esa clase, así que un campo mal
   rellenado se veía idéntico a uno correcto y el usuario no encontraba el fallo.

   El resalte no depende solo del color: el borde engorda a 2px, para que se
   distinga también con daltonismo. */
.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #EF4444 !important;
    border-width: 2px !important;
    background-color: #FEF2F2;
}

.input-validation-error:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}


.field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #EF4444;
}

/* ── Editor de horario base (cronograma semanal) ────────────────────────────
   Las barras se posicionan en % desde JS. La etiqueta de cerrado va en vertical
   para caber en la columna estrecha del domingo. */
.sched-chart {
    height: 280px;
}

.sched-chart-closed-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

#schedule-editor input[type="time"].sched-time {
    width: auto;
    min-width: 7.75rem;
}

/* Desglose de tiempos del editor de servicios (atención / pausa / limpieza / viaje). */
.svc-breakdown {
    display: flex;
    height: 0.75rem;
    width: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background: #E5E7EB;
    gap: 2px;
}

.svc-breakdown-seg {
    min-width: 4px;
    height: 100%;
}

.svc-breakdown-attention { background: #011B2A; }
.svc-breakdown-processing { background: #0E4A6B; }
.svc-breakdown-padding { background: #14B8A6; }
.svc-breakdown-travel { background: #B45309; }


/* ══ Foco de teclado — suelo garantizado ═════════════════════════════════════
   Habia 163 `focus:outline-none` y 134 `focus:ring-1` repartidos por las
   paginas: a 1 px, sobre superficies claras y con bordes que ya son
   outline-variant, el foco no se distinguia del estado normal, y siete
   `focus:ring-0` lo quitaban del todo.

   Va con :where() para que su especificidad sea 0 y cualquier estilo de foco
   propio (el de .cs-trigger, el de los campos de fecha) siga ganando: esos ya
   dibujan un box-shadow de 3 px que se ve bien. Gana a `focus:outline-none` de
   Tailwind por orden de cascada, porque site.css se carga despues de app.css.

   :focus-visible y no :focus: el navegador decide, y no aparece al hacer clic
   con el raton, que es la queja habitual cuando se fuerza un contorno global. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #0E4A6B; /* primary-container */
    outline-offset: 2px;
    border-radius: 4px;
}

/* ══ Buscar — hero + dock + scroll reveal ═══════════════════════════════════ */
.buscar-location-list {
    overscroll-behavior: contain;
}

.buscar-hero-media {
    transform: scale(1.04);
    transition: transform 12s cubic-bezier(0.16, 1, 0.3, 1);
}

.buscar-hero:hover .buscar-hero-media {
    transform: scale(1.08);
}

.buscar-hero-copy {
    animation: buscar-hero-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.buscar-search-bar {
    animation: buscar-hero-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes buscar-hero-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══ Mis pagos ═══════════════════════════════════════════════════════════════
   Listado de cobros online del consumidor: entrada escalonada y hover de fila.
   Respeta prefers-reduced-motion vía el bloque global al final de este fichero. */
@keyframes mis-pagos-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mis-pagos-enter {
    animation: mis-pagos-enter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mis-pagos-enter-1 { animation-delay: 40ms; }
.mis-pagos-enter-2 { animation-delay: 80ms; }
.mis-pagos-enter-3 { animation-delay: 120ms; }
.mis-pagos-enter-4 { animation-delay: 160ms; }
.mis-pagos-enter-5 { animation-delay: 200ms; }

.mis-pagos-row {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease;
}

.mis-pagos-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(1, 27, 42, 0.12);
    border-color: rgba(14, 74, 107, 0.28);
}

.mis-pagos-filter.is-active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(1, 27, 42, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .mis-pagos-enter {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .mis-pagos-row:hover {
        transform: none;
    }
}

/* Hub Mi progreso */
.mi-progreso-ring-arc {
    transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mi-progreso-level-bar {
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mi-progreso-filter {
    background: var(--color-surface-container-high, #e8eef2);
    color: var(--color-on-surface-variant, #5b6b76);
}

.mi-progreso-filter.is-active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(1, 27, 42, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .mi-progreso-ring-arc,
    .mi-progreso-level-bar {
        transition: none;
    }
}

/* Dock Buscar
   overflow-x fuerza clip en Y: ampliamos el scrollport con padding y lo
   compensamos con margen negativo para no empujar el layout de la página. */
.buscar-dock-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4.5rem 1rem 3.25rem;
    margin: -4.5rem -0.25rem -3.25rem;
    -webkit-overflow-scrolling: touch;
}

.buscar-dock {
    position: relative;
    border-radius: 1.75rem;
    background: #ffffff;
    border: 1px solid rgba(1, 27, 42, 0.08);
    box-shadow:
        0 1px 2px rgba(1, 27, 42, 0.05),
        0 12px 32px rgba(1, 27, 42, 0.14);
}

.buscar-dock-scroll.is-dragging,
body.buscar-dock-grabbing {
    cursor: grabbing !important;
    user-select: none !important;
}

.buscar-dock-scroll.is-dragging a {
    pointer-events: none;
}

/* Columna centrada: icono + etiqueta + punto */
.buscar-dock-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buscar-dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center bottom;
    transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.16s ease;
    will-change: transform;
}

.buscar-dock-item.is-hot .buscar-dock-icon {
    box-shadow: 0 14px 28px rgba(1, 27, 42, 0.28);
}

.buscar-dock-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: transparent;
    margin: -2px auto 0;
    align-self: center;
    flex-shrink: 0;
}

.buscar-dock-dot.is-active {
    background: #0E4A6B;
}

/* Icono «Todos»: rejilla 3×3 anclada al centro del tile (inset %, no flex) */
.buscar-dock-all-grid {
    position: absolute;
    inset: 22%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 22%;
    pointer-events: none;
    color: inherit;
}

.buscar-dock-all-grid i {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 9999px;
    background: currentColor;
    place-self: center;
}

/* Tarjetas discovery (carrusel) */
.buscar-discover-card {
    box-shadow:
        0 1px 2px rgba(1, 27, 42, 0.04),
        0 8px 24px rgba(1, 27, 42, 0.08);
    -webkit-user-drag: none;
    user-select: none;
}

.buscar-discover-card:hover {
    box-shadow:
        0 2px 4px rgba(1, 27, 42, 0.06),
        0 14px 32px rgba(1, 27, 42, 0.12);
}

/* Evita que el navegador “coja” la foto y robe el gesto de arrastre */
.buscar-discover-card__img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.buscar-discover-rail {
    /* overflow-x:auto fuerza overflow-y:auto; sin esto el wheel mueve 1–2 px
       en vertical (hover -translate-y + padding del carril). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* pan-y: el scroll de página en táctil; el arrastre horizontal lo hace JS. */
    touch-action: pan-y;
}

.buscar-discover-rail.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

.buscar-discover-rail.is-dragging a {
    pointer-events: none;
}

.buscar-discover-rail::-webkit-scrollbar {
    display: none;
}

/* Reveal al scroll */
.buscar-page .scroll-fade-item {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.buscar-page .scroll-fade-item.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Ocultar scrollbar del carril del dock sin perder scroll */
.buscar-page .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.buscar-page .no-scrollbar::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .buscar-hero-media,
    .buscar-hero:hover .buscar-hero-media {
        transform: none;
        transition: none;
    }

    .buscar-hero-copy,
    .buscar-search-bar {
        animation: none;
    }

    .buscar-page .scroll-fade-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══ Movimiento reducido ═════════════════════════════════════════════════════
   Antes solo estaba cubierta la animacion de entrada del asistente de alta
   (.ob-step, en Styles/input.css). Quedaban fuera las mas agresivas: el orbe
   del panel escalando al 125 % durante 700 ms, el zoom al 110 % de las fotos
   en los resultados de busqueda y los scrollIntoView suaves.

   No se ponen las duraciones a 0 sino a .01 ms: asi los eventos transitionend
   y animationend siguen disparandose y no se queda colgado ningun JS que los
   espere. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}