/* Tailwind no hace cómodo: las animaciones, el estado activo de los chips y el dibujo del marcador. */

/* Puntito que "late" dentro del botón de turno */
.punto-late { width:10px; height:10px; background:#fff; border-radius:50%; animation:latido 1.8s infinite; }
@keyframes latido {
0%   { box-shadow:0 0 0 0   rgba(255,255,255,.7); }
70%  { box-shadow:0 0 0 8px rgba(255,255,255,0);   }
100% { box-shadow:0 0 0 0   rgba(255,255,255,0);   }
}

/* Estado ACTIVO de los chips (tu JS agrega/saca la clase .activo).
    Cada chip se pinta con su propio color. */
.chip[data-filtro="turno"].activo   { background:#16a34a; border-color:#16a34a; color:#fff; }
.chip[data-filtro="abierta"].activo { background:#2563eb; border-color:#2563eb; color:#fff; }
.chip[data-filtro="cerrada"].activo { background:#94a3b8; border-color:#94a3b8; color:#fff; }
.chip.activo > span:first-of-type   { background:#fff !important; }   /* el puntito en blanco */

/* Card resaltada cuando tocan su marcador (tu JS le pone .activa) */
.card.activa { border-color:#16a34a; box-shadow:0 0 0 2px #dcfce7; }

/* ── MARCADOR DE FARMACIA (la cruz) ── */
.marcador { position:relative; width:32px; height:40px; }
.marcador svg { display:block; position:relative; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
/* Anillo que late detrás de la cruz, solo en las de turno */
.pulso-turno {
position:absolute; left:16px; top:15px; width:26px; height:26px;
border-radius:50%; background:#16a34a; z-index:1;
animation:pulso 2s ease-out infinite;
}
@keyframes pulso {
0%   { transform:translate(-50%,-50%) scale(.5); opacity:.8; }
100% { transform:translate(-50%,-50%) scale(2.2); opacity:0; }
}

/* Snackbar */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    width: fit-content;
    max-width: 90vw;  /* por si el texto es muy largo en celu */
    min-width: 260px;
    background-color: #16a34a; 
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px; 
    padding: 14px 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    position: fixed;  /* seteado arriba de la pagina */
    z-index: 9999;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

/* Mostrar el snackbar cuando se hace click */
#snackbar.show {
    visibility: visible; 
    animation: fadein 0.4s, fadeout 0.4s 3.5s forwards;
}

@keyframes fadein {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
}

@keyframes fadeout {
    from { transform: translate(-50%, 0);     opacity: 1; }
    to   { transform: translate(-50%, -20px); opacity: 0; }
}


/* Accesibilidad: si la persona pidió menos movimiento, apagamos animaciones */
@media (prefers-reduced-motion:reduce) {
.punto-late, .pulso-turno { animation:none; }
}

@media (max-width: 767px) {
    :root {
        --farma-mobile-map-height: clamp(220px, 34svh, 300px);
    }

    .farma-map {
        height: var(--farma-mobile-map-height);
    }

    #lista {
        background: #f8fafc;
    }

    .card {
        scroll-margin-top: calc(var(--farma-mobile-map-height) + 12px);
    }

    #snackbar {
        top: calc(var(--farma-mobile-map-height) + 150px);
        bottom: auto;
        transform: translate(-50%, -50%);
    }

    @keyframes fadein {
        from { transform: translate(-50%, calc(-50% + 20px)); opacity: 0; }
        to   { transform: translate(-50%, -50%); opacity: 1; }
    }

    @keyframes fadeout {
        from { transform: translate(-50%, -50%); opacity: 1; }
        to   { transform: translate(-50%, calc(-50% + 20px)); opacity: 0; }
    }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    #lista {
        background: #0f172a;
    }
}

.resaltar-fallback {
    animation: pulso-fallback 0.6s ease-in-out 3;
    border-color: #16a34a !important;
}

@keyframes pulso-fallback {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    50%      { box-shadow: 0 0 0 4px rgba(22,163,74,0.4); }
}

/* Respetamos prefers-reduced-motion: sin animación, pero igual marcamos el borde */
@media (prefers-reduced-motion: reduce) {
    .resaltar-fallback { animation: none; border-color: #16a34a !important; }
}

.distancia:empty {
    display: none;
}

/* ── Horario plegable ── */
.horario-toggle { cursor: pointer; text-align: left; background: none; border: none; padding: 0; color: inherit; font: inherit; }
.horario-chevron { transition: transform .25s ease; }
.horario.abierto .horario-chevron { transform: rotate(180deg); }

.horario-detalle {
    display: grid;
    grid-template-rows: 0fr;            /* plegado */
    transition: grid-template-rows .25s ease;
}
.horario-detalle > .horario-semana { overflow: hidden; min-height: 0; }
.horario.abierto .horario-detalle { grid-template-rows: 1fr; }   /* desplegado */

.horario-semana { padding-top: 4px; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
    .horario-detalle, .horario-chevron { transition: none; }
}