/*
 * 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; }

/* Reset cross-platform del <select>: iOS/Safari/Android aplican estilo nativo */
.mkm-selector-wrapper select.mkm-selector,
select.mkm-selector {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    display: block !important;
    width: 100% !important;
    margin: 0 0 1em 0 !important;
    padding: 12px 44px 12px 16px !important;
    font-family: var(--ecm-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    font-size: 16px !important; /* 16px evita zoom de iOS al enfocar */
    line-height: 1.5 !important;
    color: var(--ecm-ink-800, #1a2236) !important;
    border: 1px solid var(--ecm-ink-200, #e4e8ef) !important;
    border-radius: var(--ecm-radius-md, 12px) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%231f6feb' d='M6 8 0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.mkm-selector:focus {
    outline: none !important;
    border-color: var(--ecm-brand-600, #1f6feb) !important;
    box-shadow: 0 0 0 3px var(--ecm-brand-50, #eff6ff) !important;
}
.mkm-selector::-ms-expand { display: none !important; }

/* Grid responsivo basado en el ANCHO DEL CONTENEDOR. */
.mkm-doctores-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    width: 100% !important;
    box-sizing: border-box;
}
@media (min-width: 1200px) {
    .mkm-doctores-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !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 — circular como avatar, alineada con .doc-avatar del design. */
.mkm-doctor-foto {
    width: 110px; height: 110px;
    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));
}
.mkm-doctor-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block;
}

.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). */
.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: #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: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--ecm-shadow-md, 0 4px 12px rgba(11,18,32,0.06));
}
/* "Ver más" como secondary (outline) para que el primario sea Agendar. */
.mkm-btn:not(.mkm-btn-agenda) {
    background: #fff;
    border-color: var(--ecm-ink-200, #e4e8ef);
    color: var(--ecm-ink-800, #1a2236) !important;
}
.mkm-btn:not(.mkm-btn-agenda):hover {
    border-color: var(--ecm-ink-400, #9aa4b5);
    color: var(--ecm-ink-900, #0b1220) !important;
    background: #fff;
}
/* Agendar = CTA primario verde mint (disponibilidad). */
.mkm-btn-agenda {
    background: var(--ecm-mint-600, #059669) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.mkm-btn-agenda:hover {
    background: var(--ecm-mint-700, #047857) !important;
    color: #fff !important;
}