:root {
    --cert-radius-md: 8px;
    --cert-radius-lg: 12px;
    --cert-radius-pill: 20px;
    --cert-border: 0.5px solid rgba(0,0,0,.12);
    --cert-border-hover: 0.5px solid rgba(0,0,0,.25);
    --cert-bg-card: #ffffff;
    --cert-bg-surface: #f5f5f3;
    --cert-text-primary: #1a1a1a;
    --cert-text-secondary: #6b6b68;
    --cert-text-muted: #9a9a97;
}


/*logos*/
.img-logo {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center;     /* Centra los elementos verticalmente */
    padding: 30px 0;         /* Espaciado superior e inferior */
}

.img-logo img {
    height: 80px;            /* Controla el alto (ajústalo según prefieras) */
    width: auto;             /* Mantiene la proporción de la imagen */
    object-fit: contain;
}

.logo-primario {
    padding-right: 40px;             /* Espacio entre el primer logo y la línea */
    border-right: 2px solid #cbd5e1; /* La línea divisoria (gris moderno) */
}

.logo-secundario {
    padding-left: 40px;              /* Espacio entre la línea y el segundo logo */
}

/*Banner*/
.fondo-banner {
    width: 100%;
    /* Opcional: Un color de fondo azul similar al de tu diseño por si 
       alguien ve la web en una pantalla extremadamente grande */
    background-color: #0062a4; 
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.fondo-banner img {
    width: 100%;
    max-width: 2000px;       /* Permite que se extienda en formato ultra ancho */
    /*height: 300px;           /* Fija la altura para mantener el aspecto de franja */
    object-fit: cover;       /* Es la magia: llena el espacio sin deformar la imagen */
    object-position: right;  /* Mantiene el texto y los gráficos importantes (que están a la derecha) a la vista */
    display: block;
}
/*Card de informacion*/

.participant-profile-card {
    /* 1. Cambia inline-flex de vuelta a flex para mantener el control del bloque */
    display: flex; 
    align-items: center;
    gap: 16px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    
    /* 2. El truco mágico: hace que la tarjeta mida exactamente lo que mide su contenido */
    width: fit-content; 
    
    /* 3. Al ser un bloque con ancho definido por el contenido, esto la centra por sí sola */
    margin: 0 auto 1.5rem auto; 
}


/* Círculo con Degradado */
.profile-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #4f46e5 100%); /* Degradado moderno índigo/azul */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    flex-shrink: 0; /* Evita que el círculo se aplaste si el nombre es largo */
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}
/* Bloque de Información */
.profile-info-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left; /* Alineación limpia a la izquierda al lado del avatar */
}

/* Nombre del Participante */
.profile-name-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #4c668a; /* Gris muy oscuro para mejor legibilidad */
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Identificación / Cédula */
.profile-id-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b; /* Gris secundario sutil */
}

/* Estado de Error */
.profile-error-state {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
    padding: 4px 0;
}
.profile-error-state i {
    font-size: 1.2rem;
    color: #ef4444;
}


/* ── Grid de cards ── */
.cert-section { padding: 1.5rem 0; }
.cert-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
.cert-header h2 { font-size:15px; font-weight:500; margin:0; color:var(--cert-text-primary); }
.cert-header p  { font-size:12px; color:var(--cert-text-secondary); margin:0; }

/* ── Métricas resumidas ── */
.cert-metrics { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:1.25rem; }
.cert-metric {
    display: flex;         /* Activa el layout flexible */
    align-items: center;   /* Alinea verticalmente al centro */
    justify-content: space-between; /* Separa el contenido del icono */
    padding: 20px;
    background: #fff;
    border-radius: 12px;
	flex:1; min-width:90px;    
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.cert-metric i {
    font-size: 2rem;       /* Tamaño del icono */
    color: #4a5568;        /* Un gris oscuro elegante */
    opacity: 0.6;          /* Un toque de transparencia */
}

.metric-content {
    display: flex;
    flex-direction: column; /* Apila el valor y la etiqueta */
}
.cert-metric-val { font-size:20px; font-weight:500; color:var(--cert-text-primary); }
.cert-metric-lbl { font-size:11px; color:var(--cert-text-secondary); margin-top:2px; }

/* ── Filtros ── */
.cert-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.25rem; }
.cert-filter-btn {
    font-size:12px; padding:5px 14px;
    border-radius:var(--cert-radius-pill);
    border:0.5px solid rgba(0,0,0,.2);
    background:transparent; color:var(--cert-text-secondary);
    cursor:pointer; transition:background .15s, color .15s;
}
.cert-filter-btn:hover,
.cert-filter-btn.active {
    background:var(--cert-bg-surface);
    color:var(--cert-text-primary);
    border-color:rgba(0,0,0,.35);
    font-weight:500;
}

/* ── Grid ── */
.cert-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:14px;
}

/* ── Card individual ── */
.cert-card {
    background:var(--cert-bg-card);
    border:var(--cert-border);
    border-radius:var(--cert-radius-lg);
    padding:1rem 1.25rem;
    display:flex; flex-direction:column; gap:8px;
    transition:border-color .15s;
}
.cert-card:hover { border:var(--cert-border-hover); }

/* ── Badges tipo / modalidad ── */
.cert-badge {
    display:inline-flex; align-items:center;
    font-size:11px; font-weight:500;
    padding:3px 9px; border-radius:var(--cert-radius-pill);
}
.badge-curso       { background:#E6F1FB; color:#0C447C; }
.badge-taller      { background:#EAF3DE; color:#27500A; }
.badge-charla      { background:#FAEEDA; color:#633806; }
.badge-conferencia { background:#EEEDFE; color:#3C3489; }
.badge-virtual     { background:#E1F5EE; color:#085041; }
.badge-presencial  { background:#F1EFE8; color:#444441; }

/* ── Título de actividad ── */
.cert-title {
    font-size:14px; font-weight:500;
    color:var(--cert-text-primary);
    line-height:1.45; flex:1; margin:0;
}

/* ── Horas ── */
.cert-hours     { font-size:22px; font-weight:500; color:var(--cert-text-primary); }
.cert-hours-lbl { font-size:11px; color:var(--cert-text-secondary); }

/* ── Fecha ── */
.cert-meta {
    font-size:12px; color:var(--cert-text-secondary);
    display:flex; align-items:center; gap:4px;
}

/* ── Separador inferior ── */
.cert-footer {
    border-top:0.5px solid rgba(0,0,0,.08);
    padding-top:8px; margin-top:4px;
    display:flex; align-items:center;
    justify-content:space-between;
    flex-wrap:wrap; gap:8px;
}

/* ── Status pills ── */
.cert-status {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; font-weight:500;
    padding:4px 10px; border-radius:var(--cert-radius-pill);
}
.cert-status i { font-size:13px; }
.status-ok      { background:#d1fadf; color:#166534; border:0.5px solid #bbf7d0; }
.status-pending { background:#fef9c3; color:#854d0e; border:0.5px solid #fef08a; }
.status-danger  { background:#fee2e2; color:#991b1b; border:0.5px solid #fecaca; }

/* ── Botones de acción ── */
.cert-action-btn {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; padding:6px 12px;
    border-radius:var(--cert-radius-md);
    text-decoration:none; cursor:pointer;
    border:0.5px solid rgba(0,0,0,.2);
    color:var(--cert-text-secondary);
    background:transparent;
    transition:background .15s, color .15s;
}
.cert-action-btn:hover { background:var(--cert-bg-surface); color:var(--cert-text-primary); text-decoration:none; }
.btn-descarga { border-color:rgba(23,92,163,.35); color:#185FA5; }
.btn-descarga:hover { background:#E6F1FB; color:#0C447C; }
.btn-encuesta { border-color:rgba(133,79,11,.3); color:#854F0B; }
.btn-encuesta:hover { background:#FAEEDA; color:#633806; }