/* ===========================
   CERTIFICADO
=========================== */
.cert-page{
    min-height:100vh;
    padding:130px 0 100px;
    background:var(--bg-primary);
}

.cert-status{
    min-height:50vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--text-muted);
    font-size:16px;
    text-align:center;
}

.cert-status i{
    font-size:28px;
    color:var(--accent-secondary);
}

.cert-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    text-decoration:none;
    font-size:14px;
    margin-bottom:24px;
}

.cert-back:hover{ color:var(--accent-secondary); }

/* ---------- Diploma ---------- */
.cert-diploma{
    max-width:900px;
    margin:0 auto;
    background:#ffffff;
    border-radius:var(--radius-lg);
    padding:10px;
    box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.cert-diploma-inner{
    position:relative;
    border:2px solid #0c1326;
    outline:1px solid #1976ff;
    outline-offset:-10px;
    border-radius:12px;
    padding:50px 40px;
    text-align:center;
}

/* Marca de agua del isotipo, igual que en el PDF: grande, casi invisible,
   detrás de todo el contenido. En su propio pseudo-elemento (no como
   background directo de .cert-diploma-inner) para poder bajarle la opacidad
   sin afectar el resto de la tarjeta. */
.cert-diploma-inner::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("../img/favicon-180.png");
    background-repeat:no-repeat;
    background-position:center 46%;
    background-size:280px;
    opacity:.05;
    border-radius:inherit;
    z-index:0;
}

.cert-diploma-inner > *{
    position:relative;
    z-index:1;
}

.cert-logo{
    width:52px;
    height:52px;
    margin:0 auto 10px;
    display:block;
}

.cert-brand{
    display:block;
    font-size:26px;
    font-weight:800;
    letter-spacing:4px;
    color:#0c1326;
}

.cert-brand-sub{
    display:block;
    font-size:11px;
    letter-spacing:2px;
    color:#5b6785;
    margin-top:4px;
}

.cert-divider{
    width:120px;
    height:2px;
    background:#2da9ff;
    margin:18px auto 28px;
}

.cert-diploma-inner h1{
    font-size:26px;
    font-weight:800;
    color:#1d2b4d;
    letter-spacing:.5px;
    margin-bottom:26px;
}

.cert-lead{
    font-style:italic;
    color:#5b6785;
    font-size:14px;
    margin-bottom:6px;
}

.cert-nombre{
    font-family:"Georgia", "Times New Roman", serif;
    font-weight:700;
    font-size:32px;
    color:#0c1326;
    margin-bottom:10px;
}

.cert-documento{
    font-weight:700;
    font-size:13px;
    letter-spacing:.5px;
    color:#5b6785;
    margin-bottom:18px;
}

.cert-curso{
    font-weight:700;
    font-size:19px;
    color:#0c1326;
    margin-bottom:20px;
}

.cert-meta{
    font-size:13px;
    color:#5b6785;
    margin-bottom:40px;
}

/* Grid de 3 columnas (spacer / firma / verificación) en vez de
   space-between: así la firma queda realmente centrada en el ancho del
   diploma (como en el PDF) y el QR se queda como una insignia aparte en
   la esquina, sin el hueco enorme que dejaba el flex anterior. */
.cert-footer{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:flex-end;
    gap:20px;
    text-align:left;
}

.cert-firma{
    grid-column:2;
    justify-self:center;
    text-align:center;
    min-width:200px;
}

.cert-firma-img{
    display:block;
    width:140px;
    height:auto;
    margin:0 auto -6px;
}

.cert-firma-linea{
    width:100%;
    max-width:220px;
    margin:0 auto 8px;
    border-top:1px solid #0c1326;
}

.cert-firma-nombre{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#0c1326;
}

.cert-firma-cargo{
    display:block;
    margin-top:2px;
    font-size:10px;
    color:#5b6785;
    letter-spacing:0.3px;
}

.cert-verificacion{
    grid-column:3;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:12px;
}

.cert-qr{
    width:56px;
    height:56px;
    border:1px solid #1976ff;
    border-radius:6px;
    padding:3px;
    background:#ffffff;
}

.cert-codigo{
    display:flex;
    flex-direction:column;
    gap:2px;
    text-align:right;
}

.cert-codigo span{
    font-size:10px;
    color:#5b6785;
}

.cert-codigo strong{
    font-size:13px;
    color:#1976ff;
    letter-spacing:.5px;
}

/* ---------- Acciones ---------- */
.cert-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:36px;
}

.cert-nota{
    text-align:center;
    color:var(--text-muted);
    font-size:13px;
    margin-top:20px;
}

.cert-nota a{
    color:var(--accent-secondary);
}

@media (max-width: 700px){
    .cert-diploma-inner{ padding:30px 18px; }
    .cert-nombre{ font-size:24px; }
    .cert-footer{ display:flex; flex-direction:column; align-items:center; text-align:center; }
    .cert-firma{ justify-self:auto; }
    .cert-verificacion{ justify-self:auto; }
    .cert-codigo{ align-items:center; text-align:center; }
}

/* ---------- Verificación pública ---------- */
.verify-container{
    max-width:640px;
}

.verify-header{
    text-align:center;
    margin-bottom:36px;
}

.verify-header h1{
    font-size:clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:10px;
}

.verify-header p{
    color:var(--text-muted);
    font-size:15px;
}

.verify-form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.verify-form input{
    flex:1;
    min-width:200px;
    padding:14px 18px;
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-size:15px;
    letter-spacing:.5px;
}

.verify-form input:focus{
    outline:none;
    border-color:var(--accent-secondary);
    box-shadow:0 0 15px var(--glow-soft);
}

.verify-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    padding:28px;
}

.verify-card.ok{ border-color:rgba(45,206,137,.4); }
.verify-card.fail{ border-color:rgba(255,107,107,.4); }

.verify-card .verify-icon{
    font-size:28px;
    flex-shrink:0;
}

.verify-card.ok .verify-icon{ color:#5ee2ab; }
.verify-card.fail .verify-icon{ color:#ff9f9f; }

.verify-card h3{
    color:var(--text-primary);
    font-size:17px;
    font-weight:700;
    margin-bottom:8px;
}

.verify-card p{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.6;
}

.verify-card strong{
    color:var(--text-primary);
}

.verify-detalles{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border-subtle);
}

.verify-detalle{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.verify-detalle-label{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.verify-detalle-valor{
    color:var(--text-primary);
    font-size:15px;
    font-weight:700;
}

.verify-temas{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border-subtle);
}

.verify-temas ul{
    list-style:none;
    margin:12px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px 20px;
}

.verify-temas li{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.5;
    padding-left:18px;
    position:relative;
}

.verify-temas li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--accent-secondary);
    position:absolute;
    left:0;
    font-size:11px;
    top:3px;
}

@media (max-width: 560px){
    .verify-detalles{ grid-template-columns:1fr; }
    .verify-temas ul{ grid-template-columns:1fr; }
}