/* ============================================================
   EVIDENCIA REAL DE LA BITÁCORA (1-oct-2026)
   Fotos y videos tal como los subieron los técnicos a la bitácora de un cliente, sin sus
   datos. Lo cargan las páginas de servicio (las que traen entrada en
   scripts/evidencia-datos.js) y el inicio. Va DESPUÉS de styles.css: usa sus variables.
   El texto va en HTML (nunca encima de la imagen): tiene que leerse en cualquier ancho.
   ============================================================ */
/* Los enlaces del inicio llevan directo aquí (#evidencia). La barra de arriba es sticky
   (61 px en teléfono, 65 en escritorio, medido el 1-oct-2026): sin este margen el título de
   la sección quedaría escondido debajo de ella al llegar. */
.svc-evidencia, .evidencia-section { scroll-margin-top: 66px; }
.svc-ev-cuenta {
    display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--orange);
    border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 22px; color: var(--text-muted); font-size: .95rem;
}
.svc-ev-cuenta strong { color: var(--navy); font-size: 1.35rem; font-weight: 800; }
.svc-ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.svc-ev-item {
    margin: 0; background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.svc-ev-item img, .svc-ev-item video {
    width: 100%; height: 260px; object-fit: cover; display: block; background: #1d2633;
}
.svc-ev-item figcaption { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-ev-dato { font-weight: 800; color: var(--orange-dark); font-size: 1.05rem; line-height: 1.25; }
.svc-ev-texto { color: var(--navy); font-size: .93rem; line-height: 1.5; margin: 0; }
.svc-ev-texto::before { content: "\201C"; } .svc-ev-texto::after { content: "\201D"; }
.svc-ev-quien { color: var(--text-muted); font-size: .8rem; margin-top: auto; }
.svc-ev-tag {
    align-self: flex-start; background: rgba(37, 211, 102, .12); color: #137a3a; font-weight: 700;
    font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-full);
}
.svc-ev-video .svc-ev-dato::before { content: "\25B6\FE0E  "; }
/* El enlace a la página del servicio (solo en el inicio). Alto táctil de 44 px. */
.svc-ev-link {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
    color: var(--orange-dark); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.svc-ev-link:hover, .svc-ev-link:focus-visible { text-decoration: underline; }
.svc-ev-nota { margin: 18px 0 0; font-size: .86rem; color: var(--text-muted); }
.svc-ev-desliza { display: none; }

/* En escritorio se ven las primeras 8; el resto espera detrás del botón (con 30 tarjetas la
   página se volvía una pared de fotos). Sin JS no hay botón que apretar, así que .abierta la
   pone el propio botón; si el script de la página no corre, igual se ve todo en teléfono. */
.svc-ev-vermas {
    display: block; margin: 20px auto 0; min-height: 48px; padding: 0 26px;
    background: var(--white); color: var(--navy); border: 2px solid var(--navy); border-radius: var(--radius-full);
    font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.svc-ev-vermas:hover, .svc-ev-vermas:focus-visible { background: var(--navy); color: var(--white); }
@media (min-width: 601px) {
    .svc-ev-grid:not(.abierta) .svc-ev-extra { display: none; }
}

/* En teléfono, 8 tarjetas apiladas eran ~4,500 px (cinco pantallas de fotos, medido el
   1-oct-2026). Se vuelven una tira que se desliza de lado, con la siguiente asomándose para
   que se note que hay más. Sin márgenes negativos: harían que la PÁGINA se arrastre.
   Aquí van TODAS: de lado no ocupan alto, así que el botón sobra. */
@media (max-width: 600px) {
    .svc-ev-grid {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
        padding-bottom: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    .svc-ev-item { flex: 0 0 84%; scroll-snap-align: start; }
    .svc-ev-item img, .svc-ev-item video { height: 250px; }
    .svc-ev-desliza { display: block; margin: -10px 0 12px; font-size: .88rem; font-weight: 600; color: var(--orange-dark); }
    .svc-ev-vermas { display: none; }
}

/* ---------- La sección mezclada del inicio ---------- */
.evidencia-section {
    background: var(--gray-bg);
    padding: var(--section-pad);
    border-top: 1px solid var(--border);
}
.evidencia-section .section-header { margin-bottom: 26px; }
@media (max-width: 768px) {
    .evidencia-section { padding: var(--section-pad-sm); }
}