/* Grid listing */
.mcv-grid { max-width:1200px;margin:0 auto;padding:20px; }
.mcv-grid .grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media(max-width:992px){ .mcv-grid .grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .mcv-grid .grid{grid-template-columns:repeat(1,1fr);} }
.mcv-card { position:relative; overflow:hidden; border-radius:8px; height:220px; display:flex; align-items:flex-end; text-decoration:none; color:inherit; transition:transform .25s; }
.mcv-card img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .25s; filter: brightness(0.9); }
.mcv-card:hover img{ transform:scale(1.03); filter: brightness(1); }
.mcv-gradient{ position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); display:flex; align-items:flex-end; padding:10px; }
.mcv-name{ color:#fff; font-weight:700; }
.mcv-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f0f0;color:#333;}
/* Single */
.mcv-single { max-width:1100px;margin:0 auto;padding:20px; font-family:Arial, sans-serif; color:#222; }
.mcv-single h1{ text-align:center; margin-bottom:20px;}
.mcv-layout{ display:grid; grid-template-columns: 360px 1fr; gap:24px; align-items:start; }
@media(max-width:900px){ .mcv-layout{ grid-template-columns: 1fr; } .mcv-layout img{ width:100%; height:auto; } }
.mcv-photo{ border-radius:8px; overflow:hidden; position:relative; }
.mcv-photo img{ width:100%; display:block; object-fit:cover; border-radius:8px; }
.mcv-data table{ width:100%; border-collapse:collapse; margin-bottom:16px; }
.mcv-data th{ text-align:left; padding:6px 8px; width:160px; color:#333; font-weight:600; }
.mcv-card-cert{ background:#fff; padding:12px; border-radius:8px; text-align:center; }
.mcv-cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:12px; }
.mcv-badge{ display:inline-block; padding:4px 8px; border-radius:4px; color:#fff; font-weight:600; font-size:12px; }
.mcv-badge.aprobado{ background:#28a745; }
.mcv-badge.pendiente{ background:#6c757d; }


/* ----------------------------------------------------------
   FICHA DEL MECÁNICO - ESTILOS RESPONSIVOS
---------------------------------------------------------- */

/* Título principal */
.mcv-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Layout principal: Foto + Datos */
.mcv-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .mcv-layout {
        grid-template-columns: 1fr;
    }
}

/* Foto */
.mcv-photo img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.mcv-no-photo {
    width: 100%;
    height: 280px;
    background:#f2f2f2;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

/* Tabla de datos */
.mcv-table th {
    text-align:left;
    width:150px;
    padding:6px 0;
    color:#444;
    font-weight:600;
}

.mcv-table td {
    padding:6px 0;
    color:#222;
}

/* Biografía */
.mcv-bio {
    margin-top:18px;
    margin-bottom:20px;
}

/* Redes sociales */
.mcv-social {
    display:flex;
    gap:20px;
}

.mcv-social-icon {
    width:32px;
    height:32px;
    background-size:cover;
    display:inline-block;
}

/* Íconos SVG como background */
.mcv-facebook { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/facebook.svg'); }
.mcv-instagram { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/instagram.svg'); }
.mcv-linkedin { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/linkedin.svg'); }
.mcv-tiktok { background-image:url('https://b2bike.cl/wp-content/plugins/bmv-mecanicos_old/assets/icon/tiktok.svg'); }

/* ----------------------------------------------------------
   CERTIFICACIONES
---------------------------------------------------------- */

.mcv-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .mcv-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mcv-cert-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.mcv-cert-card {
    position:relative;
    padding:16px;
    border-radius:12px;
    background:white;
    text-align:center;
}

.mcv-cert-card img {
    width:auto;
    max-width:130px;
    max-height:110px;
    object-fit:contain;
    margin:auto;
}

/* Badge */
.mcv-cert-badge {
    position:absolute;
    top:10px;
    left:10px;
    padding:4px 8px;
    border-radius:6px;
    color:white;
    font-size:12px;
    font-weight:600;
}

/* Badges aprobados/pending */
.mcv-cert-ok .mcv-cert-badge {
    background:#4CAF50;
}

.mcv-cert-bad .mcv-cert-badge {
    background:#F44336;
}

/* Nombre certificación */
.mcv-cert-name {
    margin-top:10px;
    font-weight:600;
    color:#222;
}