/* ══════════════════════════════════════════════════════════
   CERTIFICADOS FATLIN AI — cert.css  v3-fix
   Canvas nativo: 1122 × 794 px  (A4 landscape exacto a 96 dpi)

   CORRECCIONES v3:
   · Diplomado: footer y QR ahora DENTRO del borde dorado/gris
   · dc-inn usa flex-column completo (sin absolute en footer)
   · Botones: móvil = 1 botón PNG | desktop = PNG + PDF + Imprimir
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══ WRAPPER ══ */
.cert-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cert-actions {
  text-align: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Botones: por defecto se muestran todos */
.btn-print {
  padding: 11px 26px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  transition: opacity .2s;
}
.btn-print:hover { opacity: .86; }

/* ── Lógica móvil / desktop ──
   En móvil: sólo el botón con data-mobile="true" es visible.
   En desktop: sólo los botones con data-desktop="true" son visibles.
   La clase .is-mobile se añade por JS al <div class="cert-actions">.
*/
.cert-actions.is-mobile   .btn-print[data-desktop] { display: none !important; }
.cert-actions.is-desktop  .btn-print[data-mobile]  { display: none !important; }

/* ══════════════════════════════════════════════════════════
   CERTIFICADO DE MÓDULO — 1122 × 794 px (A4 landscape)
   ══════════════════════════════════════════════════════════ */

.cert-modulo {
  width: 1122px;
  height: 794px;
  background: #ffffff;
  font-family: 'Georgia', serif;
  border: 0.5px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mod-accent-top {
  height: 8px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #1a3a6b, #cd7f32, #1a3a6b);
}

.mod-navy-bar {
  height: 34px;
  background: #1a3a6b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  flex-shrink: 0;
}

.mod-nav-txt {
  font-family: monospace;
  font-size: 9px;
  color: #f0c040;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
}

.mod-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 42px 14px;
  overflow: hidden;
}

.mod-inst-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.mod-logo-wrap { display: flex; align-items: center; gap: 10px; }
.mod-logo-svg  { width: 48px; height: 48px; flex-shrink: 0; }
.mod-inst-name { font-size: 11px; font-weight: 700; color: #1a3a6b; letter-spacing: .1em; text-transform: uppercase; font-family: sans-serif; }
.mod-inst-sub  { font-size: 8px; color: #64748b; letter-spacing: .06em; font-family: sans-serif; margin-top: 2px; }

.mod-doc-type { text-align: right; }
.mod-doc-lbl  { font-size: 7.5px; text-transform: uppercase; letter-spacing: .12em; color: #9ca3af; font-family: sans-serif; }
.mod-doc-val  { font-size: 10px; font-weight: 700; color: #1a3a6b; text-transform: uppercase; letter-spacing: .08em; font-family: sans-serif; }

.mod-center {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mod-certify-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; font-family: sans-serif; }
.mod-name { font-size: 48px; font-weight: 700; color: #0f172a; line-height: 1.1; font-family: 'Georgia', serif; }
.mod-idnum { font-size: 10px; color: #64748b; font-family: 'Courier New', monospace; letter-spacing: .08em; margin-top: -2px; }
.mod-badge { display: inline-block; padding: 5px 18px; border: 2px solid #cd7f32; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #cd7f32; font-family: sans-serif; }
.mod-desc { font-size: 11px; color: #374151; line-height: 1.65; max-width: 760px; margin: 0 auto; font-family: sans-serif; text-align: center; }

.pacie-row { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.pp { padding: 3px 10px; border-radius: 3px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-family: sans-serif; }
.pp-p { background: #ede9fe; color: #5b21b6; }
.pp-a { background: #dcfce7; color: #15803d; }
.pp-c { background: #fef9c3; color: #a16207; }
.pp-i { background: #fee2e2; color: #b91c1c; }
.pp-e { background: #dbeafe; color: #1d4ed8; }

.mod-metrics { display: flex; justify-content: center; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #f8fafc; }
.mod-metric { padding: 10px 24px; text-align: center; border-right: 1px solid #e2e8f0; }
.mod-metric:last-child { border-right: none; }
.mod-mval { font-size: 18px; font-weight: 700; color: #1a3a6b; font-family: sans-serif; line-height: 1; }
.mod-mlbl { font-size: 7.5px; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; font-family: sans-serif; margin-top: 3px; }

.mod-accent-bot { height: 5px; background: linear-gradient(90deg, transparent, #f0c040, transparent); flex-shrink: 0; }

.mod-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.mod-orgs { display: flex; gap: 14px; align-items: center; }
.mod-org { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #1a3a6b; font-family: sans-serif; }
.mod-org-div { width: 1px; height: 16px; background: #cbd5e1; }

.mod-right { display: flex; align-items: center; gap: 12px; }
.mod-date-lbl { font-size: 7px; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; font-family: sans-serif; }
.mod-date-val { font-size: 9px; font-weight: 600; color: #374151; font-family: sans-serif; }
.mod-cert-id { font-family: monospace; font-size: 7.5px; color: #9ca3af; }

.mod-qr {
  width: 72px; height: 72px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  position: relative;
  z-index: 10;
}
.mod-qr img { width: 100%; height: 100%; display: block; }

/* ══════════════════════════════════════════════════════════
   CERTIFICADO DIPLOMADO — 1122 × 794 px (A4 landscape exacto)

   ESTRUCTURA CORREGIDA:
   · cert-diplomado  → contenedor posición relative, overflow:hidden
   · ::before        → borde dorado  (inset: 22px)
   · ::after         → línea gris    (inset: 44px)
   · .dc-wm          → watermark  z-index:0
   · .dc-corn        → esquinas   z-index:5
   · .dc-inn         → flex-column z-index:10, padding respeta los bordes
                        contiene TODO el contenido incluyendo el footer
   ══════════════════════════════════════════════════════════ */

.cert-diplomado {
  width: 1122px;
  height: 794px;
  font-family: 'Georgia', serif;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* Marco dorado doble — z-index 1 (detrás de todo el contenido) */
.cert-diplomado::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 5px solid #c8920a;
  pointer-events: none;
  z-index: 1;
}
.cert-diplomado::after {
  content: '';
  position: absolute;
  inset: 44px;
  border: 1.5px solid rgba(26, 58, 107, .28);
  pointer-events: none;
  z-index: 1;
}

/* Watermark — detrás de todo */
.dc-wm {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: .022;
  pointer-events: none;
  z-index: 0;
}

/* ── Esquinas caladas — z-index 5 ── */
.dc-corn { position: absolute; z-index: 5; }

/* ══════════════════════════════════════════════════════════
   dc-inn: layout principal DENTRO de los bordes
   padding sincronizado con inset del marco gris (44px) + grosor (1.5px) + margen interior
   → 52px top/bottom/left/right garantiza que nada toca los bordes decorativos
   ══════════════════════════════════════════════════════════ */
.dc-inn {
  position: absolute;
  /* Ajuste clave: dejar espacio para borde dorado (22+5=27px) + línea gris (44+1.5=46px) + aire (8px) = 54px */
  inset: 54px 58px 54px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  overflow: hidden;
}

/* Spacers */
.dc-g1 { flex: 0 0 4px; }
.dc-g2 { flex: 0 0 4px; }
.dc-g3 { flex: 0 0 5px; }
.dc-g4 { flex: 0 0 5px; }
.dc-g5 { flex: 0 0 4px; }
.dc-g6 { flex: 1;       }  /* absorbe espacio sobrante antes footer */
.dc-g7 { flex: 0 0 0px; }

/* ── Header horizontal ── */
.dc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}
.dc-hdr-sep {
  width: 4px;
  height: 52px;
  background: linear-gradient(180deg, transparent, #c8920a 25%, #c8920a 75%, transparent);
  flex-shrink: 0;
  margin: 0 28px;
}

.dc-hdr-brand { display: flex; align-items: center; gap: 14px; flex: 1; }
.dc-hdr-brand-r { justify-content: flex-end; }

.dc-hdr-logo { width: 52px; height: 52px; object-fit: contain; display: block; flex-shrink: 0; }

.dc-hdr-text { display: flex; flex-direction: column; gap: 4px; }
.dc-hdr-text-r { text-align: right; }

.dc-hdr-name {
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1;
}
.dc-hdr-teal { color: #0bbdb6; }
.dc-hdr-blue {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 50%, #075985 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dc-hdr-sub {
  font-family: sans-serif;
  font-size: 8px;
  letter-spacing: 3px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 400;
  font-style: italic;
}

/* ── Divisores ── */
.dc-dv { display: flex; align-items: center; width: 100%; flex-shrink: 0; }
.dc-ln { flex: 1; height: 3px; background: linear-gradient(90deg, transparent, #c8920a 25%, #c8920a 75%, transparent); }
.dc-dm { width: 24px; height: 24px; background: #c8920a; transform: rotate(45deg); flex-shrink: 0; margin: 0 28px; }
.dc-ds { width: 11px; height: 11px; background: #1a3a6b; transform: rotate(45deg); flex-shrink: 0; margin: 0 8px; opacity: .4; }

.dc-dvstar { display: flex; align-items: center; width: 100%; flex-shrink: 0; }
.dc-dvstar .dc-ln { opacity: .6; height: 2px; }

.dc-dvthin { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(26,58,107,.14) 25%, rgba(26,58,107,.14) 75%, transparent); flex-shrink: 0; }

/* ── Tipo documento / título ── */
.dc-tb { text-align: center; flex-shrink: 0; width: 100%; }
.dc-doctype { display: none !important; }
.dc-mtitle { font-size: 28px; font-weight: 700; color: #0f2456; line-height: 1.1; letter-spacing: .01em; }
.dc-msub { font-size: 11px; color: #c8920a; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; margin-top: 4px; font-family: sans-serif; }

/* ── Nombre ── */
.dc-nb { text-align: center; flex-shrink: 0; width: 100%; }
.dc-clbl { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: #94a3b8; font-weight: 400; margin-bottom: 2px; font-family: sans-serif; }
.dc-cname { font-size: 38px; font-weight: 700; color: #0f2456; line-height: 1.05; }
.dc-cidnum { font-size: 10px; color: #64748b; font-family: 'Courier New', monospace; letter-spacing: .08em; margin-top: 1px; }
.dc-cdesc { font-size: 10px; color: #374151; line-height: 1.55; margin: 5px auto 0; max-width: 730px; font-weight: 400; text-align: center; font-family: sans-serif; }

/* ── Título propio ── */
.dc-tp { text-align: center; flex-shrink: 0; width: 100%; }
.dc-tptext { font-size: 21px; font-weight: 700; color: #1a3a6b; letter-spacing: .04em; text-transform: uppercase; font-family: sans-serif; }
.dc-tpbar { width: 220px; height: 5px; background: linear-gradient(90deg, #c8920a, #f0c040, #c8920a); border-radius: 4px; margin: 5px auto 0; }

/* ── Píldoras PACIE ── */
.dc-pacie-row { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; flex-shrink: 0; }
.dpp { padding: 4px 13px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-family: sans-serif; }
.dpp-p { background: #eff6ff; color: #1e40af; border: 2.5px solid #3b82f6; }
.dpp-a { background: #f0fdf4; color: #166534; border: 2.5px solid #22c55e; }
.dpp-c { background: #fefce8; color: #854d0e; border: 2.5px solid #eab308; }
.dpp-i { background: #fdf2f8; color: #831843; border: 2.5px solid #ec4899; }
.dpp-e { background: #f0fdfa; color: #134e4a; border: 2.5px solid #14b8a6; }

/* ── Métricas ── */
.dc-mets { display: flex; flex-shrink: 0; width: 100%; border: 1.5px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #e2e8f0; gap: 1.5px; }
.dc-met { flex: 1; padding: 7px 8px; text-align: center; background: #fff; }
.dc-mv { font-size: 14px; font-weight: 700; color: #0f2456; line-height: 1; font-family: sans-serif; }
.dc-ml { font-size: 7px; text-transform: uppercase; letter-spacing: .1em; color: #64748b; margin-top: 3px; font-weight: 400; font-family: sans-serif; }

/* ── Firmas ── */
.dc-sigwrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 100%; }
.dc-sigrow { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.dc-sig { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dc-svgw { height: 26px; display: flex; align-items: flex-end; }
.dc-sline { width: 140px; height: 2px; background: #1a3a6b; margin: 8px auto 0; }
.dc-sname { font-size: 11px; font-weight: 700; color: #0f2456; margin-top: 8px; text-align: center; font-family: sans-serif; }
.dc-srole { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: #64748b; font-weight: 400; margin-top: 3px; text-align: center; font-family: sans-serif; }

/* ── SHA-256 oculto ── */
.dc-huella-block { display: none !important; }

/* ══════════════════════════════════════════════════════════
   FOOTER DEL DIPLOMADO — AHORA DENTRO DEL BORDE DORADO
   · No es position:absolute respecto al .cert-diplomado
   · Es el último hijo de .dc-inn (flex-column)
   · Separado del contenido por .dc-g6 (flex:1 absorbe espacio)
   · Tiene un border-top dorado sutil como separador interno
   ══════════════════════════════════════════════════════════ */
.dc-foot {
  /* dentro del flujo flex de .dc-inn */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  padding: 6px 0 0;
  border-top: 1.5px solid rgba(200,146,10,0.35);
  /* sin background: hereda el blanco del .dc-inn / .cert-diplomado */
}
.dc-foot::before { display: none; }

/* orgs */
.dc-forgs { display: flex; align-items: center; }
.dc-forg { font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #1a3a6b; font-family: sans-serif; }
.dc-fsep { color: #c8920a; margin: 0 28px; font-size: 12px; }
.dc-fmid { text-align: center; }
.dc-fpl { font-size: 8px; letter-spacing: 6px; text-transform: uppercase; color: #94a3b8; font-family: sans-serif; }
.dc-fdt { font-size: 12px; font-weight: 700; color: #0f2456; margin-top: 6px; font-family: sans-serif; }
.dc-fid { font-size: 7px; color: rgba(15,36,86,.65); margin-top: 6px; letter-spacing: 1px; font-family: 'Courier New', monospace; }

/* ── QR dentro del footer ── */
.dc-fqr {
  background: #ffffff;
  border-radius: 5px;
  padding: 4px;
  width: 80px;
  height: 80px;
  border: 2px solid #c8920a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
.dc-fqr img { width: 100%; height: 100%; display: block; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════
   PREVIEW RESPONSIVO
   ══════════════════════════════════════════════════════════ */

.cert-modulo-preview {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  min-height: 60px;
}
.cert-modulo-preview .cert-modulo {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
}

.cert-diplomado-preview {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  min-height: 60px;
}
.cert-diplomado-preview .cert-diplomado {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */

@media print {
  .cert-actions { display: none !important; }

  .cert-modulo-preview,
  .cert-diplomado-preview {
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .cert-modulo {
    width: 1122px !important;
    height: 794px !important;
    transform: none !important;
    position: static !important;
  }

  .cert-diplomado {
    width: 1122px !important;
    height: 794px !important;
    transform: none !important;
    position: static !important;
  }

  body { background: none; margin: 0; padding: 0; }
  @page { margin: 0; size: A4 landscape; }
}