/* ============================================================================
   PACIENTES · LANDING PÚBLICA · PET'SALUD
   ---------------------------------------------------------------------------
   Galería de pacientes felices (carrusel) y modal de opinión.
   Fragmento: src/main/resources/templates/landing/pacientes.html
        <section class="section section--white" id="pacientes">
        th:fragment="pacientes"

   Cubre: los controles del carrusel, la pista de tarjetas, la tarjeta
   .paciente y el <dialog> con la opinión del dueño.
   ============================================================================ */

/* ======================== PACIENTES ========================= */
.pacientes__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.pacientes__status { font-size: .92rem; color: var(--ink-700); }
.pacientes__buttons { display: flex; gap: 10px; }
.carousel-btn {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--white);
    border: 2px solid var(--teal-900);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.carousel-btn svg { width: 20px; height: 20px; stroke: var(--teal-900); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn:hover:not(:disabled) { background: var(--teal-900); }
.carousel-btn:hover:not(:disabled) svg { stroke: var(--white); }
.carousel-btn:disabled { opacity: .38; cursor: default; }

.pacientes__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 56px) / 3);
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.pacientes__track:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 4px; }

.paciente {
    position: relative;
    scroll-snap-align: start;
    background: var(--white);
    /* La seccion es blanca (mismo fondo que tenia Equipo): el borde va en
       --border, como las tarjetas de Equipo, para que se recorten bien. */
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(16, 40, 34, .05);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.paciente:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 40, 34, .12);
}
.paciente__foto { aspect-ratio: 1 / 1; background: var(--teal-50); overflow: hidden; }
.paciente__foto img { width: 100%; height: 100%; object-fit: cover; }
.paciente__body { padding: 20px 20px 24px; }
.paciente__name { font-size: 1.22rem; }
.paciente__breed { font-size: .92rem; color: var(--ink-700); margin-top: 2px; }

/* Afordancia de que la tarjeta abre el modal */
.paciente__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--teal-700);
}
.paciente__cta svg {
    width: 17px; height: 17px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.paciente:hover .paciente__cta { color: var(--teal-900); }

/* Boton transparente que cubre la tarjeta entera: es el que abre el modal.
   El texto real va en .u-visually-hidden (aria-label visible solo para
   lectores de pantalla). */
.paciente__open {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.paciente__open:focus-visible { outline: 3px solid var(--teal-700); outline-offset: -3px; }

/* Datos de la tarjeta que solo se ven dentro del modal (los lee el JS) */
.paciente__tag {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 11px;
    border: 1px solid var(--teal-600);
    border-radius: 40px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--teal-900);
}
.paciente__quote {
    margin-top: 14px;
    font-size: .96rem;
    font-style: italic;
    color: var(--ink-700);
}
.paciente__owner { display: block; margin-top: 8px; font-style: normal; font-size: .86rem; color: var(--teal-900); font-weight: 700; }

/* ===================== MODAL DE OPINIÓN ===================== */
/* <dialog> nativo: da foco atrapado, Escape y ::backdrop sin Bootstrap. */
.paciente-modal {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--ink-700);
    box-shadow: 0 24px 64px rgba(16, 40, 34, .3);
    overflow: hidden;
}
.paciente-modal::backdrop { background: rgba(16, 40, 34, .58); }
.paciente-modal[open] { animation: pacienteModalEntra .18s ease-out; }
@keyframes pacienteModalEntra {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
}
.paciente-modal__inner { position: relative; }
.paciente-modal__foto {
    width: 100%;
    height: 240px;
    object-fit: cover;
    padding: 4%;
    border-radius: 30px;

}
.paciente-modal__body { padding: 24px 26px 28px; }
.paciente-modal__tag {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--teal-600);
    border-radius: 40px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--teal-900);
}
.paciente-modal__nombre { font-size: 1.55rem; margin-top: 14px; }
.paciente-modal__raza { margin-top: 2px; font-size: .95rem; color: var(--ink-700); }
.paciente-modal__cita {
    margin: 20px 0 0;
    padding: 16px 18px;
    background: var(--teal-50);
    border-left: 3px solid var(--teal-600);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1.02rem;
    font-style: italic;
    color: var(--ink-700);
}
.paciente-modal__autor {
    margin-top: 10px;
    font-style: normal;
    font-size: .9rem;
    color: var(--teal-900);
    font-weight: 700;
}
.paciente-modal__autor-label { font-weight: 400; color: var(--ink-700); }
.paciente-modal__cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--white);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(16, 40, 34, .28);
    cursor: pointer;
}
.paciente-modal__cerrar svg {
    width: 20px; height: 20px;
    stroke: var(--teal-900); fill: none;
    stroke-width: 2.2; stroke-linecap: round;
}
.paciente-modal__cerrar:hover { background: var(--teal-900); }
.paciente-modal__cerrar:hover svg { stroke: var(--white); }

/* Respaldo para navegadores sin <dialog> nativo: el bloque se fija y
   se centra, pero sin fondo oscurecido. */
.paciente-modal.is-open {
    position: fixed;
    inset: 0;
    z-index: 200;
    margin: auto;
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1024px) {
    .pacientes__track { grid-auto-columns: calc((100% - 28px) / 2); }
}

@media (max-width: 700px) {
    .pacientes__track { grid-auto-columns: 84%; gap: 16px; }
}

@media (max-width: 380px) {
    .pacientes__track { grid-auto-columns: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .pacientes__track { scroll-behavior: auto; }
}

@media (prefers-contrast: more) {
    .paciente__quote { color: var(--teal-900); }
}