.assinatura-area {
    position: absolute;
    left: 58%;
    bottom: 3.5mm;
    transform: translateX(-50%);
    width: 28mm;
    display: flex;
    align-items: center;
    padding: 0mm;
  }

  .assinatura-img {
    max-width: 100%;
    object-fit: contain;
  }

  .assinatura-placeholder {
    font-size: 1.7mm;
    color: #555;
    letter-spacing: .15mm;
  }

  .carteira .validacao {
    position: absolute;
    left: 2.8mm;
    top: 49.1mm;
    font-size: 1.8mm;
    line-height: 1.1;
    color: #2d4040;
    font-weight: 500;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .1mm;
    opacity: .85;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  }

  .carteira .validacao span {
    font-weight: 600;
    color: #000000;
    font-size: 1.8mm;
  }

  .carteira .codigo-validador-wrap {
    position: absolute;
    right: 3.5mm;
    bottom: 22mm;
    width: 17mm;
    text-align: center;
  }

  /* o texto pequeno acima */
  .carteira .label-codigo {
    left: 29.8mm;
    top: 21.8mm;
    font-size: 1.5mm;
    font-weight: 600;
    white-space: normal !important;
    line-height: 1.1;
    overflow: visible;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
  }

  .carteira .codigo-validador {
    font-size: 1.7mm;
    font-weight: 700;
    color: #000;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0.1mm;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .carteira-wrap {
    --zoom: 1.6;
    padding: 16px;
  }

  .carteira-zoom {
    zoom: 1.02;
  }

  .carteira.frente {
    --w: 85.6mm;
    --h: 54mm;
    position: relative;
    width: var(--w);
    height: var(--h);
    background: url(/assets/carteira1.jpg) no-repeat center/100% 100%;
    border-radius: 2.5mm;
    overflow: hidden;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
  }

  .carteira .lbl {
    position: absolute;
    font-weight: 700;
    color: #1b2d2d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 2.7mm;
    letter-spacing: .2mm;
  }

  .carteira .val {
    position: absolute;
    font-weight: 600;
    color: #0b2b2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 2.2mm;
    line-height: 1.05;
    max-width: 44mm;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .carteira .foto {
    position: absolute;
    left: 1.2mm;
    top: 18.2mm;
    width: 27.0mm;
    height: 28.0mm;
    background: #fff;
    border-radius: 2mm;
    overflow: hidden;
  }

  .carteira .foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carteira .qr {
    position: absolute;
    right: 3.2mm;
    bottom: 7mm;
    width: 16.5mm;
    height: 16.5mm;
    top: 124px;
    background: #fff;
    border-radius: 2mm;
    overflow: hidden;
  }

  .carteira .qr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carteira .lbl.nome {
    left: 37.8mm;
    top: 20.6mm;
  }

  .carteira .val.nome {
    left: 29.8mm;
    top: 22.8mm;
    max-width: 45mm;
    font-family: system-ui;
    font-size: 2.2mm;
    font-weight: 600;
    color: #0b2b2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .carteira .val.nome.long {
    left: 29.8mm;
    top: 21.8mm;
    width: 45mm;
    font-family: system-ui;
    font-size: 2.2mm;
    font-weight: 600;
    color: #0b2b2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.1;
    overflow: visible;
  }

  .carteira .lbl.cargo {
    left: 37.8mm;
    top: 28.4mm;
  }

  .carteira .val.cargo {
    left: 29.8mm;
    top: 29.6mm;
    max-width: 45mm;
    font-family: system-ui;
  }

  .carteira .lbl.matricula {
    left: 37.8mm;
    top: 36.6mm;
  }

  .carteira .val.matricula {
    left: 29.8mm;
    top: 37.8mm;
    max-width: 45mm;
    font-family: system-ui;
  }

  .carteira .assinatura {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8.6mm;
    font-size: 2.5mm;
    color: #6d7a7a;
    letter-spacing: .15mm;
  }

  @media print {
    .carteira-wrap {
      --zoom: 1;
      padding: 0;
    }

    body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }



  .carteira-wrap {
    --zoom: 1.6;
    display: grid;
    gap: 8px;
    justify-content: center;
    align-items: start;
    padding: 16px;
  }

  #carteira-wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #carteira-wrap .carteira {
    display: inline-block;
    margin-right: 12px;
  }

  /* Indicação visual opcional */
  #carteira-wrap[data-hint="true"] {
    background: linear-gradient(to right, #ffffff00 70%, #ffffff 100%);
  }

  @media (max-width: 768px) {
    .carteira-wrap {
      --zoom: 1.6;
      /* display: grid; */
      gap: 8px;
      justify-content: center;
      align-items: start;
      padding: 16px;
    }

    #carteira-wrap {
      overflow-x: auto;
      overflow-y: hidden;
    }

    #carteira-wrap .carteira {
      display: inline-block;
      margin-right: 12px;
    }

    /* Indicação visual opcional */
    #carteira-wrap[data-hint="true"] {
      background: linear-gradient(to right, #ffffff00 70%, #ffffff 100%);
    }
  }

  .carteira {
    --w: 85.6mm;
    --h: 54mm;
    width: var(--w);
    height: var(--h);
    position: relative;
    border-radius: 2.5mm;
    overflow: hidden;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    /* transform: scale(var(--zoom));
    transform-origin: top left; */
  }

  .carteira.frente {
    background-image: url(/assets/carteira1.jpg);
  }

  .carteira.verso {
    background-image: url(/assets/carteira2.jpg);
  }

  .carteira.verso2 {
    background-image: url(/assets/carteira3.jpg);
  }

  .carteira .lbl {
    position: absolute;
    font-size: 2.2mm;
    color: #1b2d2d;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  }

  .carteira .val {
    position: absolute;
    font-size: 2.2mm;
    color: #0b2b2b;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  }

  .lbl.posse {
    left: 6mm;
    top: 22mm;
  }

  .val.posse {
    left: 7mm;
    top: 24mm;
  }

  .lbl.tipo-sangue {
    left: 51mm;
    top: 22mm;
  }

  .val.tipo-sangue {
    left: 53mm;
    top: 24mm;
  }

  .lbl.cpf {
    left: 6mm;
    top: 28mm;
  }

  .val.cpf {
    left: 7mm;
    top: 32mm;
  }

  .lbl.nascimento {
    left: 51mm;
    top: 28mm;
  }

  .val.nascimento {
    left: 53mm;
    top: 32mm;
  }

  .lbl.posse2 {
    left: 6mm;
    top: 22mm;
  }

  .val.posse2 {
    left: 7mm;
    top: 26mm;
  }

  .lbl.tipo-sangue2 {
    left: 51mm;
    top: 22mm;
  }

  .val.tipo-sangue2 {
    left: 53mm;
    top: 26mm;
  }

  .lbl.cpf2 {
    left: 6mm;
    top: 28mm;
  }

  .val.cpf2 {
    left: 7mm;
    top: 34mm;
  }

  .lbl.nascimento2 {
    left: 51mm;
    top: 28mm;
  }

  .val.nascimento2 {
    left: 53mm;
    top: 34mm;
  }

  .assinatura {
    position: absolute;
    left: 50%;
    bottom: 6mm;
    transform: translateX(-50%);
    font-size: 2mm;
    font-weight: 600;
    color: #0b2b2b;
    letter-spacing: .15mm;
    text-align: center;
  }

  @media print {
    .carteira-wrap {
      flex-direction: column !important;
      /* align-items: center !important; */
      justify-content: flex-start !important;
      gap: 2mm !important;
      transform: none !important;
      padding: 0 !important;
      margin: 0 auto;
    }

    .carteira {
      transform: none !important;
      width: 85.6mm !important;
      height: 54mm !important;
      box-shadow: none !important;
      page-break-inside: avoid !important;
    }

    body {
      background: white !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }

  @media print {

    html.rotating-print-verso .carteira.verso,
    html.rotating-print-verso .carteira.verso2 {
      -webkit-transform: rotate(180deg) !important;
      -ms-transform: rotate(180deg) !important;
      transform: rotate(180deg) !important;
      -webkit-transform-origin: 50% 50% !important;
      transform-origin: 50% 50% !important;
      backface-visibility: visible !important;
      transform-style: preserve-3d !important;
      display: block !important;
    }
  }

  @media print {

    hr,
    .divider,
    .separator,
    .linha,
    .line {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    .carteira,
    .carteira * {
      box-shadow: none !important;
    }

    .carteira-wrap,
    #carteira-wrap {
      background: #ffffff !important;
    }

    .carteira {
      border: none !important;
    }
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


 @media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}