/*
 * Mk Médico - Doctores y Especialidades — frontend
 *
 * Design System: alineado con docs/_refresh-design/refresh-system.css
 * Si el sitio carga refresh-system.css, las variables --ecm-* las toma de ahí.
 * Si no, los fallbacks dentro de var(...) garantizan apariencia consistente.
 *
 * Cache busting: el plugin enqueue este archivo con filemtime() como version
 * (G.7 de instrucciones_francel.md).
 */

.mkm-selector-wrapper { margin: 0 0 24px 0; }

/* Buscador único (v4.2.5) — reemplaza al viejo <select> de especialidad +
   caja de texto separados: un solo input busca en nombre de médico Y
   especialidad a la vez (ambos ya están en el texto visible de la card).
   Full-width por diseño: se acomoda solo a cualquier ancho, mobile incluido. */
.mkm-selector-controls {
    margin: 0 0 20px 0;
}
.mkm-search-box {
    position: relative;
    width: 100%;
}
.mkm-search-box__icono {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ecm-ink-500, #6b7688);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.mkm-search-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 16px 12px 40px;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 16px; /* 16px evita zoom de iOS al enfocar */
    line-height: 1.5;
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-md, 12px);
    background: #fff;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mkm-search-input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-no-results {
    text-align: center;
    padding: 30px 16px;
    color: var(--ecm-ink-500, #6b7688);
    font-size: 15px;
    background: var(--ecm-ink-50, #f9fafb);
    border-radius: var(--ecm-radius-md, 12px);
    margin-top: 16px;
}
@media (max-width: 480px) {
    .mkm-search-input { padding: 11px 14px 11px 38px; font-size: 15px; }
    .mkm-no-results { padding: 22px 14px; font-size: 14px; }
}

/* Grid responsivo basado en el ANCHO DEL CONTENEDOR.
   El máximo de cada minmax() es un px fijo (no 1fr): así, cuando hay menos
   doctores de los que entran por fila, las cards NO se estiran para llenar el
   espacio sobrante — quedan del mismo ancho/alto que si hubiera 3 o más
   (pedido explícito: 1, 2 o 3 doctores deben verse igual de "chicos").
   Aplica a los 5 Template: moderno y destacada no tienen clase de grid propia,
   heredan esta regla base. */
.mkm-doctores-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px)) !important;
    justify-content: start !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* Layout vertical: max 4 columnas en pantallas grandes. */
.mkm-doctores-grid--vertical {
    /* hereda el default */
}
@media (min-width: 1200px) {
    .mkm-doctores-grid--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Layout horizontal: cards más anchas → min 360 px, cap en 460 px. */
.mkm-doctores-grid--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(360px, 460px)) !important;
    justify-content: start !important;
}
/* Layout horizontal-compact: cards más estrechas → min 280 px (caben más por fila), cap en 420 px.
   En mobile (< 600 px) se fuerza a 1 columna: un doctor por fila, card sigue horizontal
   (foto izquierda + contenido derecha), NO stack a vertical. */
.mkm-doctores-grid--horizontal-compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 420px)) !important;
    justify-content: start !important;
}
@media (max-width: 600px) {
    .mkm-doctores-grid--horizontal-compact {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Reset defensivo contra estilos del theme aplicados a <article>. */
.mkm-doctores-grid > .mkm-doctor-card {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    clear: none !important;
    grid-column: auto !important;
    box-sizing: border-box;
}

/* CARDS — replica .ecm-card / .doctor-card del design system. */
.mkm-doctor-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 22px;
    text-align: center;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-doctor-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}

/* ── FOTO — vertical (default): circular como avatar, alineada con .doc-avatar del design.
   v3.8.0: sube de 110 a 126 px (pedido del admin). ── */
.mkm-doctor-foto {
    width: 126px; height: 126px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--ecm-ink-200, #e4e8ef), var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
    color: var(--ecm-ink-500, #6b7688); /* base color para el SVG default avatar */
}
.mkm-doctor-foto img,
.mkm-doctor-foto .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block;
}

/* Wrapper de contenido (siempre presente, en vertical es passthrough). */
.mkm-doctores-grid .mkm-doctor-content { display: block; }

/* ─────────────────────────────────────────────────────────────
   CARD HORIZONTAL — foto columna izquierda, contenido derecha.
   En < 480 px hace stack a vertical clásica.
   ──────────────────────────────────────────────────────────── */
.mkm-doctor-card--horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
    min-height: 180px;
}
.mkm-doctor-card--horizontal .mkm-doctor-foto {
    flex: 0 0 38% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: stretch !important;
    aspect-ratio: 1 / 1;
    background: var(--ecm-ink-100, #f2f4f8);
}
.mkm-doctor-card--horizontal .mkm-doctor-content {
    flex: 1 1 auto !important;
    padding: 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    text-align: left;
}
.mkm-doctor-card--horizontal .mkm-doctor-nombre {
    margin: 0 0 4px;
    font-size: 18px;
}
.mkm-doctor-card--horizontal .mkm-doctor-esp {
    margin: 0 0 6px;
}
.mkm-doctor-card--horizontal .mkm-doctor-info {
    margin: 0 0 14px;
}
.mkm-doctor-card--horizontal .mkm-doctor-actions {
    margin-top: auto !important;
    justify-content: flex-start !important;
}

/* Stack horizontal → vertical en celulares chicos */
@media (max-width: 480px) {
    .mkm-doctor-card--horizontal {
        flex-direction: column !important;
        text-align: center;
        min-height: 0;
        padding: 22px !important;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-foto {
        flex: 0 0 auto !important;
        aspect-ratio: auto;
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto 14px !important;
        border-radius: 50% !important;
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 1px var(--ecm-ink-200, #e4e8ef), var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04)) !important;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-content {
        padding: 0 !important;
        text-align: center;
    }
    .mkm-doctor-card--horizontal .mkm-doctor-actions {
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   CARD HORIZONTAL-COMPACT — foto fija ~100 px, contenido al lado.
   Mucho más baja que la horizontal normal. Ideal para 1–2 columnas.
   ──────────────────────────────────────────────────────────── */
.mkm-doctor-card--horizontal-compact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 16px 18px !important;
    text-align: left;
    min-height: 0;
    gap: 16px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-foto {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 114px !important;
    margin: 0 !important;
    border-radius: var(--ecm-radius-md, 12px) !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: center !important;
    aspect-ratio: 1 / 1;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-content {
    flex: 1 1 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    text-align: left;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-nombre {
    margin: 0 0 2px;
    font-size: 16px;
    line-height: 1.25;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-esp {
    margin: 0 0 2px;
    font-size: 13px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-info {
    margin: 0 0 8px;
    font-size: 12px;
}
.mkm-doctor-card--horizontal-compact .mkm-doctor-actions {
    margin-top: 6px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
}
.mkm-doctor-card--horizontal-compact .mkm-btn {
    padding: 7px 14px;
    font-size: 12px;
}

/* Mobile (< 600 px) la variante horizontal-compact mantiene su layout horizontal —
   NO stack a vertical — con 1 doctor por fila. La card es full-width del container,
   así que la foto y la tipografía conservan tamaños cercanos al desktop. Pequeño ajuste
   de padding para aprovechar el ancho del celular. */
@media (max-width: 600px) {
    .mkm-doctor-card--horizontal-compact {
        padding: 14px 16px !important;
    }
}

.mkm-doctor-nombre {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.mkm-doctor-esp {
    margin: 0 0 6px;
    color: var(--ecm-ink-800, #1a2236);
    font-size: 14px;
    font-weight: 600;
}
.mkm-doctor-info {
    margin: 0 0 16px;
    color: var(--ecm-ink-500, #6b7688);
    font-size: 13px;
    font-style: normal;
}

.mkm-doctor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

/* BOTONES — replica .ecm-btn (rounded-full, weight 600).
   v3.8.0: la letra usa --mkm-btn-texto (configurable en Ajustes → Template →
   Botones) con blanco como fallback. */
.mkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--ecm-radius-full, 999px);
    background: var(--ecm-brand-600, #1f6feb);
    color: var(--mkm-btn-texto, #fff) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', sans-serif);
    line-height: 1;
    border: 1px solid transparent;
    transition: all 150ms ease;
}
.mkm-btn:hover {
    background: var(--ecm-brand-700, #1857c9);
    color: var(--mkm-btn-texto, #fff) !important;
    transform: translateY(-1px);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06));
}
/* "Ver más" / acciones de perfil — v3.8.0: sólido en tinta oscura (antes outline
   con letra oscura). Así TODOS los botones llevan letra blanca por defecto y
   queda un sistema consistente: primario = agendar/reservar, tinta/secundario = perfil. */
.mkm-btn:not(.mkm-btn-agenda) {
    background: var(--ecm-ink-800, #1a2236);
    border-color: transparent;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn:not(.mkm-btn-agenda):hover {
    background: var(--ecm-ink-900, #0b1220);
    color: var(--mkm-btn-texto, #fff) !important;
    filter: brightness(1.15);
}
/* Agendar = CTA primario verde mint (disponibilidad). */
.mkm-btn-agenda {
    background: var(--ecm-mint-600, #059669) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn-agenda:hover {
    background: var(--ecm-mint-700, #047857) !important;
    color: var(--mkm-btn-texto, #fff) !important;
}

/* "Ver más" fantasma — usa var(--mkm-primary) con el mismo
   fallback que el resto del design system. */
.mkm-btn-ghost {
    background: transparent !important;
    border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
    color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
}
.mkm-btn-ghost:hover {
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
    color: var(--mkm-btn-texto, #fff) !important;
}

/* Botones de Layout 4 · Moderno y Layout 5 · Destacada (v3.6.1) — cada uno
   usa el Color Primario / Secundario PROPIOS de su Template (ver Ajustes →
   Template → "Colores de este Template"). Fallback naranja/azul para que el
   Template ya se vea terminado aunque el admin no configure nada todavía. */
.mkm-btn-reservar {
    background: var(--mkm-primary, #f97316) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
}
.mkm-btn-reservar:hover {
    filter: brightness(0.92);
    color: var(--mkm-btn-texto, #fff) !important;
}
/* Layout 5 · Destacada ya usa el azul del design system para su pill/degradado;
   el botón "Reservar Hora" hereda ese mismo tono por defecto en vez del naranja. */
.mkm-doctor-card--destacada .mkm-btn-reservar,
.mkm-single--destacada .mkm-btn-reservar {
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
}
/* "Ver Perfil" — v3.8.0: de enlace de texto a BOTÓN sólido con el Color
   Secundario propio del Template activo (fallback azul). Mismo tratamiento
   hover (brightness) que "Reservar Hora". */
.mkm-btn-verperfil {
    background: var(--mkm-secondary, #2563eb) !important;
    border-color: transparent !important;
    color: var(--mkm-btn-texto, #fff) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.mkm-btn-verperfil:hover {
    background: var(--mkm-secondary, #2563eb) !important;
    filter: brightness(0.92);
    color: var(--mkm-btn-texto, #fff) !important;
    text-decoration: none;
}

/* Pill de especialidad reutilizado por Layout 5 (card + single). */
.mkm-doctor-esp-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--ecm-radius-full, 999px);
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   CARD LAYOUT 4 · MODERNO — v3.6.1
   Foto circular arriba a la derecha, nombre + especialidad a la izquierda,
   línea de apoyo, y dos botones (Reservar Hora / Ver Perfil →).
   ═══════════════════════════════════════════════════════════════ */
.mkm-doctor-card--moderno {
    text-align: left;
    padding: 20px 22px !important;
}
.mkm-doctor-moderno-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.mkm-doctor-moderno-titulos {
    min-width: 0;
    flex: 1 1 auto;
}
.mkm-doctor-card--moderno .mkm-doctor-nombre {
    font-size: 17px;
    margin: 0 0 4px;
}
.mkm-doctor-card--moderno .mkm-doctor-esp {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--mkm-primary, #f97316);
}
.mkm-doctor-esp-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ecm-ink-500, #6b7688);
}
.mkm-doctor-foto--circular {
    flex: 0 0 74px !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
}
.mkm-doctor-foto--circular .mkm-doctor-img,
.mkm-doctor-foto--circular .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50% !important;
}
.mkm-doctor-actions--moderno {
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   CARD LAYOUT 5 · DESTACADA — v3.6.0 (botones actualizados en v3.6.1)
   Foto full-bleed arriba con degradado, nombre superpuesto, pill de especialidad.
   ═══════════════════════════════════════════════════════════════ */
.mkm-doctor-card--destacada {
    padding: 0 !important;
    overflow: hidden;
    text-align: left;
}
.mkm-doctor-destacada-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-doctor-destacada-media .mkm-doctor-img,
.mkm-doctor-destacada-media .mkm-doctor-avatar-default {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    margin: 0 !important;
}
.mkm-doctor-destacada-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.78), rgba(11, 18, 32, 0));
}
.mkm-doctor-destacada-overlay .mkm-doctor-nombre {
    color: #fff;
    margin: 0 0 8px;
}
.mkm-doctor-card--destacada .mkm-doctor-content {
    padding: 16px 18px 18px;
}
.mkm-doctor-card--destacada .mkm-doctor-info {
    margin: 0 0 14px;
}
.mkm-doctor-card--destacada .mkm-doctor-actions {
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE — página individual del doctor (v3.6.0)
   Solo se usa si el admin activó "Usar este Template también en el single"
   en Ajustes → Template. 5 variantes, alineadas 1:1 con sus cards.
   ═══════════════════════════════════════════════════════════════ */
.mkm-single {
    max-width: 1000px;
    margin: 2.5rem auto;
    padding: 0 1rem;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
}
.mkm-single__nombre {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-single__seccion {
    margin-bottom: 1.25rem;
}
.mkm-single__seccion strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--mkm-secondary, var(--ecm-ink-500, #6b7688));
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mkm-single__esp-destacada {
    margin: 0 0 1.25rem;
    color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    font-weight: 600;
    font-size: 1.05rem;
}
.mkm-single__cta {
    margin-top: 0.5rem;
}

/* Layout 1 · Vertical — dos columnas, foto en tarjeta con sombra + borde inferior primario */
.mkm-single--vertical {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--vertical { grid-template-columns: 1fr; }
}
.mkm-single--vertical .mkm-single__foto-card {
    background: #fff;
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--ecm-shadow-md, 0 6px 24px rgba(11,18,32,0.1));
    border-bottom: 4px solid var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
}
.mkm-single--vertical .mkm-single-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--ecm-radius-md, 8px);
    object-fit: cover;
}

/* Layout 2 · Horizontal — hero banner ancho arriba */
.mkm-single--horizontal .mkm-single__hero {
    aspect-ratio: 21 / 9;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 1.5rem;
}
.mkm-single--horizontal .mkm-single__hero .mkm-single-img,
.mkm-single--horizontal .mkm-single__hero .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--horizontal .mkm-single__encabezado {
    margin-bottom: 1.5rem;
}
.mkm-single--horizontal .mkm-single__cuerpo {
    max-width: 760px;
}

/* Layout 3 · Horizontal compacta — sidebar angosto pegajoso + contenido ancho.
   Columna de 260px (antes 220px) para que la foto se vea un poco más grande. */
.mkm-single--horizontal-compact {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--horizontal-compact { grid-template-columns: 1fr; }
}
.mkm-single--horizontal-compact .mkm-single__sidebar {
    position: sticky;
    top: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.25rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
/* Card del contenido (Información adicional / Biografía / Descripción) —
   mismo tratamiento de borde que el sidebar, para que ambos bloques se
   distingan como cards independientes en vez de flotar sobre el fondo. */
.mkm-single--horizontal-compact .mkm-single__cuerpo {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.75rem 2rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-single--horizontal-compact .mkm-single__sidebar-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--ecm-radius-md, 12px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin: 0 0 0.75rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar-foto .mkm-single-img,
.mkm-single--horizontal-compact .mkm-single__sidebar-foto .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-single__nombre {
    font-size: 1.3rem;
    margin: 0 0 0.4rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-doctor-esp-pill {
    margin-bottom: 1rem;
}
.mkm-single--horizontal-compact .mkm-single__sidebar .mkm-single__cta {
    display: block;
}

/* Layout 4 · Moderno — dos columnas; foto en tarjeta blanca con línea de
   acento (Color Primario propio de este Template) sobre el borde superior. */
.mkm-single--moderno {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 782px) {
    .mkm-single--moderno { grid-template-columns: 1fr; }
}
.mkm-single__foto-card--moderno {
    background: #fff;
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--ecm-shadow-md, 0 6px 24px rgba(11,18,32,0.1));
    border-top: 4px solid var(--mkm-primary, #f97316);
}
.mkm-single--moderno .mkm-single-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--ecm-radius-md, 8px);
    object-fit: cover;
}
.mkm-single--moderno .mkm-single__seccion strong {
    color: var(--mkm-secondary, #2563eb);
}

/* Layout 5 · Destacada — foto full-bleed con degradado y nombre superpuesto */
.mkm-single--destacada .mkm-single__destacada-media {
    position: relative;
    aspect-ratio: 16 / 7;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 1.5rem;
}
.mkm-single--destacada .mkm-single__destacada-media .mkm-single-img,
.mkm-single--destacada .mkm-single__destacada-media .mkm-doctor-avatar-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-single--destacada .mkm-single__destacada-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.8), rgba(11, 18, 32, 0));
}
.mkm-single--destacada .mkm-single__destacada-overlay .mkm-single__nombre {
    color: #fff;
    margin-bottom: 0.6rem;
}
.mkm-single--destacada .mkm-single__cuerpo {
    max-width: 760px;
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE /doctores/ — v3.6.1
   Solo se usa si el admin activó "Usar este Template también en el
   listado de doctores" en Ajustes → Template. Header + buscador (filtra
   en el navegador, sin recargar) + la grilla de cards del Template elegido.
   ═══════════════════════════════════════════════════════════════ */
.mkm-archivo-doctores {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}
.mkm-archivo-doctores__header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.mkm-archivo-doctores__titulo {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-archivo-doctores__buscador {
    max-width: 720px;
    margin: 0 auto 2rem;
}
.mkm-archivo-doctores__input {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-full, 999px);
    background: #fff;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-archivo-doctores__input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-archivo-doctores__sin-resultados {
    text-align: center;
    color: var(--ecm-ink-500, #6b7688);
    margin-top: 1.5rem;
}

/* Single de Especialidad/Servicio (ej. /especialidades/cardiologia/) — v3.6.5.
   Reutiliza .mkm-archivo-doctores (header + wrapper) para verse igual que
   /doctores/; esto es solo la descripción (post_content) bajo el título. */
.mkm-especialidad-single__desc {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: var(--ecm-ink-500, #6b7688);
    text-align: center;
    line-height: 1.6;
}

/* Archive de Especialidad/Servicio (/especialidades/) — card simple: foto +
   nombre, sin prefijo/bio/botón (esto no son doctores). Hereda
   .mkm-doctores-grid para el layout de grilla (auto-fit/columnas fijas) y
   .mkm-doctor-card para fondo/borde/hover — solo agrega su propio contenido. */
.mkm-especialidad-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mkm-especialidad-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--ecm-radius-md, 12px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 14px;
}
.mkm-especialidad-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mkm-especialidad-card__nombre {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ecm-ink-900, #0b1220);
}
/* 3 por fila en desktop, fijo — independiente de "Columnas por fila" de
   Ajustes → Template (esa opción es para la grilla de DOCTORES; esta grilla
   de especialidades vive en su propia columna angosta al lado del índice, así
   que necesita su propio número). El selector de 2 clases pesa más que el
   inline de 1 clase que imprime esa opción, así que gana sin tocarla. */
@media (min-width: 981px) {
    .mkm-doctores-grid.mkm-especialidades-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Layout de 2 columnas del archive /especialidades/: índice angosto a la
   izquierda (solo texto) + buscador/grilla a la derecha — replica el panel
   lateral de la Página "Especialidades" original armada con Elementor. */
.mkm-especialidades-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.mkm-especialidades-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: var(--ecm-ink-50, #f9fafb);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 20px;
    box-sizing: border-box;
    max-height: 640px;
    overflow-y: auto;
}
.mkm-especialidades-main {
    flex: 1;
    min-width: 0;
}
.mkm-especialidades-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mkm-especialidades-lista li {
    border-bottom: 1px solid var(--ecm-ink-200, #e4e8ef);
}
.mkm-especialidades-lista li:last-child {
    border-bottom: none;
}
.mkm-especialidades-lista a {
    display: block;
    padding: 9px 2px;
    font-size: 14px;
    color: var(--ecm-ink-800, #1a2236);
    text-decoration: none;
    line-height: 1.4;
}
.mkm-especialidades-lista a:hover {
    color: var(--ecm-brand-600, #1f6feb);
}
@media (max-width: 782px) {
    .mkm-especialidades-layout {
        flex-direction: column;
    }
    .mkm-especialidades-sidebar {
        width: 100%;
        flex-basis: auto;
        max-height: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINACIÓN DE GRILLAS — v3.7.0
   Links « 1 2 3 » que imprime Mkm_Cards_Trait::render_paginacion_grilla().
   Al final del archivo para ganar cualquier empate de !important contra
   estilos del theme sobre .page-numbers.
   ═══════════════════════════════════════════════════════════════ */
.mkm-paginacion {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}
.mkm-paginacion .page-numbers,
nav.mkm-paginacion span.page-numbers,
nav.mkm-paginacion a.page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: var(--ecm-radius-full, 999px) !important;
    border: 1px solid var(--ecm-ink-200, #e4e8ef) !important;
    background: #fff !important;
    color: var(--ecm-ink-800, #1a2236) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    float: none !important;
    list-style: none !important;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
nav.mkm-paginacion a.page-numbers:hover {
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: var(--ecm-brand-600, #1f6feb) !important;
    background: var(--ecm-brand-50, #eff6ff) !important;
    transform: translateY(-1px);
}
nav.mkm-paginacion span.page-numbers.current {
    background: var(--ecm-brand-600, #1f6feb) !important;
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    color: #fff !important;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   HOVER PRONUNCIADO OPCIONAL — v3.7.0
   La clase .mkm-grid-hover la agrega PHP al contenedor del grid SOLO si el
   admin activó "Efecto hover" en Ajustes → Template. Sin ella, las cards
   conservan exactamente el hover sutil de siempre. Scoped a dispositivos con
   puntero real para evitar el hover "pegajoso" del touch.
   ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) {
    .mkm-doctores-grid.mkm-grid-hover .mkm-doctor-card:hover {
        transform: translateY(-6px) !important;
        border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb)) !important;
        box-shadow: 0 16px 32px rgba(11, 18, 32, 0.12), 0 6px 14px rgba(11, 18, 32, 0.08) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FINO DE GRILLAS — v3.7.0
   Compactación extra en celulares (<600px): gap, tipografía y paddings de
   los layouts que no traen regla propia en ese breakpoint. Las reglas van AL
   FINAL del archivo para ganar por orden de fuente los empates de !important.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mkm-doctores-grid {
        gap: 10px !important;
    }
    .mkm-doctor-nombre {
        font-size: 16px;
    }
    .mkm-doctor-esp {
        font-size: 13px;
    }
    .mkm-doctor-card--moderno {
        padding: 16px 14px !important;
    }
    .mkm-doctor-card--destacada .mkm-doctor-content {
        padding: 13px 14px 15px;
    }
    .mkm-doctor-foto {
        width: 108px;
        height: 108px;
    }
    nav.mkm-paginacion .page-numbers {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE /centros/ y /agendamiento/ — v4.0.0
   Wrapper compartido para ambos archives con grilla + buscador.
   ═══════════════════════════════════════════════════════════════ */
.mkm-archivo-centros {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}
.mkm-archivo-centros__header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.mkm-archivo-centros__titulo {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-archivo-centros__buscador {
    max-width: 480px;
    margin: 0 auto 2rem;
}
.mkm-archivo-centros__input {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-full, 999px);
    background: #fff;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-archivo-centros__input:focus {
    outline: none;
    border-color: var(--ecm-brand-600, #1f6feb);
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff);
}
.mkm-archivo-centros__vacio {
    text-align: center;
    color: var(--ecm-ink-500, #6b7688);
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   GRID CENTROS MÉDICOS — /centros/
   ═══════════════════════════════════════════════════════════════ */
.mkm-centros-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    width: 100% !important;
}
.mkm-centro-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-centro-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}
.mkm-centro-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mkm-centro-card__foto {
    aspect-ratio: 16 / 9;
    background: var(--ecm-ink-100, #f2f4f8);
    overflow: hidden;
}
.mkm-centro-card__foto img,
.mkm-centro-card__foto .mkm-centro-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.mkm-centro-card__foto-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ecm-ink-300, #c1c7d4);
}
.mkm-centro-card__foto-placeholder svg {
    width: 64px;
    height: 64px;
}
.mkm-centro-card__contenido {
    padding: 16px 18px 18px;
}
.mkm-centro-card__nombre {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    line-height: 1.3;
}
.mkm-centro-card__direccion,
.mkm-centro-card__horario,
.mkm-centro-card__telefono {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ecm-ink-500, #6b7688);
    line-height: 1.5;
}
.mkm-centro-card__telefono a {
    color: var(--ecm-brand-600, #1f6feb);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   GRID AGENDAMIENTO — /agendamiento/
   ═══════════════════════════════════════════════════════════════ */
.mkm-agendamiento-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    width: 100% !important;
}
.mkm-agendamiento-card {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 22px;
    text-align: center;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04), 0 1px 1px rgba(11,18,32,0.03));
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mkm-agendamiento-card:hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06), 0 2px 4px rgba(11,18,32,0.04));
    transform: translateY(-1px);
}
.mkm-agendamiento-card--destacado {
    border-color: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    border-width: 2px;
}
.mkm-agendamiento-card__icono {
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1;
}
.mkm-agendamiento-card__titulo {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ecm-ink-900, #0b1220);
    line-height: 1.3;
}
.mkm-agendamiento-card__titulo a {
    color: inherit;
    text-decoration: none;
}
.mkm-agendamiento-card__titulo a:hover {
    color: var(--ecm-brand-600, #1f6feb);
}
.mkm-agendamiento-card__desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ecm-ink-500, #6b7688);
    line-height: 1.6;
}
.mkm-agendamiento-card__cta {
    margin-top: auto;
}

/* Single Agendamiento */
.mkm-agendamiento-single__icono {
    font-size: 48px;
    margin-bottom: 10px;
    line-height: 1;
}
.mkm-agendamiento-single__cta {
    margin-top: 12px;
}
.mkm-agendamiento-single__desc {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: var(--ecm-ink-500, #6b7688);
    text-align: center;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE CENTRO MÉDICO — /centros/{slug}/
   Hero con foto + overlay, info + mapa, grilla de doctores.
   ═══════════════════════════════════════════════════════════════ */
.mkm-centro-single {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--ecm-ink-800, #1a2236);
}
.mkm-centro-single__hero {
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: var(--ecm-radius-lg, 16px);
    overflow: hidden;
    background: var(--ecm-ink-100, #f2f4f8);
    margin-bottom: 2rem;
}
.mkm-centro-single__hero-img,
.mkm-centro-single__hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.mkm-centro-single__hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 2.5rem;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.8), rgba(11, 18, 32, 0));
}
.mkm-centro-single__nombre {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}
.mkm-centro-single__direccion {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}
.mkm-centro-single__especialidades {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.mkm-centro-esp-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--mkm-primary, var(--ecm-brand-600, #1f6feb));
    border-radius: 999px;
    white-space: nowrap;
}
.mkm-centro-single__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
}
@media (max-width: 782px) {
    .mkm-centro-single__body { grid-template-columns: 1fr; }
}
.mkm-centro-single__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mkm-centro-single__bloque {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__bloque h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ecm-ink-500, #6b7688);
}
.mkm-centro-single__bloque p {
    margin: 0;
    line-height: 1.6;
}
.mkm-centro-single__bloque a {
    color: var(--ecm-brand-600, #1f6feb);
    text-decoration: none;
}
.mkm-centro-single__bloque a:hover {
    text-decoration: underline;
}
.mkm-centro-single__contenido {
    background: #fff;
    border: 1px solid var(--ecm-ink-200, #e4e8ef);
    border-radius: var(--ecm-radius-lg, 16px);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__mapa iframe {
    border-radius: var(--ecm-radius-lg, 16px);
    box-shadow: var(--ecm-shadow-sm, 0 1px 2px rgba(11,18,32,0.04));
}
.mkm-centro-single__doctores {
    margin-top: 1rem;
}
.mkm-centro-single__doctores h2 {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    color: var(--ecm-ink-900, #0b1220);
    font-family: var(--ecm-font-display, 'Fraunces', Georgia, serif);
}