/* ==========================================================================
   CI ANDINA SUSTENTABLE SAS - AUTHENTIC OFFICIAL PAPER DOCUMENT STYLES
   Exact reproduction of Document 02596 & Official ISCC EU Autodeclaration
   ========================================================================== */

.cert-sample-badge {
  position: absolute;
  top: 14px;
  right: -34px;
  z-index: 6;
  width: 140px;
  padding: 5px 0;
  background: #F59E0B;
  color: #1B1206;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(38deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Marca de agua repetida sobre TODO el documento de muestra, para que no se
   pueda recortar y hacerlo pasar por un certificado real */
.cert-doc-sample {
  position: relative;
}

.cert-doc-sample::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cdefs%3E%3Cpattern id='w' width='280' height='280' patternUnits='userSpaceOnUse' patternTransform='rotate(-28)'%3E%3Ctext x='-40' y='70' font-family='Arial, sans-serif' font-size='30' font-weight='800' letter-spacing='2' fill='rgba(220,38,38,0.16)'%3EMUESTRA%3C/text%3E%3Ctext x='-40' y='220' font-family='Arial, sans-serif' font-size='30' font-weight='800' letter-spacing='2' fill='rgba(220,38,38,0.16)'%3EMUESTRA%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23w)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.paper-sheet-preview {
  background: #FFFFFF !important;
  color: #1E293B !important;
  font-family: 'Segoe UI', Arial, sans-serif;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 38px 44px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

/* IMPRIMIR / GUARDAR COMO PDF: usa la función nativa del navegador en vez de
   dibujar un lienzo (más confiable, no depende de configuraciones de canvas
   ni de leer estilos de fuentes externas). El documento se mueve a este
   contenedor justo antes de imprimir (ver main.js), y todo lo demás se
   oculta con display:none para que no deje páginas en blanco de por medio. */
#print_root {
  display: none;
}

@media print {
  /* Margen 0 en la hoja: sin esto Chrome/Brave dibujan su propio encabezado
     y pie de pagina (fecha, titulo de la pestaña, URL) en el espacio del
     margen, aunque el usuario nunca haya marcado esa opcion a mano. */
  @page {
    margin: 0;
  }

  body.printing-cert > *,
  body.printing-iscc > * {
    display: none !important;
  }

  body.printing-cert #print_root,
  body.printing-iscc #print_root {
    display: block !important;
  }

  #print_root .paper-sheet-preview {
    box-shadow: none;
    max-width: none;
  }

  body.printing-iscc #iscc_page_1,
  body.printing-iscc #iscc_page_2 {
    display: block !important;
    page-break-after: always;
  }
}

.doc-open-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-pill, 9999px);
  color: #4ADE80;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

/* El documento oficial no se reflota (mantiene fidelidad legal). En pantallas
   angostas se muestra como un asomo pequeño, enmarcado como un visor real
   de documento y desvanecido hacia abajo, en vez del rectángulo blanco
   completo puesto ahí sin más; tocar "Ver documento completo" lo abre entero */
@media (max-width: 600px) {
  .doc-scroll-wrap {
    position: relative;
    max-height: 260px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(74, 222, 128, 0.18);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
    background: #0A120E;
    /* Fuerza a que el recorte se respete de verdad: algunos navegadores móviles
       no aplican overflow:hidden sobre un hijo con transform:scale si el
       contenedor no tiene su propio contexto de composición, y dejan asomar
       el pie de página verde del documento por encima del header flotante. */
    contain: paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .doc-scroll-wrap::before {
    content: attr(data-title);
    display: block;
    padding: 10px 14px;
    background: #0A120E;
    color: #64748B;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  }
  .doc-scroll-wrap .paper-sheet-preview {
    width: 580px;
    transform: scale(0.52);
    transform-origin: top left;
    pointer-events: none;
    box-shadow: none;
  }
  .doc-scroll-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: linear-gradient(to bottom, rgba(10, 18, 14, 0) 0%, #0A120E 80%);
    pointer-events: none;
  }
  .doc-open-btn {
    display: flex;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
  }

  /* Mientras se genera el PDF, se anula el achicado del asomo: html2canvas
     no captura bien un elemento escalado dentro de un contenedor recortado */
  .doc-scroll-wrap.pdf-export {
    max-height: none;
    overflow: visible;
    contain: none;
    transform: none;
    -webkit-transform: none;
  }
  .doc-scroll-wrap.pdf-export::before,
  .doc-scroll-wrap.pdf-export::after {
    content: none;
  }
  .doc-scroll-wrap.pdf-export .paper-sheet-preview {
    transform: none;
  }
}

/* VISOR DE PANTALLA COMPLETA */
.doc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(4, 8, 6, 0.96);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 70px 16px 40px;
}

.doc-modal.active {
  display: block;
}

.doc-modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 23, 18, 0.95);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.doc-modal-body {
  max-width: 100%;
}

.doc-modal-body .doc-scroll-wrap {
  overflow: visible !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.doc-modal-body .doc-scroll-wrap::before,
.doc-modal-body .doc-scroll-wrap::after {
  content: none !important;
}

.doc-modal-body .doc-open-btn {
  display: none !important;
}

.doc-modal-body .paper-sheet-preview {
  width: 580px !important;
  transform-origin: top left;
  pointer-events: auto !important;
  margin: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Fidelidad del documento: los encabezados del certificado y la autodeclaración
   deben mantener la tipografía original, no la serif editorial del resto del sitio */
.paper-sheet-preview h1,
.paper-sheet-preview h2,
.paper-sheet-preview h3,
.paper-sheet-preview h4,
.paper-sheet-preview h5,
.paper-sheet-preview h6 {
  font-family: 'Segoe UI', Arial, sans-serif !important;
}

/* Botones dentro del documento de papel (Alto Contraste) */
.paper-sheet-preview .btn-secondary {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #1E293B !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.paper-sheet-preview .btn-secondary:hover {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.iscc-doc-footer-meta .btn-secondary {
  background: #064E3B !important;
  color: #A7F3D0 !important;
  border: 1px solid #059669 !important;
}

.iscc-doc-footer-meta .btn-secondary:hover {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   1. CERTIFICADO 02596 OFFICIAL STYLES
   ------------------------------------------------------------- */
.cert-02596-doc {
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  border-radius: 2px !important;
  z-index: 0;
}

.cert-02596-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.cert-02596-logo {
  height: 58px;
  width: auto;
}

.cert-02596-title-block {
  text-align: center;
}

.cert-02596-title-block h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A !important;
  margin: 0 0 2px 0;
  text-transform: none;
}

.cert-02596-title-block h4 {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B !important;
  margin: 0 0 4px 0;
}

.cert-02596-title-block .cert-recoleccion-num {
  font-size: 15px;
  font-weight: 900;
  color: #0F172A !important;
}

.cert-02596-stamp-iscc {
  height: 64px;
  width: auto;
}

.cert-02596-legal-body {
  font-size: 11.5px;
  line-height: 1.55;
  color: #1E293B !important;
  text-align: justify;
  margin-bottom: 16px;
}

.cert-02596-table-bar {
  background: #D9D9D9;
  color: #0F172A;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  padding: 4px 8px;
}

.cert-02596-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 12px;
}

.cert-02596-table td {
  border: none;
  padding: 3px 4px;
  color: #1E293B !important;
}

.cert-02596-table td.td-label {
  font-weight: 800;
  width: 32%;
  color: #0F172A !important;
}

.cert-02596-table td.td-val {
  font-weight: 500;
  color: #0F172A !important;
}

.cert-02596-bottom-note {
  font-size: 10.5px;
  color: #475569 !important;
  text-align: center;
  margin: 14px 0 20px 0;
}

.cert-02596-signature-block {
  margin-bottom: 24px;
}

.cert-02596-signature-img {
  height: 48px;
  display: block;
  margin-bottom: 4px;
}

.cert-02596-signer-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A !important;
}

.cert-02596-signer-role {
  font-size: 11.5px;
  color: #475569 !important;
}

.cert-02596-footer-img {
  display: block;
  width: calc(100% + 88px);
  max-width: none;
  height: auto;
  margin: 14px -44px -38px;
  border-radius: 0 0 6px 6px;
}

.cert-02596-watermark-bg {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

/* -------------------------------------------------------------
   2. AUTODECLARACIÓN ISCC EU 2-PAGE 3D FLIP VIEWER STYLES
   ------------------------------------------------------------- */
.iscc-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(14, 23, 18, 0.95);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  max-width: 820px;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-md);
}

.iscc-tab-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.iscc-nav-page-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.iscc-nav-page-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border-color: rgba(74, 222, 128, 0.35);
}

.iscc-nav-page-btn.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border-color: #34D399;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.iscc-page-indicator-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: #4ADE80;
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.iscc-page-container {
  perspective: 1500px;
  min-height: 750px;
  position: relative;
  overflow: hidden;
}

.iscc-official-page {
  display: none;
  position: relative;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.iscc-official-page.active-page {
  display: block;
}

.iscc-official-doc {
  font-size: 11px;
  line-height: 1.45;
  color: #000000 !important;
}

.iscc-top-dark-bar {
  background: #52525B;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
}

.iscc-sub-notice {
  font-size: 11px;
  font-weight: 700;
  color: #000000 !important;
  margin-bottom: 6px;
}

.iscc-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 10.5px;
}

.iscc-info-table td {
  border: 1px solid #9CA3AF;
  padding: 4px 8px;
  color: #000000 !important;
}

.iscc-info-table td.iscc-td-left {
  width: 48%;
  background: #F9FAFB;
  font-weight: 500;
}

.iscc-info-table td.iscc-td-right {
  width: 52%;
  font-weight: 600;
}

.iscc-statement-intro {
  font-size: 11px;
  line-height: 1.5;
  margin: 14px 0 10px 0;
  text-align: justify;
}

.iscc-ol-statements {
  padding-left: 18px;
  margin: 0 0 16px 0;
}

.iscc-ol-statements li {
  margin-bottom: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: justify;
}

.iscc-doc-footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #D1D5DB;
  padding-top: 10px;
  margin-top: 16px;
  font-size: 10px;
  color: #4B5563 !important;
}

.iscc-signature-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 11px;
  font-weight: 600;
}

.iscc-canvas-sign-area {
  border: 1px dashed #64748B;
  background: #F8FAFC;
  height: 80px;
  margin-top: 6px;
  border-radius: 4px;
  position: relative;
}

.iscc-footnotes {
  font-size: 8.5px;
  line-height: 1.35;
  color: #4B5563 !important;
  margin-top: 14px;
  border-top: 1px solid #E5E7EB;
  padding-top: 8px;
}