/* Merito360 Certificados — Frontend CSS v2.2 */
/* Tonos suaves que combinan con azul #003366 / celeste #4FC3F7 de Merito360 */

/* ===== BOTONES ===== */
.m360-cert-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tutor-color-primary, #0a7abf);
    color: #fff !important; padding: 10px 20px; border-radius: 6px;
    font-size: 13px; font-weight: 600; text-decoration: none !important;
    transition: all 0.2s; border: none; cursor: pointer;
}
.m360-cert-btn:hover {
    background: #085a8c; color: #fff !important;
    box-shadow: 0 2px 8px rgba(10,122,191,0.25);
}
.m360-btn-warning { background: #d97706 !important; }
.m360-btn-warning:hover { background: #b45309 !important; }
.m360-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 5px; }

/* ===== CARDS ===== */
.m360-card {
    border: 1px solid var(--tutor-border-color, #e5e7eb);
    border-radius: 6px; background: #fff; overflow: hidden; margin-bottom: 20px;
}
.m360-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 20px; font-size: 14px; font-weight: 600;
    color: var(--tutor-body-color, #212327);
    border-bottom: 1px solid var(--tutor-border-color, #e5e7eb);
    background: #fafbfc;
}
.m360-card-body { padding: 20px; }

/* ===== ALERTAS — tonos suaves ===== */
.m360-alert {
    padding: 16px 20px; border-radius: 6px; margin-bottom: 20px;
    font-size: 14px; line-height: 1.7;
}
.m360-alert strong { display: block; margin-bottom: 4px; font-size: 14px; }
.m360-alert p { margin: 3px 0; }

/* Éxito: verde suave */
.m360-alert-success {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
/* Proceso: azul claro suave (en vez de amarillo fuerte) */
.m360-alert-warning {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
}
/* Error: rojo suave */
.m360-alert-danger {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}

/* ===== FORMULARIO ===== */
.m360-form-group { margin-bottom: 16px; }
.m360-form-group label {
    display: block; font-size: 14px; font-weight: 500;
    color: var(--tutor-body-color, #374151); margin-bottom: 8px;
}
.m360-form-group input[type=text],
.m360-form-group input[type=file] {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--tutor-border-color, #d1d5db);
    border-radius: 6px; font-size: 14px;
    color: var(--tutor-body-color, #374151);
    background: #fff; transition: all 0.2s;
}
.m360-form-group input:focus {
    border-color: var(--tutor-color-primary, #0a7abf);
    outline: none; box-shadow: 0 0 0 3px rgba(10,122,191,0.1);
}
.m360-form-group input[type=file] {
    padding: 8px 12px; font-size: 13px; color: #6b7280;
}

/* ===== TABLA ===== */
.m360-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.m360-table th {
    background: #f9fafb; padding: 12px 16px; text-align: left;
    font-size: 11px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--tutor-border-color, #e5e7eb);
}
.m360-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; color: #374151;
}
.m360-table tr:last-child td { border-bottom: none; }
.m360-table tr:hover { background: #f9fafb; }

/* ===== BADGES — tonos suaves ===== */
.m360-badge {
    padding: 5px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
    letter-spacing: 0.3px;
}
/* Pendiente: azul suave */
.m360-badge-warning {
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
/* Bloqueado: gris suave */
.m360-badge-muted {
    background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb;
}
/* Aprobado: verde suave */
.m360-badge-success {
    background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
}

/* ===== ESTADO VACÍO ===== */
.m360-empty-state {
    text-align: center; padding: 48px 20px; color: #9ca3af;
}
.m360-empty-state svg { margin-bottom: 12px; opacity: 0.4; }
.m360-empty-state p { font-size: 14px; line-height: 1.6; }

/* ===== EN PÁGINA DE CURSO ===== */
.m360-cert-msg { padding: 10px 16px; border-radius: 6px; font-size: 13px; }
.m360-msg-pending { background: #f3f4f6; color: #6b7280; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .m360-table th, .m360-table td { padding: 10px 12px; font-size: 13px; }
    .m360-cert-btn { padding: 8px 16px; font-size: 12px; }
    .m360-card-body { padding: 16px; }
}