/* ============================================================
 * Carnet CTNET — Estilos pantalla + impresión
 * Formato horizontal 85 × 55 mm
 * ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #eef2f7;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #0d1f33;
}

/* ---------- Toolbar (solo pantalla) ---------- */
.carnet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #0d1f33;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.carnet-toolbar a,
.carnet-toolbar button {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s;
}
.carnet-toolbar a:hover,
.carnet-toolbar button:hover {
  background: rgba(255,255,255,.12);
}
.carnet-toolbar .btn-print {
  background: var(--color-primary, #00a8e8);
}
.carnet-toolbar .btn-print:hover {
  background: var(--color-dark, #0077b6);
}

/* ---------- Contenedor ---------- */
.carnet-viewport {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 24px;
}

/* ---------- Wrapper: reserva el espacio real escalado ---------- */
.carnet-wrapper {
  width: calc(85mm * 2);
  height: calc(55mm * 2);
  position: relative;
  flex-shrink: 0;
}

.carnet-wrapper .carnet {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(2);
  transform-origin: top left;
}

/* ---------- Tarjeta base ---------- */
.carnet {
  width: 85mm;
  height: 55mm;
  position: relative;
  overflow: hidden;
  border-radius: 3mm;
  box-shadow: 0 12px 32px rgba(13,31,51,.25);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 6.5pt;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- FRENTE ---------- */
.carnet.frente {
  background: #0d1f33;
  color: #fff;
}
.carnet .accent-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.2mm;
  background: var(--color-primary, #00a8e8);
}
.carnet .header {
  position: absolute;
  top: 2mm; left: 3mm; right: 3mm;
  height: 8mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1mm;
  border-bottom: 0.2mm solid #23374f;
}
.carnet.frente .logo-box {
  background: #fff;
  padding: 0.6mm 1.2mm;
  border-radius: 1.2mm;
  height: 7mm;
  display: flex;
  align-items: center;
}
.carnet .logo-box img {
  height: 5.8mm;
  width: auto;
  display: block;
}
.carnet .rif {
  font-size: 5pt;
  font-weight: bold;
  color: #96aac3;
  letter-spacing: 0.2mm;
}
.carnet .body {
  position: absolute;
  top: 11.5mm; left: 3mm; right: 3mm;
  height: 30mm;
}
.carnet .photo-block {
  position: absolute;
  top: 0; left: 0;
  width: 20mm;
}
.carnet .photo-frame {
  width: 20mm;
  height: 24mm;
  background: #fff;
  border-radius: 1.4mm;
  padding: 0.8mm;
  overflow: hidden;
}
.carnet .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 1mm;
  display: block;
}
.carnet .sin-foto {
  text-align: center;
  padding-top: 9mm;
  color: #aab4c3;
  font-size: 6pt;
}
.carnet .code-box {
  margin-top: 1.2mm;
  background: #142a44;
  border: 0.25mm solid var(--color-primary, #00a8e8);
  border-radius: 1.2mm;
  padding: 0.6mm 0.4mm;
  text-align: center;
  overflow: hidden;
}
.carnet .code-box .lbl {
  font-size: 4pt;
  color: #7891af;
  font-weight: bold;
  letter-spacing: 0.15mm;
}
.carnet .code-box .val {
  font-family: "Courier New", monospace;
  font-size: 5.4pt;
  font-weight: bold;
  color: #fff;
  letter-spacing: -0.1mm;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: block;
  line-height: 1.2;
}
.carnet .info-block {
  position: absolute;
  top: 0.5mm; left: 22.5mm; right: 0;
}
.carnet .name {
  font-size: 10pt;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 1mm;
  color: #fff;
}
.carnet .ci {
  font-size: 6.5pt;
  color: #c8d7eb;
  margin-bottom: 1.2mm;
}
.carnet .accent-line {
  width: 9mm;
  height: 0.5mm;
  background: var(--color-primary, #00a8e8);
  border-radius: 0.3mm;
  margin: 1.2mm 0;
}
.carnet .cargo {
  font-size: 7pt;
  font-weight: bold;
  color: #fff;
  line-height: 1.15;
}
.carnet .depto {
  font-size: 5.8pt;
  color: #c8d7eb;
  margin-top: 0.8mm;
}
.carnet .grid {
  margin-top: 2mm;
  display: flex;
  gap: 4mm;
}
.carnet .grid .cell { flex: 1; }
.carnet .grid .lbl {
  font-size: 4.5pt;
  color: #7891af;
  font-weight: bold;
  letter-spacing: 0.15mm;
  margin-bottom: 0.4mm;
}
.carnet .grid .val {
  font-size: 6.2pt;
  color: #c8d7eb;
  font-weight: bold;
}
.carnet .tagline {
  position: absolute;
  bottom: 8mm; left: 25.5mm; right: 3mm;
  font-size: 5.6pt;
  font-style: italic;
  color: #7891af;
}
.carnet .footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6mm;
  background: #07111e;
  border-top: 0.35mm solid var(--color-primary, #00a8e8);
  padding: 0.8mm 3mm;
  text-align: center;
}
.carnet .footer .contact {
  font-size: 6pt;
  font-weight: bold;
  color: #dcebfa;
  letter-spacing: 0.1mm;
}
.carnet .footer .legal {
  font-size: 4pt;
  color: #8ca5be;
  margin-top: 0.4mm;
}

/* ---------- REVERSO ---------- */
.carnet.reverso {
  background: #f8fafd;
  color: #0d1f33;
}
.carnet.reverso .header {
  position: absolute;
  top: 2mm; left: 3mm; right: 3mm;
  height: 7mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.15mm solid #dce4ee;
  padding-bottom: 0;
}
.carnet.reverso .logo-rev {
  height: 5mm;
  width: auto;
}
.carnet.reverso .header .title {
  font-size: 5.2pt;
  font-weight: bold;
  color: var(--color-dark, #0077b6);
  letter-spacing: 0.15mm;
}
.carnet.reverso .layout {
  position: absolute;
  top: 10.5mm; left: 3mm; right: 3mm; bottom: 7.5mm;
  display: flex;
  gap: 2.5mm;
}
.carnet.reverso .col-qr {
  width: 22mm;
  flex-shrink: 0;
}
.carnet.reverso .qr-frame {
  width: 22mm;
  height: 22mm;
  background: #fff;
  border: 0.3mm solid var(--color-primary, #00a8e8);
  border-radius: 1.6mm;
  padding: 1.3mm;
}
.carnet.reverso .qr-frame img {
  width: 100%;
  height: 100%;
  display: block;
}
.carnet.reverso .qr-caption {
  margin-top: 0.8mm;
  text-align: center;
  font-size: 5pt;
  color: var(--color-dark, #0077b6);
  font-weight: bold;
}
.carnet.reverso .col-data {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.carnet.reverso .folio-lbl {
  font-size: 4.8pt;
  color: #7891af;
  font-weight: bold;
  letter-spacing: 0.15mm;
}
.carnet.reverso .folio-val {
  font-family: "Courier New", monospace;
  font-size: 7pt;
  font-weight: bold;
  color: #0d1f33;
  margin-bottom: 1.4mm;
}
.carnet.reverso .terms {
  background: #fff;
  border-radius: 1mm;
  padding: 1.4mm 2mm 1.4mm 2.6mm;
  position: relative;
  flex: 1;
}
.carnet.reverso .terms::before {
  content: '';
  position: absolute;
  left: 0.6mm; top: 0.8mm; bottom: 0.8mm;
  width: 0.5mm;
  border-radius: 0.3mm;
  background: var(--color-primary, #00a8e8);
}
.carnet.reverso .terms .title {
  font-size: 6pt;
  font-weight: bold;
  color: #0d1f33;
  margin-bottom: 0.3mm;
}
.carnet.reverso .terms .subtitle {
  font-size: 4.5pt;
  font-style: italic;
  color: #7891af;
  margin-bottom: 0.8mm;
  padding-bottom: 0.8mm;
  border-bottom: 0.15mm solid #dce4ee;
}
.carnet.reverso .terms ol {
  list-style: none;
  font-size: 4.9pt;
  color: #324155;
  line-height: 1.35;
  padding-left: 0;
  margin: 0;
}
.carnet.reverso .terms ol li {
  margin-bottom: 0.5mm;
}
.carnet.reverso .firma {
  margin-top: 1.4mm;
  background: #fff;
  border: 0.2mm solid var(--color-primary, #00a8e8);
  border-radius: 0.8mm;
  padding: 0.6mm 1.4mm 0.8mm 2.2mm;
  position: relative;
}
.carnet.reverso .firma::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.6mm;
  background: var(--color-primary, #00a8e8);
  border-radius: 0.8mm 0 0 0.8mm;
}
.carnet.reverso .firma .title {
  font-size: 5pt;
  font-weight: bold;
  color: var(--color-dark, #0077b6);
  letter-spacing: 0.1mm;
}
.carnet.reverso .firma .hash {
  font-family: "Courier New", monospace;
  font-size: 4pt;
  color: #465569;
  letter-spacing: -0.05mm;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: block;
  line-height: 1.1;
}
.carnet.reverso .footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6.5mm;
  background: #0d1f33;
  border-top: 0.35mm solid var(--color-primary, #00a8e8);
  display: flex;
}
.carnet.reverso .footer .cell {
  flex: 1;
  text-align: center;
  padding: 1mm 0.6mm;
}
.carnet.reverso .footer .cell + .cell {
  border-left: 0.15mm solid #283c55;
}
.carnet.reverso .footer .lbl {
  font-size: 4pt;
  color: #7891af;
  font-weight: bold;
  letter-spacing: 0.2mm;
  margin-bottom: 0.3mm;
}
.carnet.reverso .footer .val {
  font-size: 6pt;
  color: #fff;
  font-weight: bold;
}

/* ============================================================
 * MARCA DE AGUA — logo de la empresa en ambas caras
 * ============================================================ */
.carnet .watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.carnet .watermark img {
  width: 68%;
  max-width: none;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Frente (fondo azul marino): silueta BLANCA al 6% */
.carnet.frente .watermark img {
  filter: brightness(0) invert(1);
  opacity: 0.06;
}

/* Reverso (fondo claro): silueta OSCURA al 4.5% */
.carnet.reverso .watermark img {
  filter: brightness(0);
  opacity: 0.045;
}

/* El contenido real por encima de la marca de agua.
 * IMPORTANTE: solo z-index. NO cambiar 'position'. */
.carnet .accent-top,
.carnet .header,
.carnet .body,
.carnet .footer,
.carnet.reverso .layout {
  z-index: 2;
}

/* ============================================================
 * IMPRESIÓN — carnets 85 × 55 mm sobre hoja CARTA (216 × 279 mm)
 * Varios carnets por página para recortar.
 * ============================================================ */
@media print {
  /* Hoja Carta. El margen se controla con el padding del viewport
   * para dejar área segura de impresión. */
  @page {
    size: Letter portrait;
    margin: 0;
  }

  html,
  body {
    background: #fff;
    margin: 0;
    padding: 0;
    width: 216mm;
  }

  .no-print { display: none !important; }

  /* Contenedor que fluye: coloca los carnets en filas dentro de la hoja */
  .carnet-viewport {
    display: block;
    width: 216mm;
    min-height: 279mm;
    padding: 10mm;          /* área segura / margen de impresión */
    margin: 0;
    gap: 0;
  }

  /* Cada wrapper es su tamaño real y fluye en línea dentro de la hoja.
   * Se evita partir una tarjeta entre páginas. */
  .carnet-wrapper {
    display: inline-block;
    vertical-align: top;
    width: 85mm;
    height: 55mm;
    margin: 0 4mm 4mm 0;    /* separación entre carnets (espacio de corte) */
    position: relative;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Sin la escala de pantalla: tamaño real exacto */
  .carnet-wrapper .carnet {
    position: static;
    transform: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .carnet .watermark img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}