/*
|--------------------------------------------------------------------------
| R4.8G.4 — Normalización compartida de fichas públicas
|--------------------------------------------------------------------------
| Esta capa complementa los estilos específicos existentes. No sustituye
| los temas ni fija identidad visual propia de una clínica.
|--------------------------------------------------------------------------
*/

.ficha-detalle .boton,
.ficha-detalle a {
    -webkit-tap-highlight-color: transparent;
}

.ficha-detalle .boton:focus-visible,
.ficha-detalle .miga a:focus-visible,
.ficha-detalle .datos-contacto a:focus-visible,
.ficha-detalle .enlace-tarjeta-principal:focus-visible,
.ficha-detalle .profesional-enlace:focus-visible {
    outline: 3px solid rgba(var(--identidad-secundario-rgb), 0.72);
    outline-offset: 3px;
}

.ficha-detalle .boton-transparente {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.ficha-detalle .boton-transparente:hover,
.ficha-detalle .boton-transparente:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
}

.ficha-detalle .panel,
.ficha-detalle .bloque-perfil,
.ficha-detalle .tarjeta-lateral,
.ficha-detalle .orientacion {
    overflow-wrap: anywhere;
}

.ficha-detalle .datos-contacto a,
.ficha-detalle .datos-contacto span {
    display: block;
    overflow-wrap: anywhere;
}

.ficha-detalle .datos-contacto a:hover {
    text-decoration: underline;
}

.ficha-detalle .presentacion-resumen:empty,
.ficha-detalle .resumen-principal:empty {
    display: none;
}

@media (max-width: 620px) {
    .ficha-detalle .presentacion-botones {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ficha-detalle .presentacion-botones .boton {
        width: 100%;
    }

    .ficha-detalle .panel-contacto .boton,
    .ficha-detalle .orientacion .boton {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| R4.8J.3 — robustez responsive de fichas y detalles
|--------------------------------------------------------------------------
*/

.ficha-detalle,
.ficha-detalle .presentacion-grid,
.ficha-detalle .contenido-grid,
.ficha-detalle .panel,
.ficha-detalle .bloque-perfil,
.ficha-detalle .tarjeta-lateral,
.ficha-detalle .orientacion {
    min-width: 0;
    max-width: 100%;
}

.ficha-detalle h1,
.ficha-detalle h2,
.ficha-detalle h3,
.ficha-detalle .miga,
.ficha-detalle .miga a,
.ficha-detalle .etiqueta,
.ficha-detalle .presentacion-resumen,
.ficha-detalle .resumen-principal,
.ficha-detalle .boton {
    overflow-wrap: anywhere;
}

.ficha-detalle .boton {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.ficha-detalle img,
.ficha-detalle video,
.ficha-detalle iframe {
    max-width: 100%;
}

.ficha-detalle img,
.ficha-detalle video {
    height: auto;
}

@media (max-width: 420px) {
    .ficha-detalle .presentacion-botones,
    .ficha-detalle .presentacion-botones > *,
    .ficha-detalle .orientacion .boton,
    .ficha-detalle .panel-contacto .boton {
        min-width: 0;
        max-width: 100%;
    }
}