/* ============================================================
   CERTIFICADOS PÚBLICOS - ESTILOS EXTERNOS
   Archivo separado desde certificados.php.
   No contiene lógica PHP; las variables dinámicas se definen
   en un <style> mínimo dentro de la vista pública.
   ============================================================ */
/* ══ VARIABLES ══ */
body.certificados-publicos-page {
    --bg-app:        #0d1117;
    --bg-panel:      #161b22;
    --bg-toolbar:    #1a2133;
    --bg-card:       #1e2637;
    --bg-card-hover: #232d42;
    --border:        rgba(255,255,255,.07);
    --border-active: #3b82f6;
    --accent:        #3b82f6;
    --accent-dark:   #1d4ed8;
    --accent2:       #818cf8;
    --text-1:        #eef2ff;
    --text-2:        #8b9ab5;
    --text-3:        #4a5568;
    --radius-lg:     14px;
    --radius-md:     9px;
    --radius-sm:     6px;
    --topbar-h:      56px;
}

/* ══ RESET ══ */
body.certificados-publicos-page *,body.certificados-publicos-page *::before,body.certificados-publicos-page *::after { box-sizing:border-box; margin:0; padding:0; }
body.certificados-publicos-page { height:100%; }
body.certificados-publicos-page {
    font-family:'DM Sans', system-ui, sans-serif;
    background:var(--bg-app);
    color:var(--text-1);
    height:100%;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    overflow:hidden;
}
body.certificados-publicos-page img { max-width:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

/* ══ TOPBAR ══ */
body.certificados-publicos-page .topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:200;
    height:var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px) saturate(1.25);
    border-bottom:1px solid #dbe4f0;
    gap:12px;
}

body.certificados-publicos-page .topbar-left {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    min-width:0;
}

body.certificados-publicos-page .brand-link {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:178px;
    height:48px;
    overflow:hidden;
    text-decoration:none;
    flex-shrink:0;
}

body.certificados-publicos-page .brand-logo {
    display:block;
    width:178px;
    max-width:178px;
    height:auto;
    max-height:48px;
    object-fit:contain;
    object-position:left center;
}

body.certificados-publicos-page .tipo-chip {
    font-size:10.5px;
    font-weight:800;
    padding:3px 10px;
    border-radius:20px;
    background:#e9fbff;
    color:#13849a;
    border:1px solid #8de7f2;
    white-space:nowrap;
}

body.certificados-publicos-page .topbar-right {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
}

/* ══ BOTONES ══ */
body.certificados-publicos-page .btn {
    display:inline-flex; align-items:center; gap:5px;
    border:1px solid transparent; border-radius:var(--radius-sm);
    padding:6px 13px; font-family:'DM Sans', sans-serif;
    font-size:12px; font-weight:600; text-decoration:none;
    cursor:pointer; transition:all .16s ease;
    white-space:nowrap; line-height:1.2;
}
body.certificados-publicos-page .btn-primary {
    background:var(--accent); color:#fff; border-color:var(--accent);
    box-shadow:0 2px 10px rgba(59,130,246,.3);
}
body.certificados-publicos-page .btn-primary:hover {
    background:var(--accent-dark); border-color:var(--accent-dark);
    box-shadow:0 3px 16px rgba(59,130,246,.5); color:#fff;
    transform:translateY(-1px);
}
body.certificados-publicos-page .btn-ghost {
    background:rgba(255,255,255,.05); color:var(--text-2); border-color:var(--border);
}
body.certificados-publicos-page .btn-ghost:hover { background:rgba(255,255,255,.09); color:var(--text-1); border-color:rgba(255,255,255,.14); }
body.certificados-publicos-page .btn-outline { background:transparent; color:#93c5fd; border-color:rgba(59,130,246,.35); }
body.certificados-publicos-page .btn-outline:hover { background:rgba(59,130,246,.1); color:var(--accent); border-color:var(--accent); }

/* ══ LAYOUT ══ */
body.certificados-publicos-page .app-body {
    display:flex;
    height:100vh;
    padding-top:var(--topbar-h);
    overflow:hidden;
}

/* ══ SIDEBAR ══ */
body.certificados-publicos-page .sidebar {
    width:250px;
    flex-shrink:0;
    background:var(--bg-panel);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
body.certificados-publicos-page .sb-head {
    padding:16px 14px 12px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
body.certificados-publicos-page .sb-label {
    font-size:9.5px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-3); margin-bottom:10px;
}
body.certificados-publicos-page .sb-student {
    display:flex; align-items:center; gap:9px;
}
body.certificados-publicos-page .sb-avatar {
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#3b82f6,#818cf8);
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora', sans-serif; font-size:13px; font-weight:700; color:#fff;
}
body.certificados-publicos-page .sb-name { font-size:12.5px; font-weight:600; color:var(--text-1); line-height:1.3; }
body.certificados-publicos-page .sb-count { font-size:10.5px; color:var(--text-3); margin-top:1px; }

body.certificados-publicos-page .sb-list {
    flex:1; overflow-y:auto; padding:10px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
body.certificados-publicos-page .sb-list::-webkit-scrollbar { width:3px; }
body.certificados-publicos-page .sb-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }

body.certificados-publicos-page .sb-section { font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-3); padding:4px 3px 8px; display:block; }

body.certificados-publicos-page .cert-card {
    display:block; text-decoration:none;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:10px 12px;
    margin-bottom:5px; transition:all .16s ease;
    position:relative; overflow:hidden;
}
body.certificados-publicos-page .cert-card::after {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:2px; background:transparent;
    transition:background .16s;
}
body.certificados-publicos-page .cert-card:hover { background:var(--bg-card-hover); border-color:rgba(59,130,246,.25); }
body.certificados-publicos-page .cert-card:hover::after, body.certificados-publicos-page .cert-card.active::after { background:var(--accent); }
body.certificados-publicos-page .cert-card.active { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.35); }
body.certificados-publicos-page .cc-title { font-size:12px; font-weight:600; color:var(--text-1); margin-bottom:4px; line-height:1.3; }
body.certificados-publicos-page .cc-code { font-size:10px; color:var(--text-3); font-family:monospace; }
body.certificados-publicos-page .cc-date { font-size:10px; color:var(--text-3); margin-top:2px; }

/* ══ PANEL DERECHO ══ */
body.certificados-publicos-page .main-panel {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--bg-panel);
    min-width:0;
}

body.certificados-publicos-page .main-head {
    padding:12px 20px;
    background:var(--bg-toolbar);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
body.certificados-publicos-page .mh-name {
    font-family:'Sora', sans-serif;
    font-size:15px; font-weight:700; color:var(--text-1);
}
body.certificados-publicos-page .mh-meta {
    font-size:11.5px; color:var(--text-2); margin-top:2px;
    display:flex; align-items:center; gap:7px;
}
body.certificados-publicos-page .mh-cedula {
    background:rgba(255,255,255,.05); border:1px solid var(--border);
    border-radius:4px; padding:1px 6px;
    font-family:monospace; font-size:10.5px; color:var(--text-3);
}

body.certificados-publicos-page .main-toolbar {
    padding:9px 18px;
    background:var(--bg-toolbar);
    border-bottom:1px solid var(--border);
    display:flex; gap:7px; flex-wrap:wrap; flex-shrink:0;
}

/* ══ PREVIEW (FIX CENTRAL) ══ */
body.certificados-publicos-page .preview-shell {
    flex:1;               /* ocupa todo el espacio restante */
    min-height:0;         /* CRÍTICO: permite que flex:1 funcione en columna */
    overflow:hidden;
    background:var(--bg-app);
    background-image:
        radial-gradient(circle, rgba(59,130,246,.06) 1px, transparent 1px);
    background-size:28px 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

/* El viewport es el flex container que centra el scale-box */
body.certificados-publicos-page .preview-viewport {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* scale-box: el JS le asigna width/height = SW*scale × SH*scale
   y el canvas-stage (posición absoluta) se escala con transform */
body.certificados-publicos-page .preview-scale-box {
    position:relative;
    flex-shrink:0;
}

/* El canvas siempre 100% a tamaño real; JS lo escala via transform */
body.certificados-publicos-page .canvas-stage {
    position:absolute;
    left:0; top:0;
    background:#fff;
    overflow:hidden;
    transform-origin:top left;
    box-shadow:0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
}
body.certificados-publicos-page .canvas-stage.badge { border-radius:24px; }
body.certificados-publicos-page .canvas-bg {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; pointer-events:none; z-index:1;
}

/* ══ EMPTY STATE ══ */
body.certificados-publicos-page .empty-wrap {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:80vh; padding:60px 20px; text-align:center;
}
body.certificados-publicos-page .empty-wrap .e-icon { font-size:52px; opacity:.3; margin-bottom:18px; }
body.certificados-publicos-page .empty-wrap h3 {
    font-family:'Sora', sans-serif;
    font-size:20px; font-weight:700; color:var(--text-2); margin-bottom:8px;
}
body.certificados-publicos-page .empty-wrap p { font-size:13px; color:var(--text-3); }


/* ══════════════════════════════════════════════════
   TEMA CLARO CODINGS — VISTA PÚBLICA
   Mantiene el certificado/badge igual; solo cambia la interfaz pública.
══════════════════════════════════════════════════ */
body.certificados-publicos-page {
    --bg-app:        #f5f7fb;
    --bg-panel:      #ffffff;
    --bg-toolbar:    #ffffff;
    --bg-card:       #ffffff;
    --bg-card-hover: #f8fafc;
    --border:        #e3e6f0;
    --border-active: #4e73df;
    --accent:        #003b70;
    --accent-dark:   #002b55;
    --accent2:       #36b9cc;
    --text-1:        #374151;
    --text-2:        #6b7280;
    --text-3:        #94a3b8;
    --radius-lg:     14px;
    --radius-md:     9px;
    --radius-sm:     6px;
    --topbar-h:      56px;
}

body.certificados-publicos-page {
    background: var(--bg-app);
    color: var(--text-1);
}

body.certificados-publicos-page .topbar {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e3e6f0;
    box-shadow: 0 2px 16px rgba(15,23,42,.06);
}

body.certificados-publicos-page .brand-dot {
    background: linear-gradient(135deg, #36b9cc, #1cc88a);
    box-shadow: 0 4px 14px rgba(54,185,204,.24);
}

body.certificados-publicos-page .brand-name {
    color: #263445;
}

body.certificados-publicos-page .tipo-chip {
    background: #e6f7fb;
    color: #16879b;
    border: 1px solid #b9edf5;
}

body.certificados-publicos-page .btn {
    border-radius: 6px;
}

body.certificados-publicos-page .btn-primary {
    background: #003b70;
    color: #fff;
    border-color: #003b70;
    box-shadow: 0 3px 10px rgba(0,59,112,.18);
}

body.certificados-publicos-page .btn-primary:hover {
    background: #002b55;
    border-color: #002b55;
    color: #fff;
    box-shadow: 0 5px 16px rgba(0,59,112,.25);
}

body.certificados-publicos-page .btn-ghost {
    background: #f8fafc;
    color: #475569;
    border-color: #d8dee9;
}

body.certificados-publicos-page .btn-ghost:hover {
    background: #eef2f7;
    color: #263445;
    border-color: #cbd5e1;
}

body.certificados-publicos-page .btn-outline {
    background: #ffffff;
    color: #003b70;
    border-color: #b8c7da;
}

body.certificados-publicos-page .btn-outline:hover {
    background: #eaf3ff;
    color: #003b70;
    border-color: #003b70;
}

body.certificados-publicos-page .sidebar {
    background: #ffffff;
    border-right: 1px solid #e3e6f0;
    box-shadow: 6px 0 18px rgba(15,23,42,.04);
}

body.certificados-publicos-page .sb-head {
    border-bottom: 1px solid #e3e6f0;
    background: #ffffff;
}

body.certificados-publicos-page .sb-label,
body.certificados-publicos-page .sb-count,
body.certificados-publicos-page .sb-section,
body.certificados-publicos-page .cc-code,
body.certificados-publicos-page .cc-date {
    color: #94a3b8;
}

body.certificados-publicos-page .sb-name,
body.certificados-publicos-page .cc-title,
body.certificados-publicos-page .mh-name {
    color: #374151;
}

body.certificados-publicos-page .sb-avatar {
    background: linear-gradient(135deg, #36b9cc, #4e73df);
}

body.certificados-publicos-page .sb-list {
    scrollbar-color: rgba(148,163,184,.45) transparent;
}

body.certificados-publicos-page .sb-list::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.45);
}

body.certificados-publicos-page .cert-card {
    background: #ffffff;
    border: 1px solid #e3e6f0;
    box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

body.certificados-publicos-page .cert-card:hover {
    background: #f8fafc;
    border-color: #b9c9e8;
    box-shadow: 0 8px 22px rgba(78,115,223,.10);
}

body.certificados-publicos-page .cert-card.active {
    background: #eef6ff;
    border-color: #4e73df;
}

body.certificados-publicos-page .cert-card:hover::after,
body.certificados-publicos-page .cert-card.active::after {
    background: #4e73df;
}

body.certificados-publicos-page .main-panel {
    background: #ffffff;
}

body.certificados-publicos-page .main-head {
    background: #ffffff;
    border-bottom: 1px solid #e3e6f0;
}

body.certificados-publicos-page .mh-meta {
    color: #6b7280;
}

body.certificados-publicos-page .mh-cedula {
    background: #f1f5f9;
    border: 1px solid #e3e6f0;
    color: #64748b;
}

body.certificados-publicos-page .main-toolbar {
    background: #ffffff;
    border-bottom: 1px solid #e3e6f0;
}

body.certificados-publicos-page .preview-shell {
    background: #f1f5f9;
    background-image:
        radial-gradient(circle, rgba(78,115,223,.10) 1px, transparent 1px);
    background-size: 28px 28px;
}

body.certificados-publicos-page .canvas-stage {
    box-shadow: 0 18px 48px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
}

body.certificados-publicos-page .empty-wrap h3 {
    color: #374151;
}

body.certificados-publicos-page .empty-wrap p {
    color: #6b7280;
}

body.certificados-publicos-page .status-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:80vh;
    padding:72px 20px 40px;
    text-align:center;
}

body.certificados-publicos-page .status-card {
    width:min(720px, 100%);
    background:#ffffff;
    border:1px solid #e3e6f0;
    border-radius:22px;
    padding:38px 30px;
    box-shadow:0 20px 55px rgba(15,23,42,.12);
}

body.certificados-publicos-page .status-icon {
    font-size:58px;
    line-height:1;
    margin-bottom:18px;
}

body.certificados-publicos-page .status-card h3 {
    font-family:'Sora', sans-serif;
    font-size:24px;
    font-weight:800;
    color:#263445;
    margin-bottom:10px;
}

body.certificados-publicos-page .status-card p {
    font-size:15px;
    color:#64748b;
    line-height:1.6;
    margin-bottom:16px;
}

body.certificados-publicos-page .status-meta {
    display:inline-block;
    width:100%;
    background:#f8fafc;
    border:1px solid #e3e6f0;
    border-radius:14px;
    padding:14px 16px;
    margin:8px 0 20px;
    color:#475569;
}

body.certificados-publicos-page .status-meta strong {
    display:block;
    color:#263445;
    margin-bottom:4px;
}

body.certificados-publicos-page .status-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

body.certificados-publicos-page .status-revoked .status-icon {
    color:#dc2626;
}

body.certificados-publicos-page .status-unavailable .status-icon {
    color:#f59e0b;
}



/* ══════════════════════════════════════════════════
   FASE 4 — VERIFICACIÓN PÚBLICA PROFESIONAL
   - Estado vigente visible
   - Código / fecha / emisor
   - Botón de copiar verificación
══════════════════════════════════════════════════ */
body.certificados-publicos-page .verification-strip {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 20px;
    background:linear-gradient(90deg, rgba(14,165,233,.10), rgba(34,197,94,.08));
    border-bottom:1px solid rgba(148,163,184,.18);
}

body.certificados-publicos-page .verification-left {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

body.certificados-publicos-page .verification-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:5px 10px;
    background:rgba(34,197,94,.12);
    border:1px solid rgba(34,197,94,.28);
    color:#86efac;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

body.certificados-publicos-page .verification-badge__dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

body.certificados-publicos-page .verification-data {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    color:var(--text-2);
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.certificados-publicos-page .verification-data strong {
    color:var(--text-1);
    font-weight:800;
}

body.certificados-publicos-page .verification-sep {
    color:rgba(148,163,184,.55);
}

body.certificados-publicos-page .btn-copy-verification {
    flex:0 0 auto;
    min-height:30px;
    padding:6px 10px;
    font-size:11px;
}

/* Compacto en escritorio para no quitar alto útil al visor */
@media (min-width: 992px) {
    body.certificados-publicos-page .verification-strip {
        padding:7px 20px;
        min-height:38px;
    }

    body.certificados-publicos-page .verification-badge {
        padding:4px 9px;
        font-size:10.5px;
    }

    body.certificados-publicos-page .verification-data {
        font-size:10.8px;
    }

    body.certificados-publicos-page .btn-copy-verification {
        min-height:28px;
        padding:5px 10px;
        font-size:10.5px;
    }
}

body.certificados-publicos-page .cert-toast {
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translate(-50%, 18px);
    z-index:460;
    min-width:260px;
    max-width:min(92vw, 420px);
    padding:11px 15px;
    border-radius:14px;
    background:#0f172a;
    color:#f8fafc;
    border:1px solid rgba(148,163,184,.25);
    box-shadow:0 18px 40px rgba(15,23,42,.32);
    font-size:13px;
    font-weight:700;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}

body.certificados-publicos-page .cert-toast.show {
    opacity:1;
    transform:translate(-50%, 0);
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page .verification-strip {
        padding:8px 10px;
        align-items:flex-start;
        gap:8px;
        background:#ffffff;
        border-bottom:1px solid #e2e8f0;
    }

    body.certificados-publicos-page .verification-left {
        flex:1 1 auto;
        min-width:0;
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }

    body.certificados-publicos-page .verification-badge {
        font-size:10px;
        padding:4px 8px;
        color:#15803d;
        background:#dcfce7;
        border-color:#bbf7d0;
    }

    body.certificados-publicos-page .verification-data {
        width:100%;
        display:block;
        font-size:9.5px;
        line-height:1.35;
        color:#64748b;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.certificados-publicos-page .verification-data strong {
        color:#0f172a;
    }

    body.certificados-publicos-page .verification-sep {
        display:none;
    }

    body.certificados-publicos-page .btn-copy-verification {
        max-width:112px;
        white-space:normal;
        line-height:1.1;
        padding:7px 8px;
        font-size:9.8px;
    }

    body.certificados-publicos-page .cert-toast {
        bottom:14px;
        font-size:12px;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page .verification-strip {
        padding:7px 8px;
    }

    body.certificados-publicos-page .verification-data .verification-date {
        display:none;
    }
}

/* ══════════════════════════════════════════════════
   FASE 1 — RESPONSIVE REAL CERTIFICADO PÚBLICO
   Producción móvil:
   - Header limpio y simétrico
   - Acciones ordenadas
   - Sidebar de documentos flotante con scroll interno
   - Certificado/badge ocupa todo el ancho disponible
══════════════════════════════════════════════════ */
body.certificados-publicos-page .btn-mobile-docs {
    display:none;
}

body.certificados-publicos-page .docs-backdrop {
    display:none;
    border:0;
    padding:0;
    margin:0;
    background:rgba(15, 23, 42, .50);
    position:fixed;
    inset:0;
    z-index:240;
    cursor:pointer;
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 142px;
    }

    body.certificados-publicos-page,
    body.certificados-publicos-page {
        width:100%;
        height:100%;
        overflow:hidden;
        background:#f1f5f9;
    }

    body.certificados-publicos-page.cert-docs-open {
        touch-action:none;
    }

    body.certificados-publicos-page .topbar {
        height:var(--topbar-h);
        min-height:var(--topbar-h);
        padding:8px 10px 10px;
        display:grid;
        grid-template-rows:auto auto;
        align-content:start;
        align-items:start;
        justify-content:stretch;
        gap:8px;
        overflow:hidden;
        background:#ffffff;
        box-shadow:0 2px 14px rgba(15,23,42,.08);
    }

    body.certificados-publicos-page .topbar-left {
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    body.certificados-publicos-page .brand-link {
        width:148px;
        height:48px;
        max-width:58vw;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        overflow:hidden;
        flex:0 0 auto;
    }

    body.certificados-publicos-page .brand-logo {
        display:block;
        width:148px;
        max-width:148px;
        height:auto;
        max-height:48px;
        object-fit:contain;
        object-position:left center;
    }

    body.certificados-publicos-page .tipo-chip {
        flex:0 0 auto;
        justify-self:end;
        align-self:center;
        font-size:9.5px;
        padding:3px 9px;
        max-width:112px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.certificados-publicos-page .topbar-right {
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:7px;
        align-items:center;
        justify-content:stretch;
        overflow:visible;
        padding:0;
    }

    body.certificados-publicos-page .topbar-right .btn {
        width:100%;
        min-width:0;
        min-height:32px;
        justify-content:center;
        padding:7px 8px;
        font-size:10.7px;
        line-height:1.15;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border-radius:8px;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column:1 / -1;
    }

    body.certificados-publicos-page .app-body {
        display:block;
        height:100dvh;
        padding-top:var(--topbar-h);
        overflow:hidden;
        background:#f1f5f9;
    }

    /* Sidebar móvil: no ocupa espacio; abre como panel y tiene scroll interno */
    body.certificados-publicos-page .sidebar {
        position:fixed;
        top:var(--topbar-h);
        left:0;
        bottom:0;
        width:86vw;
        max-width:330px;
        min-width:270px;
        height:calc(100dvh - var(--topbar-h));
        z-index:260;
        display:flex;
        flex-direction:column;
        transform:translate3d(-108%, 0, 0);
        transition:transform .22s ease-in-out;
        box-shadow:16px 0 38px rgba(15,23,42,.24);
        border-right:1px solid #dbe4f0;
        overflow:hidden;
        background:#ffffff;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    body.certificados-publicos-page.cert-docs-open .sidebar {
        transform:translate3d(0, 0, 0);
    }

    body.certificados-publicos-page.cert-docs-open .docs-backdrop {
        display:block;
    }

    body.certificados-publicos-page .sb-head {
        flex:0 0 auto;
        padding:14px 14px 12px;
        background:#ffffff;
        border-bottom:1px solid #e3e6f0;
    }

    body.certificados-publicos-page .sb-list {
        flex:1 1 auto;
        min-height:0;
        height:auto;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding:10px 10px 22px;
        scrollbar-width:thin;
        scrollbar-color:rgba(78,115,223,.55) transparent;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        touch-action:pan-y;
    }

    body.certificados-publicos-page .sb-list::-webkit-scrollbar {
        width:6px;
    }

    body.certificados-publicos-page .sb-list::-webkit-scrollbar-thumb {
        background:rgba(78,115,223,.50);
        border-radius:10px;
    }

    body.certificados-publicos-page .cert-card {
        padding:11px 12px;
        margin-bottom:8px;
    }

    body.certificados-publicos-page .cc-title {
        font-size:12px;
        line-height:1.28;
    }

    body.certificados-publicos-page .main-panel {
        width:100%;
        height:calc(100dvh - var(--topbar-h));
        min-width:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        background:#ffffff;
    }

    body.certificados-publicos-page .main-head {
        flex:0 0 auto;
        min-height:58px;
        padding:8px 10px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:center;
        gap:8px;
        border-bottom:1px solid #e3e6f0;
        background:#ffffff;
    }

    body.certificados-publicos-page .mh-info {
        min-width:0;
    }

    body.certificados-publicos-page .mh-name {
        font-size:13px;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-bottom:2px;
    }

    body.certificados-publicos-page .mh-meta {
        display:block;
        font-size:9.6px;
        line-height:1.25;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color:#64748b;
    }

    body.certificados-publicos-page .mh-cedula {
        display:inline-block;
        margin-right:5px;
        font-size:9px;
        vertical-align:middle;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:34px;
        max-width:142px;
        padding:7px 8px;
        font-size:10.5px;
        line-height:1.1;
        white-space:normal;
        text-align:center;
        border-radius:8px;
    }

    body.certificados-publicos-page .preview-shell {
        flex:1 1 auto;
        width:100%;
        min-height:0;
        padding:10px 7px;
        overflow:hidden;
        background:#f1f5f9;
        background-image:radial-gradient(circle, rgba(78,115,223,.10) 1px, transparent 1px);
        background-size:24px 24px;
        display:flex;
        align-items:flex-start;
        justify-content:center;
    }

    body.certificados-publicos-page .preview-viewport {
        width:100%;
        height:100%;
        min-height:0;
        display:flex;
        align-items:flex-start;
        justify-content:center;
        overflow:hidden;
        padding-top:4px;
    }

    body.certificados-publicos-page .canvas-stage {
        box-shadow:0 10px 26px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.06);
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 136px;
    }

    body.certificados-publicos-page .topbar {
        padding:7px 8px 9px;
        gap:7px;
    }

    body.certificados-publicos-page .brand-link {
        width:138px;
        height:44px;
        max-width:56vw;
    }

    body.certificados-publicos-page .brand-logo {
        width:138px;
        max-width:138px;
        max-height:44px;
    }

    body.certificados-publicos-page .tipo-chip {
        font-size:9px;
        padding:3px 8px;
        max-width:104px;
    }

    body.certificados-publicos-page .topbar-right {
        gap:6px;
    }

    body.certificados-publicos-page .topbar-right .btn {
        min-height:31px;
        padding:6px 7px;
        font-size:9.7px;
        border-radius:7px;
    }

    body.certificados-publicos-page .sidebar {
        width:88vw;
        min-width:260px;
        max-width:315px;
    }

    body.certificados-publicos-page .main-head {
        min-height:58px;
        padding:8px;
        gap:7px;
    }

    body.certificados-publicos-page .mh-name {
        font-size:12.5px;
    }

    body.certificados-publicos-page .mh-meta {
        font-size:9.2px;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        max-width:132px;
        min-height:32px;
        padding:6px 7px;
        font-size:9.7px;
    }

    body.certificados-publicos-page .preview-shell {
        padding:8px 5px;
    }

    body.certificados-publicos-page .preview-viewport {
        padding-top:2px;
    }
}

@media (max-width: 360px) {
    body.certificados-publicos-page {
        --topbar-h: 138px;
    }

    body.certificados-publicos-page .brand-link {
        width:126px;
        height:42px;
        max-width:54vw;
    }

    body.certificados-publicos-page .brand-logo {
        width:126px;
        max-width:126px;
        max-height:42px;
    }

    body.certificados-publicos-page .topbar-right .btn {
        font-size:9.2px;
        padding:6px 5px;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        max-width:118px;
        font-size:9.2px;
    }
}


/* ══════════════════════════════════════════════════
   FASE 4.2 — BADGE COMPLETO SIN SCROLL EN ESCRITORIO
   - El badge se ajusta completo al área disponible.
   - En pantallas grandes no obliga a bajar para verlo completo.
   - Mantiene certificado igual.
══════════════════════════════════════════════════ */
body.certificados-publicos-page .is-badge-mode .preview-shell {
    align-items:center !important;
    justify-content:center !important;
    padding:14px 20px !important;
    overflow:hidden !important;
}

body.certificados-publicos-page .is-badge-mode .preview-viewport {
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:0 !important;
    -webkit-overflow-scrolling:touch;
}

body.certificados-publicos-page .canvas-stage.badge {
    border-radius:30px;
    background:#ffffff !important;
    box-shadow:0 22px 60px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.08);
}

/* El badge debe respetar exactamente el diseño guardado.
   No se agrega degradado ni capa visual externa. */
body.certificados-publicos-page .canvas-stage.badge::before {
    content:none !important;
    display:none !important;
}

body.certificados-publicos-page .canvas-stage.badge .canvas-bg {
    z-index:1;
    object-fit:cover;
}

body.certificados-publicos-page .canvas-stage.badge .layout-shape,
body.certificados-publicos-page .canvas-stage.badge .layout-image,
body.certificados-publicos-page .canvas-stage.badge .layout-text {
    position:absolute;
}

/* No agregar sombra global al texto del badge para evitar que cambie el diseño original. */
body.certificados-publicos-page .canvas-stage.badge .layout-text {
    text-shadow:none !important;
}

body.certificados-publicos-page .is-badge-mode .main-head {
    border-bottom:1px solid #e3e6f0;
}

@media (min-width: 992px) {
    body.certificados-publicos-page .is-badge-mode .preview-shell {
        padding:12px 18px !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-viewport {
        overflow:hidden !important;
    }
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page .is-badge-mode .preview-shell {
        padding:10px 8px !important;
        align-items:center !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-viewport {
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        padding:0 !important;
    }

    body.certificados-publicos-page .canvas-stage.badge {
        border-radius:22px;
    }
}


/* ══════════════════════════════════════════════════
   FASE 6 — COMPARTIR PROFESIONAL
══════════════════════════════════════════════════ */
body.certificados-publicos-page .share-sheet-backdrop {
    display:none;
    position:fixed;
    inset:0;
    z-index:520;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(3px);
}

body.certificados-publicos-page .share-sheet {
    display:none;
    position:fixed;
    z-index:530;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(620px, calc(100vw - 28px));
    max-height:calc(100dvh - 42px);
    overflow:hidden;
    background:#ffffff;
    color:#1f2937;
    border:1px solid #dbe4f0;
    border-radius:18px;
    box-shadow:0 30px 90px rgba(15,23,42,.30);
}

body.certificados-publicos-page.share-sheet-open .share-sheet-backdrop,
body.certificados-publicos-page.share-sheet-open .share-sheet {
    display:block;
}

body.certificados-publicos-page .share-sheet__head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px 14px;
    border-bottom:1px solid #e5e7eb;
    background:linear-gradient(135deg, #f8fbff, #ffffff);
}

body.certificados-publicos-page .share-sheet__title {
    font-family:'Sora', sans-serif;
    font-size:17px;
    font-weight:800;
    color:#0f172a;
    margin:0;
}

body.certificados-publicos-page .share-sheet__subtitle {
    font-size:12.5px;
    color:#64748b;
    margin-top:4px;
    line-height:1.35;
}

body.certificados-publicos-page .share-sheet__close {
    border:0;
    background:#eef2f7;
    color:#334155;
    width:34px;
    height:34px;
    border-radius:999px;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

body.certificados-publicos-page .share-sheet__body {
    padding:16px 20px 20px;
    overflow-y:auto;
    max-height:calc(100dvh - 160px);
}

body.certificados-publicos-page .share-preview-card {
    display:flex;
    gap:12px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#f8fafc;
    margin-bottom:14px;
}

body.certificados-publicos-page .share-preview-logo {
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    object-fit:contain;
    padding:7px;
}

body.certificados-publicos-page .share-preview-title {
    font-size:13.5px;
    font-weight:900;
    color:#0f172a;
    line-height:1.25;
    margin-bottom:4px;
}

body.certificados-publicos-page .share-preview-desc {
    font-size:12.2px;
    color:#64748b;
    line-height:1.35;
}

body.certificados-publicos-page .share-actions-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

body.certificados-publicos-page .share-actions-grid .btn,
body.certificados-publicos-page .share-actions-grid a.btn {
    width:100%;
    justify-content:center;
    min-height:39px;
    text-decoration:none;
}

body.certificados-publicos-page .share-actions-grid .btn {
    gap:8px;
}

body.certificados-publicos-page .share-icon {
    width:17px;
    height:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 17px;
    line-height:0;
}

body.certificados-publicos-page .share-icon svg {
    width:17px;
    height:17px;
    display:block;
    fill:currentColor;
}

body.certificados-publicos-page .share-icon--round {
    width:20px;
    height:20px;
    flex-basis:20px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
}

body.certificados-publicos-page .btn-ghost .share-icon--round,
body.certificados-publicos-page .btn-outline .share-icon--round {
    background:rgba(0,59,112,.08);
}


body.certificados-publicos-page .btn-whatsapp { background:#16a34a; color:#fff; border-color:#16a34a; }
body.certificados-publicos-page .btn-facebook { background:#1877f2; color:#fff; border-color:#1877f2; }
body.certificados-publicos-page .btn-x { background:#111827; color:#fff; border-color:#111827; }
body.certificados-publicos-page .btn-telegram { background:#229ed9; color:#fff; border-color:#229ed9; }

body.certificados-publicos-page .share-note {
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    font-size:12.2px;
    line-height:1.4;
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page .share-sheet {
        left:10px;
        right:10px;
        bottom:10px;
        top:auto;
        width:auto;
        max-height:82dvh;
        transform:none;
        border-radius:18px 18px 16px 16px;
    }

    body.certificados-publicos-page .share-sheet__head {
        padding:15px 16px 12px;
    }

    body.certificados-publicos-page .share-sheet__body {
        padding:14px 16px 16px;
        max-height:calc(82dvh - 90px);
    }

    body.certificados-publicos-page .share-actions-grid {
        grid-template-columns:1fr;
    }

    body.certificados-publicos-page .share-preview-card {
        align-items:flex-start;
    }
}

@media print {
    body.certificados-publicos-page .canvas-stage.badge {
        box-shadow:none!important;
        border-radius:22px!important;
    }
}

/* ══════════════════════════════════════════════════
   FASE 3 — ACCIONES PROFESIONALES / LINKEDIN
   - Separa agregar a certificaciones de compartir publicación
   - Muestra datos listos para copiar
   - No afecta impresión/PDF
══════════════════════════════════════════════════ */
body.certificados-publicos-page .btn-linkedin {
    background:#0a66c2;
    color:#fff;
    border-color:#0a66c2;
    box-shadow:0 2px 10px rgba(10,102,194,.26);
}
body.certificados-publicos-page .btn-linkedin:hover {
    background:#084f99;
    color:#fff;
    border-color:#084f99;
    transform:translateY(-1px);
}

body.certificados-publicos-page .linkedin-sheet-backdrop {
    display:none;
    position:fixed;
    inset:0;
    z-index:500;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(3px);
}

body.certificados-publicos-page .linkedin-sheet {
    display:none;
    position:fixed;
    z-index:510;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(620px, calc(100vw - 28px));
    max-height:calc(100dvh - 42px);
    overflow:hidden;
    background:#ffffff;
    color:#1f2937;
    border:1px solid #dbe4f0;
    border-radius:18px;
    box-shadow:0 30px 90px rgba(15,23,42,.30);
}

body.certificados-publicos-page.linkedin-sheet-open .linkedin-sheet-backdrop,
body.certificados-publicos-page.linkedin-sheet-open .linkedin-sheet {
    display:block;
}

body.certificados-publicos-page .linkedin-sheet__head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px 14px;
    border-bottom:1px solid #e5e7eb;
    background:linear-gradient(135deg, #f8fbff, #ffffff);
}

body.certificados-publicos-page .linkedin-sheet__title {
    font-family:'Sora', sans-serif;
    font-size:17px;
    font-weight:800;
    color:#0f172a;
    margin:0;
}

body.certificados-publicos-page .linkedin-sheet__subtitle {
    font-size:12.5px;
    color:#64748b;
    margin-top:4px;
    line-height:1.35;
}

body.certificados-publicos-page .linkedin-sheet__close {
    border:0;
    background:#eef2f7;
    color:#334155;
    width:34px;
    height:34px;
    border-radius:999px;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

body.certificados-publicos-page .linkedin-sheet__body {
    padding:16px 20px 20px;
    overflow-y:auto;
    max-height:calc(100dvh - 160px);
}

body.certificados-publicos-page .linkedin-data-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

body.certificados-publicos-page .linkedin-data-item {
    border:1px solid #e5e7eb;
    background:#f8fafc;
    border-radius:12px;
    padding:10px 12px;
    min-width:0;
}

body.certificados-publicos-page .linkedin-data-item.full {
    grid-column:1 / -1;
}

body.certificados-publicos-page .linkedin-data-label {
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:4px;
}

body.certificados-publicos-page .linkedin-data-value {
    display:block;
    font-size:12.8px;
    font-weight:700;
    color:#111827;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.certificados-publicos-page .linkedin-help-box {
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1e3a8a;
    border-radius:12px;
    padding:11px 12px;
    font-size:12.2px;
    line-height:1.45;
    margin:12px 0 14px;
}

body.certificados-publicos-page .linkedin-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

body.certificados-publicos-page .linkedin-actions .btn {
    width:100%;
    justify-content:center;
    min-height:38px;
}

body.certificados-publicos-page .linkedin-copy-state {
    display:none;
    margin-top:12px;
    padding:9px 11px;
    border-radius:10px;
    font-size:12.5px;
    background:#ecfdf5;
    color:#047857;
    border:1px solid #a7f3d0;
}

body.certificados-publicos-page .linkedin-copy-state.show {
    display:block;
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page .linkedin-sheet {
        left:10px;
        right:10px;
        bottom:10px;
        top:auto;
        width:auto;
        max-height:82dvh;
        transform:none;
        border-radius:18px 18px 16px 16px;
    }

    body.certificados-publicos-page .linkedin-sheet__head {
        padding:15px 16px 12px;
    }

    body.certificados-publicos-page .linkedin-sheet__body {
        padding:14px 16px 16px;
        max-height:calc(82dvh - 90px);
    }

    body.certificados-publicos-page .linkedin-data-grid,
    body.certificados-publicos-page .linkedin-actions {
        grid-template-columns:1fr;
    }

    body.certificados-publicos-page .linkedin-data-value {
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        word-break:break-word;
    }
}



/* ══════════════════════════════════════════════════
   FASE 4.3 — MÓVIL PRODUCCIÓN ORDENADO
   - Muestra el botón Compartir en celular
   - Header compacto y simétrico
   - Certificado centrado vertical y horizontalmente
   - Verificación compacta para no robar espacio
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 156px;
    }

    body.certificados-publicos-page .topbar {
        height: var(--topbar-h) !important;
        min-height: var(--topbar-h) !important;
        padding: 7px 8px 8px !important;
        display: grid !important;
        grid-template-rows: 44px 1fr !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .topbar-left {
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    body.certificados-publicos-page .brand-link {
        width: 145px !important;
        height: 43px !important;
        max-width: 58vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width: 145px !important;
        max-width: 145px !important;
        max-height: 43px !important;
    }

    body.certificados-publicos-page .tipo-chip {
        font-size: 9px !important;
        padding: 3px 8px !important;
        max-width: 104px !important;
    }

    body.certificados-publicos-page .topbar-right {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-rows: 27px !important;
        gap: 5px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 27px !important;
        height: 27px !important;
        padding: 4px 6px !important;
        font-size: 9.2px !important;
        line-height: 1 !important;
        border-radius: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column: 1 / -1 !important;
        display: inline-flex !important;
    }

    body.certificados-publicos-page .app-body {
        padding-top: var(--topbar-h) !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .sidebar {
        top: var(--topbar-h) !important;
        height: calc(100dvh - var(--topbar-h)) !important;
    }

    body.certificados-publicos-page .main-panel {
        height: calc(100dvh - var(--topbar-h)) !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .main-head {
        min-height: 52px !important;
        padding: 6px 8px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.certificados-publicos-page .mh-name {
        font-size: 12.2px !important;
        margin-bottom: 1px !important;
    }

    body.certificados-publicos-page .mh-meta {
        font-size: 8.8px !important;
    }

    body.certificados-publicos-page .mh-cedula {
        font-size: 8.4px !important;
        padding: 1px 5px !important;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        max-width: 122px !important;
        min-height: 30px !important;
        padding: 5px 6px !important;
        font-size: 9.2px !important;
        line-height: 1.05 !important;
    }

    body.certificados-publicos-page .verification-strip {
        min-height: 42px !important;
        padding: 5px 7px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 6px !important;
        background: #f8fffb !important;
    }

    body.certificados-publicos-page .verification-left {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
    }

    body.certificados-publicos-page .verification-badge {
        font-size: 8.8px !important;
        padding: 3px 6px !important;
        gap: 4px !important;
    }

    body.certificados-publicos-page .verification-badge__dot {
        width: 6px !important;
        height: 6px !important;
    }

    body.certificados-publicos-page .verification-data {
        font-size: 8.5px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.certificados-publicos-page .verification-data .verification-date {
        display: none !important;
    }

    body.certificados-publicos-page .btn-copy-verification {
        max-width: 92px !important;
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: 8.6px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    body.certificados-publicos-page .preview-shell {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 7px 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .preview-viewport {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .is-cert-mode .preview-shell,
    body.certificados-publicos-page .is-cert-mode .preview-viewport,
    body.certificados-publicos-page .is-badge-mode .preview-shell,
    body.certificados-publicos-page .is-badge-mode .preview-viewport {
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 154px;
    }

    body.certificados-publicos-page .topbar {
        grid-template-rows: 42px 1fr !important;
        gap: 6px !important;
        padding: 6px 7px 7px !important;
    }

    body.certificados-publicos-page .topbar-left {
        height: 42px !important;
    }

    body.certificados-publicos-page .brand-link {
        width: 132px !important;
        height: 40px !important;
        max-width: 54vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width: 132px !important;
        max-width: 132px !important;
        max-height: 40px !important;
    }

    body.certificados-publicos-page .topbar-right {
        grid-auto-rows: 26px !important;
        gap: 5px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height: 26px !important;
        min-height: 26px !important;
        font-size: 8.8px !important;
        padding: 4px 5px !important;
    }

    body.certificados-publicos-page .main-head {
        min-height: 50px !important;
        padding: 6px 7px !important;
    }

    body.certificados-publicos-page .verification-strip {
        min-height: 39px !important;
        padding: 5px 6px !important;
    }

    body.certificados-publicos-page .verification-badge {
        font-size: 8.4px !important;
    }

    body.certificados-publicos-page .verification-data {
        font-size: 8.2px !important;
    }

    body.certificados-publicos-page .btn-copy-verification {
        max-width: 86px !important;
        font-size: 8.2px !important;
        padding: 4px 5px !important;
    }

    body.certificados-publicos-page .preview-shell {
        padding: 6px 4px !important;
    }
}

@media (max-width: 360px) {
    body.certificados-publicos-page {
        --topbar-h: 152px;
    }

    body.certificados-publicos-page .brand-link {
        width: 120px !important;
        max-width: 50vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width: 120px !important;
        max-width: 120px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        font-size: 8.2px !important;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        max-width: 106px !important;
        font-size: 8.5px !important;
    }
}



/* ══════════════════════════════════════════════════
   FASE 7 — NAVEGACIÓN AVANZADA DE DOCUMENTOS
   - Buscador de certificados/badges
   - Filtros por tipo
   - Sidebar con scroll interno estable
══════════════════════════════════════════════════ */
body.certificados-publicos-page .sb-tools {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(148,163,184,.18);
}

body.certificados-publicos-page .sb-search-label {
    display:block;
    margin-bottom:6px;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
}

body.certificados-publicos-page .sb-search-wrap {
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
}

body.certificados-publicos-page .sb-search-icon {
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:12px;
    opacity:.7;
    pointer-events:none;
}

body.certificados-publicos-page .sb-search-input {
    width:100%;
    height:36px;
    border:1px solid #d8e2f1;
    border-radius:10px;
    background:#f8fafc;
    color:#1e293b;
    font-family:'DM Sans', system-ui, sans-serif;
    font-size:12px;
    font-weight:600;
    outline:none;
    padding:0 10px 0 31px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body.certificados-publicos-page .sb-search-input:focus {
    background:#fff;
    border-color:#4e73df;
    box-shadow:0 0 0 3px rgba(78,115,223,.14);
}

body.certificados-publicos-page .sb-filter-row {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
    margin-top:8px;
}

body.certificados-publicos-page .sb-filter {
    border:1px solid #d8e2f1;
    background:#fff;
    color:#475569;
    border-radius:999px;
    min-height:30px;
    padding:5px 7px;
    font-family:'DM Sans', system-ui, sans-serif;
    font-size:10.5px;
    font-weight:800;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
}

body.certificados-publicos-page .sb-filter span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    margin-left:3px;
    border-radius:999px;
    background:#eef4ff;
    color:#4e73df;
    font-size:9px;
}

body.certificados-publicos-page .sb-filter:hover,
body.certificados-publicos-page .sb-filter.active {
    background:#0b3558;
    border-color:#0b3558;
    color:#fff;
    box-shadow:0 8px 18px rgba(11,53,88,.18);
}

body.certificados-publicos-page .sb-filter.active span,
body.certificados-publicos-page .sb-filter:hover span {
    background:rgba(255,255,255,.18);
    color:#fff;
}

body.certificados-publicos-page .sb-visible-count {
    margin-top:8px;
    font-size:10.5px;
    font-weight:700;
    color:#64748b;
}

body.certificados-publicos-page .sb-empty-results {
    margin:14px 2px 4px;
    padding:18px 12px;
    border:1px dashed #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
    color:#475569;
    text-align:center;
}

body.certificados-publicos-page .sb-empty-results[hidden] {
    display:none !important;
}

body.certificados-publicos-page .sb-empty-icon {
    width:36px;
    height:36px;
    margin:0 auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#eef4ff;
    color:#4e73df;
}

body.certificados-publicos-page .sb-empty-results strong,
body.certificados-publicos-page .sb-empty-results span {
    display:block;
}

body.certificados-publicos-page .sb-empty-results strong {
    font-size:12px;
    color:#1e293b;
}

body.certificados-publicos-page .sb-empty-results span {
    margin-top:3px;
    font-size:10.5px;
    color:#64748b;
}

body.certificados-publicos-page .cert-card.is-hidden-by-filter,
body.certificados-publicos-page .sb-section.is-hidden-by-filter {
    display:none !important;
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page .sidebar {
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
    }

    body.certificados-publicos-page .sb-head {
        flex:0 0 auto !important;
        padding:12px 12px 10px !important;
    }

    body.certificados-publicos-page .sb-tools {
        margin-top:10px;
        padding-top:10px;
    }

    body.certificados-publicos-page .sb-search-input {
        height:34px;
        font-size:11.5px;
    }

    body.certificados-publicos-page .sb-filter-row {
        gap:5px;
    }

    body.certificados-publicos-page .sb-filter {
        font-size:10px;
        min-height:29px;
        padding:5px 5px;
    }

    body.certificados-publicos-page .sb-list,
    body.certificados-publicos-page.cert-docs-open .sb-list {
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        padding:9px 10px 18px !important;
    }
}

/* ══════════════════════════════════════════════════
   FASE 5 — PDF / IMPRIMIR PROFESIONAL
   - Certificado: página horizontal completa, sin header/sidebar.
   - Badge: página vertical, centrado y completo.
   - Funciona en laptop y móvil con &print=1.
══════════════════════════════════════════════════ */
body.certificados-publicos-page .print-wrapper {
    display:none;
}

body.certificados-publicos-page .print-fit-box {
    transform-origin:center center;
    display:inline-block;
    width:var(--cert-stage-w);
    height:var(--cert-stage-h);
}

body.certificados-publicos-page .print-wrapper .canvas-stage {
    box-shadow:none!important;
}

@page {
    /* Orientación flexible para A4, Carta u otro papel elegido por el usuario */
    size:auto;
    margin:0;
}

@media print {
    body.certificados-publicos-page,
    body.certificados-publicos-page {
        width:100%!important;
        height:100%!important;
        min-width:0!important;
        min-height:0!important;
        margin:0!important;
        padding:0!important;
        background:#ffffff!important;
        overflow:hidden!important;
    }

    body.certificados-publicos-page {
        -webkit-print-color-adjust:exact!important;
        print-color-adjust:exact!important;
    }

    body.certificados-publicos-page .topbar,
    body.certificados-publicos-page .app-body,
    body.certificados-publicos-page .linkedin-sheet,
    body.certificados-publicos-page .linkedin-sheet-backdrop,
    body.certificados-publicos-page .docs-backdrop,
    body.certificados-publicos-page .cert-toast {
        display:none!important;
        visibility:hidden!important;
    }

    body.certificados-publicos-page .print-wrapper {
        display:flex!important;
        visibility:visible!important;
        position:fixed!important;
        inset:0!important;
        width:100vw!important;
        height:100vh!important;
        margin:0!important;
        padding:0!important;
        align-items:center!important;
        justify-content:center!important;
        background:#ffffff!important;
        overflow:hidden!important;
        page-break-before:avoid!important;
        page-break-after:avoid!important;
        page-break-inside:avoid!important;
    }

    body.certificados-publicos-page .print-fit-box {
        display:inline-block!important;
        position:relative!important;
        width:var(--cert-stage-w)!important;
        height:var(--cert-stage-h)!important;
        transform-origin:center center!important;
        page-break-before:avoid!important;
        page-break-after:avoid!important;
        page-break-inside:avoid!important;
    }

    body.certificados-publicos-page .print-wrapper .canvas-stage {
        position:absolute!important;
        left:0!important;
        top:0!important;
        width:var(--cert-stage-w)!important;
        height:var(--cert-stage-h)!important;
        box-shadow:none!important;
        overflow:hidden!important;
        page-break-inside:avoid!important;
    }

    body.certificados-publicos-page .print-wrapper .canvas-stage.badge {
        border-radius:22px!important;
    }

    body.certificados-publicos-page .print-wrapper img,
    body.certificados-publicos-page .print-wrapper .layout-text,
    body.certificados-publicos-page .print-wrapper .layout-image,
    body.certificados-publicos-page .print-wrapper .layout-shape {
        -webkit-print-color-adjust:exact!important;
        print-color-adjust:exact!important;
    }
}


/* HOTFIX PRINT/PDF FINAL — evita reducción doble en Android */
@media print {
    body.certificados-publicos-page .print-fit-box {
        transform:none!important;
        overflow:visible!important;
    }

    body.certificados-publicos-page .print-wrapper .canvas-stage {
        transform-origin:top left!important;
    }

    body.certificados-publicos-page .print-wrapper.print-wrapper-certificado,
    body.certificados-publicos-page .print-wrapper.print-wrapper-badge {
        width:100vw!important;
        height:100vh!important;
    }
}



/* ══════════════════════════════════════════════════
   FASE 8 — VISOR PROFESIONAL
   Zoom, ajuste, pantalla completa y controles accesibles.
══════════════════════════════════════════════════ */
body.certificados-publicos-page .viewer-tools {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}
body.certificados-publicos-page .viewer-tool-btn,
body.certificados-publicos-page .viewer-zoom-state {
    min-height:32px;
    border:1px solid #cfd8e6;
    background:#ffffff;
    color:#344563;
    border-radius:8px;
    font-weight:800;
    font-size:12px;
    line-height:1;
    padding:8px 10px;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
    transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
body.certificados-publicos-page .viewer-tool-btn:hover,
body.certificados-publicos-page .viewer-zoom-state:hover {
    transform:translateY(-1px);
    border-color:#4e73df;
    color:#254fd3;
    background:#f8fbff;
}
body.certificados-publicos-page .viewer-tool-btn:active,
body.certificados-publicos-page .viewer-zoom-state:active {
    transform:translateY(0);
}
body.certificados-publicos-page .viewer-tool-btn:focus-visible,
body.certificados-publicos-page .viewer-zoom-state:focus-visible {
    outline:3px solid rgba(78,115,223,.22);
    outline-offset:2px;
}
body.certificados-publicos-page .viewer-tool-btn.is-active {
    background:#0b3f75;
    border-color:#0b3f75;
    color:#ffffff;
}
body.certificados-publicos-page .viewer-zoom-state {
    min-width:74px;
    text-align:center;
    font-family:'Sora', sans-serif;
    color:#0b3f75;
}
body.certificados-publicos-page .viewer-help {
    position:fixed;
    left:50%;
    bottom:18px;
    transform:translateX(-50%) translateY(12px);
    z-index:420;
    background:#0f172a;
    color:#ffffff;
    padding:9px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    box-shadow:0 14px 30px rgba(15,23,42,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
body.certificados-publicos-page .viewer-help.show {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
body.certificados-publicos-page .main-panel:fullscreen {
    background:#f5f7fb;
    width:100vw;
    height:100vh;
}
body.certificados-publicos-page .main-panel:fullscreen .preview-shell {
    min-height:0;
}
body.certificados-publicos-page .main-panel:fullscreen .main-head,
body.certificados-publicos-page .main-panel:fullscreen .verification-strip {
    background:rgba(255,255,255,.96);
}
body.certificados-publicos-page .main-panel:fullscreen .preview-viewport {
    overflow:hidden;
}
@media (max-width: 991.98px) {
    body.certificados-publicos-page .viewer-tools {
        width:100%;
        justify-content:space-between;
        gap:5px;
        grid-column:1 / -1;
    }
    body.certificados-publicos-page .viewer-tool-btn,
    body.certificados-publicos-page .viewer-zoom-state {
        flex:1 1 auto;
        min-width:0;
        padding:8px 7px;
        font-size:11px;
        min-height:31px;
    }
    body.certificados-publicos-page .viewer-zoom-state {
        min-width:62px;
    }
    body.certificados-publicos-page .viewer-help {
        width:calc(100vw - 30px);
        border-radius:12px;
        text-align:center;
        bottom:12px;
    }
}
@media print {
    body.certificados-publicos-page .viewer-tools,
    body.certificados-publicos-page .viewer-help {
        display:none!important;
    }
}



/* ══════════════════════════════════════════════════
   FASE 9 — UX MÓVIL PROFESIONAL
   - En móvil se muestra una tarjeta resumen tipo app.
   - La franja técnica se mantiene en escritorio.
   - El visor conserva centrado y controles.
══════════════════════════════════════════════════ */
body.certificados-publicos-page .mobile-doc-summary {
    display:none;
}

body.certificados-publicos-page .mobile-summary-actions {
    display:none;
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 150px;
    }

    body.certificados-publicos-page .topbar {
        background:#ffffff !important;
        border-bottom:1px solid #e5edf7 !important;
        box-shadow:0 4px 18px rgba(15,23,42,.08) !important;
    }

    body.certificados-publicos-page .brand-link {
        width:142px !important;
        height:44px !important;
        max-width:54vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width:142px !important;
        max-width:142px !important;
        max-height:44px !important;
    }

    body.certificados-publicos-page .tipo-chip {
        background:#e9fbff !important;
        border-color:#93e5ee !important;
        color:#11798e !important;
        box-shadow:none !important;
    }

    body.certificados-publicos-page .topbar-right {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px !important;
        width:100% !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        min-height:33px !important;
        border-radius:9px !important;
        font-size:10.5px !important;
        font-weight:800 !important;
        justify-content:center !important;
        padding:7px 8px !important;
    }

    body.certificados-publicos-page .topbar-right .btn-primary,
    body.certificados-publicos-page .topbar-right .btn-linkedin {
        background:#003b70 !important;
        border-color:#003b70 !important;
        color:#ffffff !important;
        box-shadow:0 5px 14px rgba(0,59,112,.18) !important;
    }

    body.certificados-publicos-page .topbar-right .btn-ghost,
    body.certificados-publicos-page .topbar-right .btn-outline {
        background:#ffffff !important;
        border:1px solid #cfd9e8 !important;
        color:#40516a !important;
        box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column:auto !important;
    }

    body.certificados-publicos-page .main-panel {
        background:#f6f9fd !important;
    }

    body.certificados-publicos-page .main-head {
        background:#ffffff !important;
        border-bottom:1px solid #e5edf7 !important;
        box-shadow:0 3px 12px rgba(15,23,42,.04) !important;
    }

    body.certificados-publicos-page .mh-name {
        color:#1f2937 !important;
        font-weight:800 !important;
        text-transform:none !important;
    }

    body.certificados-publicos-page .mh-meta {
        color:#64748b !important;
    }

    body.certificados-publicos-page .mh-cedula {
        background:#eef6ff !important;
        color:#53657d !important;
        border:1px solid #d8e7f7 !important;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        background:#ffffff !important;
        color:#0b3f72 !important;
        border:1px solid #bfd3ee !important;
        box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
        font-weight:800 !important;
    }

    body.certificados-publicos-page .viewer-tools {
        background:#ffffff !important;
        border:1px solid #d8e3f2 !important;
        border-radius:10px !important;
        padding:4px !important;
        gap:4px !important;
        box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
    }

    body.certificados-publicos-page .viewer-tool-btn,
    body.certificados-publicos-page .viewer-zoom-state {
        background:#f8fbff !important;
        border:1px solid #e0e8f4 !important;
        color:#44546a !important;
        min-width:31px !important;
        height:30px !important;
        border-radius:8px !important;
    }

    body.certificados-publicos-page .viewer-zoom-state {
        min-width:70px !important;
        font-size:9.5px !important;
    }

    /* En móvil reemplazamos la franja horizontal por una tarjeta legible */
    body.certificados-publicos-page .verification-strip {
        display:none !important;
    }

    body.certificados-publicos-page .mobile-doc-summary {
        display:block;
        flex:0 0 auto;
        margin:9px 9px 0;
        border:1px solid #dfe8f5;
        border-radius:16px;
        background:#ffffff;
        box-shadow:0 8px 22px rgba(15,23,42,.07);
        overflow:hidden;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        padding:13px 14px;
        background:linear-gradient(135deg,#f7fbff 0%,#eef7ff 100%);
        border-bottom:1px solid #e5edf7;
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:10px;
        align-items:center;
    }

    body.certificados-publicos-page .mobile-doc-icon {
        width:42px;
        height:42px;
        border-radius:13px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#063b70;
        color:#ffffff;
        font-weight:900;
        font-size:18px;
        box-shadow:0 8px 16px rgba(6,59,112,.20);
    }

    body.certificados-publicos-page .mobile-doc-title-wrap {
        min-width:0;
    }

    body.certificados-publicos-page .mobile-doc-eyebrow {
        display:block;
        font-size:10px;
        font-weight:900;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#64748b;
        margin-bottom:2px;
    }

    body.certificados-publicos-page .mobile-doc-title {
        display:block;
        font-size:13px;
        line-height:1.2;
        font-weight:900;
        color:#182236;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.certificados-publicos-page .mobile-doc-status {
        display:inline-flex;
        align-items:center;
        gap:5px;
        padding:5px 9px;
        border-radius:999px;
        background:#e8fff1;
        color:#0b8f45;
        border:1px solid #bff1d0;
        font-size:10px;
        font-weight:900;
        white-space:nowrap;
    }

    body.certificados-publicos-page .mobile-doc-status::before {
        content:'';
        width:7px;
        height:7px;
        border-radius:999px;
        background:#22c55e;
        box-shadow:0 0 0 3px rgba(34,197,94,.13);
    }

    body.certificados-publicos-page .mobile-doc-meta {
        display:grid;
        grid-template-columns:1fr;
        gap:7px;
        padding:12px 14px;
    }

    body.certificados-publicos-page .mobile-meta-row {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        min-width:0;
    }

    body.certificados-publicos-page .mobile-meta-label {
        flex:0 0 auto;
        color:#64748b;
        font-size:11px;
        font-weight:800;
    }

    body.certificados-publicos-page .mobile-meta-value {
        min-width:0;
        text-align:right;
        color:#1f2937;
        font-size:11px;
        font-weight:900;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.certificados-publicos-page .mobile-meta-code {
        font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
        font-size:9.5px;
        background:#f4f7fb;
        border:1px solid #e0e8f4;
        border-radius:7px;
        padding:4px 6px;
        max-width:180px;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:0 14px 13px;
    }

    body.certificados-publicos-page .mobile-summary-actions .btn {
        width:100%;
        justify-content:center;
        font-size:10.5px;
        font-weight:900;
        min-height:34px;
        border-radius:9px;
    }

    body.certificados-publicos-page .mobile-summary-actions .btn-copy-verification-mobile {
        background:#ffffff;
        color:#0b3f72;
        border:1px solid #bfd3ee;
    }

    body.certificados-publicos-page .mobile-summary-actions .btn-public-link-mobile {
        background:#063b70;
        color:#ffffff;
        border-color:#063b70;
    }

    body.certificados-publicos-page .preview-shell {
        padding-top:10px !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.certificados-publicos-page .preview-viewport {
        align-items:center !important;
        justify-content:center !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 152px;
    }

    body.certificados-publicos-page .topbar-right .btn {
        font-size:9.6px !important;
        padding:6px 7px !important;
    }

    body.certificados-publicos-page .mobile-doc-summary {
        margin:8px 7px 0;
        border-radius:14px;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        padding:11px 12px;
        grid-template-columns:auto minmax(0,1fr);
    }

    body.certificados-publicos-page .mobile-doc-status {
        grid-column:1 / -1;
        justify-self:start;
        margin-top:2px;
    }

    body.certificados-publicos-page .mobile-doc-icon {
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:16px;
    }

    body.certificados-publicos-page .mobile-doc-title {
        font-size:12.5px;
    }

    body.certificados-publicos-page .mobile-meta-code {
        max-width:150px;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        grid-template-columns:1fr;
        padding:0 12px 12px;
    }
}


/* ============================================================
   FASE 9.1 - AJUSTE FINO MÓVIL
   - Más aire entre logo, acciones y contenido.
   - Botones superiores menos pegados.
   - El botón móvil copia solo el código, no el bloque completo.
============================================================ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 164px;
    }

    body.certificados-publicos-page .topbar {
        padding: 10px 10px 12px !important;
        gap: 10px !important;
        align-content: start !important;
        overflow: visible !important;
    }

    body.certificados-publicos-page .topbar-left {
        margin-bottom: 2px !important;
    }

    body.certificados-publicos-page .topbar-right {
        gap: 9px !important;
        row-gap: 9px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        min-height: 36px !important;
        padding: 8px 9px !important;
        line-height: 1.15 !important;
    }

    body.certificados-publicos-page .app-body {
        padding-top: var(--topbar-h) !important;
    }

    body.certificados-publicos-page .sidebar {
        top: var(--topbar-h) !important;
        height: calc(100dvh - var(--topbar-h)) !important;
    }

    body.certificados-publicos-page .main-panel {
        height: calc(100dvh - var(--topbar-h)) !important;
    }

    body.certificados-publicos-page .main-head {
        margin-top: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    body.certificados-publicos-page .mobile-doc-summary {
        margin-top: 12px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        gap: 10px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions .btn {
        min-height: 37px !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 166px;
    }

    body.certificados-publicos-page .topbar {
        padding: 9px 8px 12px !important;
        gap: 9px !important;
    }

    body.certificados-publicos-page .topbar-right {
        gap: 8px !important;
        row-gap: 8px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        min-height: 35px !important;
        padding: 8px 7px !important;
    }
}



/* ══════════════════════════════════════════════════
   HOTFIX FINAL — BOTONES MÓVIL + BADGE VIGENTE
   - Separa realmente los botones superiores en celular.
   - Oculta “Enlace público” duplicado en celular.
   - Corrige contraste de “Vigente” en laptop y móvil.
══════════════════════════════════════════════════ */
body.certificados-publicos-page .verification-badge {
    background:#ffffff !important;
    border:1px solid #22c55e !important;
    color:#166534 !important;
    box-shadow:0 2px 8px rgba(34,197,94,.12) !important;
}

body.certificados-publicos-page .verification-badge__dot {
    background:#22c55e !important;
    box-shadow:0 0 0 4px rgba(34,197,94,.14) !important;
}

@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 166px !important;
    }

    body.certificados-publicos-page .topbar {
        height:var(--topbar-h) !important;
        min-height:var(--topbar-h) !important;
        padding:8px 10px 10px !important;
        gap:10px !important;
        grid-template-rows:44px auto !important;
    }

    body.certificados-publicos-page .topbar-right {
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-rows:34px !important;
        gap:10px !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        padding:0 !important;
        overflow:visible !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height:34px !important;
        min-height:34px !important;
        padding:7px 9px !important;
        font-size:9.8px !important;
        line-height:1.05 !important;
        border-radius:9px !important;
        box-shadow:none !important;
    }

    body.certificados-publicos-page .topbar-right #btnCopiarVerificacionTop {
        display:none !important;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column:auto !important;
        display:inline-flex !important;
    }

    body.certificados-publicos-page .verification-badge {
        background:#ffffff !important;
        border-color:#22c55e !important;
        color:#166534 !important;
        font-weight:800 !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 162px !important;
    }

    body.certificados-publicos-page .topbar {
        padding:7px 8px 10px !important;
        gap:9px !important;
    }

    body.certificados-publicos-page .topbar-right {
        grid-auto-rows:33px !important;
        gap:9px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height:33px !important;
        min-height:33px !important;
        padding:7px 7px !important;
        font-size:9.3px !important;
        border-radius:9px !important;
    }
}

@media (max-width: 360px) {
    body.certificados-publicos-page {
        --topbar-h: 160px !important;
    }

    body.certificados-publicos-page .topbar-right {
        gap:8px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height:32px !important;
        min-height:32px !important;
        font-size:8.8px !important;
        padding:6px 5px !important;
    }
}


/* ══════════════════════════════════════════════════
   HOTFIX FINAL 2 — MÓVIL SIMÉTRICO
   Corrige el descuadre generado al agregar "Descargar PDF".
   - El botón Compartir ocupa toda la fila en celular.
   - La altura del topbar vuelve a coincidir con el contenido real.
   - El botón Documentos deja de verse flotante.
   - Los controles de zoom quedan como una fila estable.
══════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 166px !important;
    }

    body.certificados-publicos-page .topbar {
        height: var(--topbar-h) !important;
        min-height: var(--topbar-h) !important;
        padding: 7px 8px 9px !important;
        gap: 7px !important;
        grid-template-rows: 40px auto !important;
        align-content: start !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .topbar-left {
        height: 40px !important;
        margin: 0 !important;
        align-items: center !important;
    }

    body.certificados-publicos-page .brand-link {
        width: 138px !important;
        height: 40px !important;
        max-width: 55vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width: 138px !important;
        max-width: 138px !important;
        max-height: 40px !important;
    }

    body.certificados-publicos-page .tipo-chip {
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 8.8px !important;
        padding: 2px 8px !important;
        line-height: 1 !important;
    }

    body.certificados-publicos-page .topbar-right {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-rows: 30px !important;
        gap: 6px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 5px 6px !important;
        border-radius: 8px !important;
        font-size: 9.2px !important;
        line-height: 1 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: none !important;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column: 1 / -1 !important;
        display: inline-flex !important;
    }

    body.certificados-publicos-page .topbar-right #btnCopiarVerificacionTop {
        display: none !important;
    }

    body.certificados-publicos-page .app-body {
        padding-top: var(--topbar-h) !important;
    }

    body.certificados-publicos-page .sidebar {
        top: var(--topbar-h) !important;
        height: calc(100dvh - var(--topbar-h)) !important;
    }

    body.certificados-publicos-page .main-panel {
        height: calc(100dvh - var(--topbar-h)) !important;
    }

    body.certificados-publicos-page .main-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 7px !important;
        align-items: stretch !important;
        padding: 8px !important;
        min-height: 0 !important;
        background: #ffffff !important;
    }

    body.certificados-publicos-page .mh-info {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    body.certificados-publicos-page .mh-name {
        width: 100% !important;
        font-size: 12.2px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.certificados-publicos-page .mh-meta {
        width: 100% !important;
        display: block !important;
        font-size: 8.9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        width: 100% !important;
        max-width: none !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    body.certificados-publicos-page .viewer-tools {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    body.certificados-publicos-page .viewer-tool-btn,
    body.certificados-publicos-page .viewer-zoom-state {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    body.certificados-publicos-page .verification-strip {
        padding: 7px 8px !important;
    }

    body.certificados-publicos-page .preview-shell {
        padding: 8px 5px !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page {
        --topbar-h: 164px !important;
    }

    body.certificados-publicos-page .topbar {
        height: var(--topbar-h) !important;
        min-height: var(--topbar-h) !important;
    }

    body.certificados-publicos-page .topbar-right {
        grid-auto-rows: 29px !important;
        gap: 6px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        font-size: 8.8px !important;
        padding: 5px 5px !important;
    }

    body.certificados-publicos-page .main-head {
        gap: 6px !important;
        padding: 7px !important;
    }

    body.certificados-publicos-page .btn-mobile-docs,
    body.certificados-publicos-page .viewer-tool-btn,
    body.certificados-publicos-page .viewer-zoom-state {
        height: 29px !important;
        min-height: 29px !important;
    }
}

@media (max-width: 360px) {
    body.certificados-publicos-page {
        --topbar-h: 162px !important;
    }

    body.certificados-publicos-page .brand-link,
    body.certificados-publicos-page .brand-logo {
        width: 126px !important;
        max-width: 126px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        font-size: 8.2px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


/* IMPRESIÓN DESACTIVADA: el usuario solo debe descargar PDF. */
body.certificados-publicos-page #btnImprimirPdf,
body.certificados-publicos-page .btn-print,
body.certificados-publicos-page [data-action="print"] {
    display: none !important;
}

/* ============================================================
   REDISEÑO FINAL MÓVIL — SOLO DESCARGA + VISTA SIMÉTRICA
   - 4 botones superiores en 2x2: Descargar / Ver / LinkedIn / Compartir.
   - Nombre del estudiante en mayúsculas.
   - Documentos como panel inferior tipo app, no lateral.
   - Certificado más grande en móvil, priorizando ancho completo.
   - Mantiene zoom: menos, ajustar, más y pantalla completa.
============================================================ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page {
        --topbar-h: 138px !important;
    }

    body.certificados-publicos-page,
    body.certificados-publicos-page {
        overflow:hidden !important;
        background:#f4f7fb !important;
    }

    body.certificados-publicos-page .topbar {
        height:var(--topbar-h) !important;
        min-height:var(--topbar-h) !important;
        padding:8px 10px 10px !important;
        gap:8px !important;
        grid-template-rows:42px 68px !important;
        align-content:start !important;
        overflow:hidden !important;
    }

    body.certificados-publicos-page .topbar-left {
        height:42px !important;
        margin:0 !important;
    }

    body.certificados-publicos-page .brand-link {
        width:150px !important;
        height:42px !important;
        max-width:56vw !important;
    }

    body.certificados-publicos-page .brand-logo {
        width:150px !important;
        max-width:150px !important;
        max-height:42px !important;
    }

    body.certificados-publicos-page .tipo-chip {
        height:24px !important;
        padding:3px 10px !important;
        font-size:9px !important;
        border-radius:999px !important;
    }

    body.certificados-publicos-page .topbar-right {
        width:100% !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        grid-auto-rows:31px !important;
        gap:6px !important;
        overflow:hidden !important;
        align-items:stretch !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        width:100% !important;
        height:31px !important;
        min-height:31px !important;
        max-height:31px !important;
        padding:6px 8px !important;
        font-size:9.3px !important;
        font-weight:900 !important;
        line-height:1 !important;
        border-radius:10px !important;
        justify-content:center !important;
        text-align:center !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        transform:none !important;
        box-shadow:0 3px 10px rgba(15,23,42,.06) !important;
    }

    body.certificados-publicos-page .topbar-right #btnCopiarVerificacionTop {
        display:none !important;
    }

    body.certificados-publicos-page .topbar-right #btnCompartir {
        grid-column:auto !important;
        display:inline-flex !important;
    }

    body.certificados-publicos-page .app-body {
        padding-top:var(--topbar-h) !important;
        height:100dvh !important;
        overflow:hidden !important;
        background:#f4f7fb !important;
    }

    body.certificados-publicos-page .main-panel {
        height:calc(100dvh - var(--topbar-h)) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        background:#f4f7fb !important;
    }

    body.certificados-publicos-page .main-head {
        display:grid !important;
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto !important;
        gap:7px !important;
        padding:9px 9px 8px !important;
        background:#ffffff !important;
        border-bottom:1px solid #e3eaf5 !important;
        box-shadow:0 4px 16px rgba(15,23,42,.05) !important;
    }

    body.certificados-publicos-page .mh-name,
    body.certificados-publicos-page .sb-name,
    body.certificados-publicos-page .mobile-student-name {
        text-transform:uppercase !important;
    }

    body.certificados-publicos-page .mh-name {
        font-size:13.6px !important;
        letter-spacing:.01em !important;
        font-weight:900 !important;
        color:#111827 !important;
    }

    body.certificados-publicos-page .mh-meta {
        font-size:10px !important;
        color:#5f6f85 !important;
    }

    body.certificados-publicos-page .btn-mobile-docs {
        width:100% !important;
        max-width:none !important;
        height:34px !important;
        min-height:34px !important;
        border-radius:10px !important;
        font-size:11px !important;
        font-weight:900 !important;
        background:#ffffff !important;
        border:1px solid #bed3ee !important;
        color:#0b3f72 !important;
    }

    body.certificados-publicos-page .viewer-tools {
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:6px !important;
        padding:5px !important;
        margin:0 !important;
        background:#ffffff !important;
        border:1px solid #d8e4f2 !important;
        border-radius:12px !important;
        box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
    }

    body.certificados-publicos-page .viewer-tool-btn,
    body.certificados-publicos-page .viewer-zoom-state {
        width:100% !important;
        min-width:0 !important;
        height:32px !important;
        min-height:32px !important;
        border-radius:10px !important;
        font-size:11px !important;
        font-weight:900 !important;
    }

    body.certificados-publicos-page .mobile-doc-summary {
        margin:10px 9px 0 !important;
        border-radius:16px !important;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        padding:12px 13px !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
    }

    body.certificados-publicos-page .mobile-doc-title {
        font-size:13.2px !important;
        letter-spacing:.01em !important;
        text-transform:uppercase !important;
    }

    body.certificados-publicos-page .mobile-doc-status {
        font-size:9.8px !important;
        padding:5px 9px !important;
    }

    body.certificados-publicos-page .mobile-doc-meta {
        padding:10px 13px 8px !important;
        gap:5px !important;
    }

    body.certificados-publicos-page .mobile-meta-row:nth-child(2),
    body.certificados-publicos-page .mobile-meta-row:nth-child(3) {
        display:none !important;
    }

    body.certificados-publicos-page .mobile-meta-label,
    body.certificados-publicos-page .mobile-meta-value {
        font-size:10.8px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        display:grid !important;
        grid-template-columns:1fr !important;
        padding:0 13px 12px !important;
    }

    /* Documentos como bottom-sheet moderno en celular */
    body.certificados-publicos-page .sidebar {
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:auto !important;
        bottom:0 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:min(78dvh, 640px) !important;
        z-index:280 !important;
        border-radius:24px 24px 0 0 !important;
        border-right:0 !important;
        border-top:1px solid #dbe5f2 !important;
        box-shadow:0 -18px 44px rgba(15,23,42,.24) !important;
        transform:translate3d(0, 110%, 0) !important;
        transition:transform .24s ease-in-out !important;
        overflow:hidden !important;
    }

    body.certificados-publicos-page .sidebar::before {
        content:'';
        position:absolute;
        top:8px;
        left:50%;
        width:44px;
        height:5px;
        border-radius:999px;
        background:#cbd5e1;
        transform:translateX(-50%);
        z-index:2;
    }

    body.certificados-publicos-page.cert-docs-open .sidebar {
        transform:translate3d(0,0,0) !important;
    }

    body.certificados-publicos-page .sb-head {
        padding:22px 16px 12px !important;
        background:#ffffff !important;
    }

    body.certificados-publicos-page .sb-label {
        font-size:10.5px !important;
        letter-spacing:.12em !important;
    }

    body.certificados-publicos-page .sb-avatar {
        width:42px !important;
        height:42px !important;
        font-size:14px !important;
    }

    body.certificados-publicos-page .sb-name {
        font-size:13.5px !important;
        font-weight:900 !important;
        color:#111827 !important;
    }

    body.certificados-publicos-page .sb-count {
        font-size:11.5px !important;
    }

    body.certificados-publicos-page .sb-search-input {
        height:42px !important;
        border-radius:13px !important;
        font-size:13px !important;
    }

    body.certificados-publicos-page .sb-filter-row {
        gap:8px !important;
    }

    body.certificados-publicos-page .sb-filter {
        min-height:40px !important;
        border-radius:999px !important;
        font-size:12px !important;
        font-weight:900 !important;
    }

    body.certificados-publicos-page .sb-list {
        padding:12px 14px 24px !important;
    }

    body.certificados-publicos-page .cert-card {
        padding:13px 14px !important;
        margin-bottom:10px !important;
        border-radius:14px !important;
    }

    body.certificados-publicos-page .cc-title {
        font-size:13.5px !important;
        font-weight:900 !important;
        text-transform:uppercase !important;
    }

    body.certificados-publicos-page .cc-code,
    body.certificados-publicos-page .cc-date {
        font-size:11px !important;
    }

    /* Certificado y badge más grandes y centrados */
    body.certificados-publicos-page .preview-shell {
        flex:0 0 auto !important;
        width:100% !important;
        min-height:320px !important;
        padding:12px 6px 18px !important;
        align-items:flex-start !important;
        justify-content:center !important;
        overflow:visible !important;
        background:#f4f7fb !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-shell {
        min-height:455px !important;
        align-items:flex-start !important;
    }

    body.certificados-publicos-page .preview-viewport {
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        align-items:flex-start !important;
        justify-content:center !important;
        padding:0 !important;
    }

    body.certificados-publicos-page .preview-scale-box {
        margin:0 auto !important;
    }

    body.certificados-publicos-page .canvas-stage {
        box-shadow:0 12px 28px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06) !important;
    }
}

@media (max-width:575.98px) {
    body.certificados-publicos-page {
        --topbar-h:136px !important;
    }

    body.certificados-publicos-page .topbar {
        padding:7px 8px 9px !important;
        grid-template-rows:40px 64px !important;
        gap:7px !important;
    }

    body.certificados-publicos-page .brand-link,
    body.certificados-publicos-page .brand-logo {
        width:140px !important;
        max-width:140px !important;
    }

    body.certificados-publicos-page .topbar-right {
        grid-auto-rows:29px !important;
        gap:6px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        height:29px !important;
        min-height:29px !important;
        max-height:29px !important;
        font-size:8.7px !important;
        padding:5px 5px !important;
    }

    body.certificados-publicos-page .mh-name {
        font-size:13px !important;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        grid-template-columns:auto minmax(0,1fr) !important;
    }

    body.certificados-publicos-page .mobile-doc-status {
        display:none !important;
    }

    body.certificados-publicos-page .preview-shell {
        min-height:300px !important;
        padding-top:10px !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-shell {
        min-height:425px !important;
    }
}

@media (max-width:360px) {
    body.certificados-publicos-page {
        --topbar-h:134px !important;
    }

    body.certificados-publicos-page .brand-link,
    body.certificados-publicos-page .brand-logo {
        width:126px !important;
        max-width:126px !important;
    }

    body.certificados-publicos-page .topbar-right .btn {
        font-size:8.1px !important;
        padding-left:4px !important;
        padding-right:4px !important;
    }
}



/* ============================================================
   AJUSTE ESTABLE MÓVIL — CERTIFICADO/BADGE LEGIBLES
   - No toca PDF ni backend.
   - Mantiene zoom: -, Ajustar, + y pantalla completa.
   - Acerca el visor a la tarjeta y agranda el badge en móvil.
============================================================ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page .mobile-doc-summary {
        margin: 8px 8px 0 !important;
        border-radius: 15px !important;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        padding: 10px 12px !important;
        gap: 9px !important;
    }

    body.certificados-publicos-page .mobile-doc-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    body.certificados-publicos-page .mobile-doc-eyebrow {
        font-size: 9.5px !important;
        margin-bottom: 1px !important;
    }

    body.certificados-publicos-page .mobile-doc-title {
        font-size: 12.6px !important;
        line-height: 1.15 !important;
    }

    body.certificados-publicos-page .mobile-doc-status {
        display: none !important;
    }

    body.certificados-publicos-page .mobile-doc-meta {
        padding: 8px 12px 5px !important;
        gap: 4px !important;
    }

    body.certificados-publicos-page .mobile-doc-meta .mobile-meta-row:first-child {
        display: none !important;
    }

    body.certificados-publicos-page .mobile-meta-label,
    body.certificados-publicos-page .mobile-meta-value {
        font-size: 10.7px !important;
    }

    body.certificados-publicos-page .mobile-meta-code {
        max-width: 220px !important;
        padding: 3px 7px !important;
        font-size: 9.2px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 5px 12px 8px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions .btn {
        min-height: 31px !important;
        height: 31px !important;
        border-radius: 9px !important;
        font-size: 10.5px !important;
    }

    body.certificados-publicos-page .preview-shell {
        margin-top: 0 !important;
        padding: 6px 4px 14px !important;
        background-size: 22px 22px !important;
    }

    body.certificados-publicos-page .preview-viewport {
        padding-top: 0 !important;
    }

    body.certificados-publicos-page .is-cert-mode .preview-shell,
    body.certificados-publicos-page .is-cert-mode .preview-viewport {
        align-items: flex-start !important;
        justify-content: center !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-shell {
        flex: 0 0 auto !important;
        min-height: 520px !important;
        padding-top: 10px !important;
        padding-bottom: 28px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-viewport {
        min-height: 490px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.certificados-publicos-page .is-badge-mode .canvas-stage.badge {
        border-radius: 18px !important;
        box-shadow: 0 12px 28px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06) !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page .mobile-doc-summary {
        margin: 6px 6px 0 !important;
    }

    body.certificados-publicos-page .mobile-doc-banner {
        padding: 9px 10px !important;
    }

    body.certificados-publicos-page .mobile-doc-meta {
        padding: 7px 10px 4px !important;
    }

    body.certificados-publicos-page .mobile-summary-actions {
        padding: 5px 10px 7px !important;
    }

    body.certificados-publicos-page .preview-shell {
        padding-top: 4px !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-shell {
        min-height: 500px !important;
    }

    body.certificados-publicos-page .is-badge-mode .preview-viewport {
        min-height: 470px !important;
    }
}


/* ============================================================
   HOTFIX FINAL MÓVIL — BADGE SIN SCROLL + AGRANDAR CON DATOS
   - En vista normal, el badge no genera scroll innecesario.
   - En pantalla completa, se muestran nuevamente todos los datos
     del documento antes del badge/certificado.
   - No toca descarga PDF, backend, modelo ni controlador.
============================================================ */
@media (max-width: 991.98px) {
    /* Vista normal del badge: grande, pero controlado para que no obligue scroll largo */
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-shell {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
        padding: 6px 4px 10px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-viewport {
        width: 100% !important;
        height: 332px !important;
        min-height: 332px !important;
        max-height: 332px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-scale-box {
        margin: 0 auto !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .canvas-stage.badge {
        border-radius: 16px !important;
        box-shadow: 0 12px 28px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06) !important;
    }

    /* Pantalla completa: ahora sí debe verse la ficha de datos completa */
    body.certificados-publicos-page .main-panel:fullscreen,
    body.certificados-publicos-page .main-panel:-webkit-full-screen {
        width: 100vw !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #f4f7fb !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .main-head,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .main-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 16px rgba(15,23,42,.08) !important;
        border-bottom: 1px solid #e3eaf5 !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-summary,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-summary {
        display: block !important;
        margin: 8px 8px 0 !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-banner,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-banner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 9px !important;
        align-items: center !important;
        padding: 10px 12px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-status,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-status {
        display: inline-flex !important;
        grid-column: auto !important;
        justify-self: end !important;
        margin-top: 0 !important;
        font-size: 9.5px !important;
        padding: 5px 8px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-meta,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-meta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 9px 12px 6px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-meta .mobile-meta-row,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-meta .mobile-meta-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-meta-label,
    body.certificados-publicos-page .main-panel:fullscreen .mobile-meta-value,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-meta-label,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-meta-value {
        font-size: 10.5px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-meta-code,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-meta-code {
        max-width: 205px !important;
        font-size: 9px !important;
        padding: 3px 7px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-summary-actions,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-summary-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 5px 12px 8px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-summary-actions .btn,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-summary-actions .btn {
        min-height: 31px !important;
        height: 31px !important;
        border-radius: 9px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .preview-shell,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .preview-shell {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px 4px 14px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background: #f4f7fb !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .preview-viewport {
        width: 100% !important;
        height: calc(100dvh - 365px) !important;
        min-height: 300px !important;
        max-height: none !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page.is-badge-mode .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page.is-badge-mode .main-panel:-webkit-full-screen .preview-viewport {
        height: calc(100dvh - 350px) !important;
        min-height: 315px !important;
    }

    body.certificados-publicos-page.is-cert-mode .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page.is-cert-mode .main-panel:-webkit-full-screen .preview-viewport {
        height: calc(100dvh - 350px) !important;
        min-height: 260px !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-shell {
        height: 325px !important;
        min-height: 325px !important;
        max-height: 325px !important;
        padding-top: 5px !important;
        padding-bottom: 8px !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-viewport {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-banner,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-banner {
        grid-template-columns: auto minmax(0, 1fr) !important;
        padding: 9px 10px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-status,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-status {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        margin-top: 2px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .preview-viewport {
        height: calc(100dvh - 380px) !important;
        min-height: 260px !important;
    }

    body.certificados-publicos-page.is-badge-mode .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page.is-badge-mode .main-panel:-webkit-full-screen .preview-viewport {
        height: calc(100dvh - 370px) !important;
        min-height: 285px !important;
    }
}

@media (max-width: 575.98px) and (max-height: 720px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-shell {
        height: 295px !important;
        min-height: 295px !important;
        max-height: 295px !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-viewport {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .mobile-doc-meta,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .mobile-doc-meta {
        gap: 3px !important;
        padding-top: 7px !important;
        padding-bottom: 5px !important;
    }

    body.certificados-publicos-page .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page .main-panel:-webkit-full-screen .preview-viewport {
        height: calc(100dvh - 390px) !important;
        min-height: 235px !important;
    }
}



/* ============================================================
   HOTFIX MÓVIL — AGRANDAR CERTIFICADO SIN ESPACIO GRANDE
   - Solo afecta al modo pantalla completa del certificado.
   - Elimina el hueco entre la ficha de datos y el certificado.
   - No toca badge, descarga PDF, impresión ni backend.
============================================================ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page.is-cert-mode .main-panel:fullscreen .preview-shell,
    body.certificados-publicos-page.is-cert-mode .main-panel:-webkit-full-screen .preview-shell {
        padding: 4px 4px 10px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: visible !important;
        background: #f4f7fb !important;
    }

    body.certificados-publicos-page.is-cert-mode .main-panel:fullscreen .preview-viewport,
    body.certificados-publicos-page.is-cert-mode .main-panel:-webkit-full-screen .preview-viewport {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.certificados-publicos-page.is-cert-mode .main-panel:fullscreen .preview-scale-box,
    body.certificados-publicos-page.is-cert-mode .main-panel:-webkit-full-screen .preview-scale-box {
        margin: 0 auto !important;
    }
}


/* ============================================================
   HOTFIX PRODUCCIÓN — BADGE RESPONSIVE FINAL
   - Solo corrige el badge en móvil/tablet.
   - Respeta proporción 1:1 en pantallas anchas o bajas.
   - Evita cortes y scroll innecesario del badge.
   - No modifica certificado, PDF, botones ni backend.
============================================================ */
@media (max-width: 991.98px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) {
        --badge-shell-h: clamp(300px, calc(100dvh - 390px), 380px);
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-shell {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: var(--badge-shell-h) !important;
        min-height: var(--badge-shell-h) !important;
        max-height: var(--badge-shell-h) !important;
        padding: 6px 4px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-viewport {
        width: 100% !important;
        height: calc(var(--badge-shell-h) - 16px) !important;
        min-height: calc(var(--badge-shell-h) - 16px) !important;
        max-height: calc(var(--badge-shell-h) - 16px) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .preview-scale-box {
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) .canvas-stage.badge {
        border-radius: 16px !important;
        transform-origin: top left !important;
        box-shadow: 0 12px 28px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.06) !important;
    }
}

@media (max-width: 575.98px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) {
        --badge-shell-h: clamp(310px, calc(100dvh - 385px), 370px);
    }
}

@media (max-width: 575.98px) and (max-height: 690px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) {
        --badge-shell-h: 300px;
    }
}

@media (max-width: 360px) {
    body.certificados-publicos-page.is-badge-mode:not(.is-print-mode):not(.is-embed-mode) {
        --badge-shell-h: 285px;
    }
}



/* ============================================================
   DOCUMENTO REVOCADO — SELLO PROFESIONAL
   Estilo tipo sello: compacto, inclinado y sin marco invasivo.
============================================================ */
body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 510px;
    max-width: 62%;
    padding: 20px 38px;
    pointer-events: none;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 88px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(185, 28, 28, .44);
    background: rgba(255, 255, 255, .02);
    border: 9px solid rgba(185, 28, 28, .42);
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(-14deg);
    text-shadow: 0 1px 2px rgba(127, 29, 29, .16);
    box-shadow:
        inset 0 0 0 4px rgba(185, 28, 28, .10),
        0 2px 10px rgba(127, 29, 29, .08);
    mix-blend-mode: multiply;
}

body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark::before,
body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: rgba(185, 28, 28, .28);
    border-radius: 999px;
}

body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark::before {
    top: 8px;
}

body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark::after {
    bottom: 8px;
}

body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark {
    min-width: 252px;
    max-width: 76%;
    padding: 11px 22px;
    font-size: 39px;
    letter-spacing: 3px;
    color: rgba(185, 28, 28, .42);
    border-width: 5px;
    border-color: rgba(185, 28, 28, .40);
    border-radius: 9px;
    text-shadow: 0 1px 2px rgba(127, 29, 29, .12);
    box-shadow:
        inset 0 0 0 3px rgba(185, 28, 28, .09),
        0 2px 8px rgba(127, 29, 29, .06);
}

body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark::before,
body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark::after {
    left: 7px;
    right: 7px;
    height: 1px;
}

body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark::before {
    top: 5px;
}

body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark::after {
    bottom: 5px;
}

body.certificados-publicos-page .verification-badge--revoked {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

body.certificados-publicos-page .verification-badge--revoked .verification-badge__dot {
    background: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}

body.certificados-publicos-page .mobile-doc-status--revoked {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

body.certificados-publicos-page.is-revoked-mode .mobile-doc-summary {
    border-color: rgba(220, 38, 38, .22) !important;
}

body.certificados-publicos-page .revocation-public-box {
    margin: 10px 12px 0;
    padding: 11px 12px;
    border-radius: 14px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #7f1d1d;
    font-size: 12px;
    line-height: 1.45;
}

body.certificados-publicos-page .revocation-public-box__title {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #b91c1c;
}

body.certificados-publicos-page .revocation-public-box__text {
    font-weight: 700;
    margin-bottom: 6px;
}

body.certificados-publicos-page .revocation-public-box__meta {
    margin-top: 5px;
    color: #991b1b;
}

body.certificados-publicos-page.is-revoked-mode .btn-linkedin,
body.certificados-publicos-page.is-revoked-mode #btnLinkedin {
    opacity: .55;
}


body.certificados-publicos-page .desktop-revocation-panel {
    display:none;
}

@media (min-width: 992px) {
    body.certificados-publicos-page .desktop-revocation-panel {
        display:block;
        flex:0 0 auto;
        padding:10px 20px 12px;
        background:linear-gradient(90deg, #fff1f2 0%, #fff7f7 55%, #fff1f2 100%);
        border-bottom:1px solid #fecaca;
        color:#7f1d1d;
    }

    body.certificados-publicos-page .desktop-revocation-card {
        width:100%;
        border:1px solid #fca5a5;
        background:#fff5f5;
        border-radius:12px;
        padding:10px 14px;
        box-shadow:0 6px 18px rgba(185, 28, 28, .08);
    }

    body.certificados-publicos-page .desktop-revocation-title {
        display:flex;
        align-items:center;
        gap:8px;
        margin-bottom:5px;
        font-family:'Sora', Arial, sans-serif;
        font-size:12px;
        font-weight:900;
        letter-spacing:.09em;
        text-transform:uppercase;
        color:#991b1b;
    }

    body.certificados-publicos-page .desktop-revocation-text {
        font-size:12px;
        line-height:1.45;
        font-weight:700;
        color:#7f1d1d;
    }

    body.certificados-publicos-page .desktop-revocation-meta {
        display:flex;
        flex-wrap:wrap;
        gap:8px 18px;
        margin-top:6px;
        font-size:12px;
        line-height:1.45;
        color:#991b1b;
    }

    body.certificados-publicos-page .desktop-revocation-meta strong {
        color:#7f1d1d;
        font-weight:900;
    }
}


@media (max-width: 575.98px) {
    body.certificados-publicos-page .canvas-stage.documento-revocado .revoked-watermark {
        min-width: 420px;
        max-width: 68%;
        padding: 15px 28px;
        font-size: 72px;
        letter-spacing: 4px;
        border-width: 7px;
        border-radius: 10px;
    }

    body.certificados-publicos-page .canvas-stage.badge.documento-revocado .revoked-watermark {
        min-width: 222px;
        max-width: 78%;
        padding: 9px 16px;
        font-size: 33px;
        letter-spacing: 2px;
        border-width: 4px;
        border-radius: 8px;
    }

    body.certificados-publicos-page .revocation-public-box {
        margin: 8px 10px 0;
        padding: 10px;
        font-size: 11.5px;
    }
}


/* ============================================================
   DOCUMENTO REVOCADO — BLOQUEO DE ACCIONES PÚBLICAS
   Solo afecta al documento activo revocado. Los demás documentos
   del estudiante siguen navegables desde el listado.
============================================================ */
body.certificados-publicos-page .btn-revoked-disabled {
    background:#fee2e2 !important;
    color:#991b1b !important;
    border-color:#fecaca !important;
    cursor:not-allowed !important;
    box-shadow:none !important;
    pointer-events:none !important;
    justify-content:center;
}

body.certificados-publicos-page .cert-card.revoked {
    border-color:#fecaca !important;
    background:#fff7f7 !important;
}

body.certificados-publicos-page .cert-card.revoked::after {
    background:#dc2626 !important;
}

body.certificados-publicos-page .cc-status-revoked {
    display:inline-flex;
    align-items:center;
    margin-left:6px;
    padding:2px 6px;
    border-radius:999px;
    background:#fee2e2;
    color:#b91c1c;
    border:1px solid #fecaca;
    font-size:8.5px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    vertical-align:middle;
}

body.certificados-publicos-page .mobile-action-blocked {
    grid-column:1 / -1;
    width:100%;
    border:1px solid #fecaca;
    background:#fff1f2;
    color:#991b1b;
    border-radius:12px;
    padding:10px 12px;
    font-size:11px;
    font-weight:800;
    text-align:center;
    line-height:1.35;
}

body.certificados-publicos-page.is-revoked-mode #btnDescargarPdf,
body.certificados-publicos-page.is-revoked-mode #btnLinkedin,
body.certificados-publicos-page.is-revoked-mode #btnCompartir,
body.certificados-publicos-page.is-revoked-mode #btnCopiarVerificacionTop,
body.certificados-publicos-page.is-revoked-mode #btnCopiarEnlaceMobile {
    display:none !important;
}