/* ==========================================================
   TECNOTEXTIL — GERADOR DE LIVRETO
   ========================================================== */


/* ==========================================================
   BOTÃO DO CABEÇALHO
   ========================================================== */

.booklet-launch-button {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    43px;

  height:
    43px;

  padding:
    8px;

  border:
    1px solid #c9ddeb;

  border-radius:
    12px;

  background:
    #edf5fb;

  color:
    #0063a5;

  cursor:
    pointer;

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}


.booklet-launch-button svg {
  display:
    block;

  width:
    25px;

  height:
    25px;
}


.booklet-launch-button:hover {
  transform:
    translateY(-1px);

  border-color:
    #8fbcd8;

  background:
    #e5f1fa;

  color:
    #083f70;

  box-shadow:
    0 5px 14px
    rgba(0, 99, 165, .08);
}


.booklet-launch-button:focus-visible {
  outline:
    3px solid #77b5e1;

  outline-offset:
    3px;
}


/* ==========================================================
   ADMIN COM CURADORIA PENDENTE
   ========================================================== */

#adminButton.cl41-admin-pending {
  border-color:
    #c4161c;

  background:
    #c4161c;

  color:
    #fff;

  box-shadow:
    0 5px 15px
    rgba(196, 22, 28, .18);
}


#adminButton.cl41-admin-pending:hover:not(:disabled) {
  border-color:
    #a20f14;

  background:
    #a20f14;

  color:
    #fff;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.booklet-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    350;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  background:
    rgba(5, 28, 50, .74);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


.booklet-overlay[hidden] {
  display:
    none !important;
}


/* ==========================================================
   MODAL
   ========================================================== */

.booklet-modal {
  width:
    min(
      700px,
      100%
    );

  max-height:
    min(
      94dvh,
      940px
    );

  overflow-y:
    auto;

  padding:
    27px;

  border:
    1px solid
    rgba(255, 255, 255, .45);

  border-radius:
    20px;

  background:
    #fff;

  box-shadow:
    0 32px 95px
    rgba(0, 22, 43, .35);
}


.booklet-modal-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;
}


.booklet-modal-header h2 {
  margin:
    7px 0 0;

  color:
    #083f70;

  font-size:
    22px;

  line-height:
    1.35;
}


.booklet-close {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    37px;

  height:
    37px;

  padding:
    0;

  border:
    0;

  border-radius:
    10px;

  background:
    #edf3f7;

  color:
    #516b80;

  font-size:
    25px;

  cursor:
    pointer;
}


.booklet-close:hover {
  background:
    #e2ebf2;

  color:
    #083f70;
}


.booklet-close:disabled {
  opacity:
    .45;

  cursor:
    wait;
}


.booklet-intro {
  margin:
    17px 0;

  padding:
    12px 14px;

  border-left:
    3px solid #157b58;

  border-radius:
    6px;

  background:
    #eef8f3;

  color:
    #426859;

  font-size:
    10px;

  line-height:
    1.75;
}


/* ==========================================================
   DROP
   ========================================================== */

.booklet-drop {
  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  width:
    100%;

  min-height:
    91px;

  padding:
    18px;

  border:
    1px dashed #a9c8dc;

  border-radius:
    14px;

  background:
    #f8fbfe;

  color:
    #315d7d;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}


.booklet-drop:hover,
.booklet-drop.dragging {
  border-color:
    #0063a5;

  background:
    #edf6fc;

  transform:
    translateY(-1px);
}


.booklet-drop-icon {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    52px;

  height:
    52px;

  border-radius:
    13px;

  background:
    #e5f1fa;

  color:
    #0063a5;
}


.booklet-drop-icon svg {
  width:
    31px;

  height:
    31px;
}


.booklet-drop-copy {
  display:
    grid;

  gap:
    5px;
}


.booklet-drop-copy strong {
  color:
    #083f70;

  font-size:
    12px;
}


.booklet-drop-copy small {
  color:
    #718698;

  font-size:
    9px;

  line-height:
    1.55;
}


/* ==========================================================
   INFORMAÇÕES DO PDF
   ========================================================== */

.booklet-file-info {
  margin-top:
    13px;

  padding:
    14px;

  border:
    1px solid #d9e6ef;

  border-radius:
    11px;

  background:
    #fff;
}


.booklet-file-title {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.booklet-file-title strong {
  max-width:
    78%;

  color:
    #083f70;

  font-size:
    11px;

  overflow-wrap:
    anywhere;
}


.booklet-file-title span {
  color:
    #718698;

  font-size:
    9px;

  font-weight:
    700;
}


.booklet-file-details {
  display:
    grid;

  gap:
    6px;

  margin-top:
    10px;

  color:
    #62798c;

  font-size:
    9px;

  line-height:
    1.55;
}


.booklet-note-blue {
  color:
    #0063a5;

  font-weight:
    700;
}


/* ==========================================================
   OPÇÕES
   ========================================================== */

.booklet-options {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items:
    stretch;

  gap:
    12px;

  margin-top:
    15px;
}


.booklet-fieldset {
  display:
    grid;

  gap:
    8px;

  min-width:
    0;

  margin:
    0;

  padding:
    13px;

  border:
    1px solid #d9e6ef;

  border-radius:
    12px;
}


.booklet-fieldset legend {
  padding:
    0 5px;

  color:
    #526b80;

  font-size:
    9px;

  font-weight:
    800;
}


.booklet-radio,
.booklet-check {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  cursor:
    pointer;
}


.booklet-radio {
  padding:
    10px;

  border:
    1px solid #e0e9f0;

  border-radius:
    9px;

  background:
    #fafcfe;
}


.booklet-radio:has(input:checked) {
  border-color:
    #9cc5e1;

  background:
    #edf6fc;
}


.booklet-radio input,
.booklet-check input {
  flex:
    0 0 auto;

  width:
    17px;

  min-width:
    17px;

  height:
    17px;

  min-height:
    17px;

  margin:
    1px 0 0;

  padding:
    0;
}


.booklet-radio span,
.booklet-check span {
  display:
    grid;

  gap:
    3px;
}


.booklet-radio strong,
.booklet-check strong {
  color:
    #244f70;

  font-size:
    10px;
}


.booklet-radio small,
.booklet-check small {
  color:
    #73899a;

  font-size:
    8px;

  line-height:
    1.55;
}


.booklet-check {
  padding:
    14px;

  border:
    1px solid #d9e6ef;

  border-radius:
    12px;

  background:
    #fbfcfd;
}


/* ==========================================================
   PROGRESSO
   ========================================================== */

.booklet-progress-box {
  margin-top:
    15px;

  padding:
    13px;

  border:
    1px solid #dce8ef;

  border-radius:
    11px;

  background:
    #f8fbfd;
}


.booklet-progress-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    9px;
}


.booklet-progress-head strong {
  color:
    #355b75;

  font-size:
    9px;
}


.booklet-progress-head span {
  color:
    #0063a5;

  font-size:
    9px;

  font-weight:
    800;
}


.booklet-progress-track {
  height:
    6px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #dfeaf2;
}


.booklet-progress-track span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #0063a5,
      #53a9d8
    );

  transition:
    width 220ms ease;
}


/* ==========================================================
   STATUS
   ========================================================== */

.booklet-status {
  margin-top:
    13px;

  padding:
    12px 13px;

  border-radius:
    10px;

  background:
    #eef7f2;

  color:
    #31664d;

  font-size:
    10px;

  line-height:
    1.7;
}


.booklet-status.error {
  background:
    #fff0f0;

  color:
    #a02b31;
}


/* ==========================================================
   AÇÕES
   ========================================================== */

.booklet-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    17px;

  padding-top:
    15px;

  border-top:
    1px solid #e1eaf1;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

  .booklet-launch-button {
    width:
      40px;

    height:
      40px;

    border-radius:
      11px;
  }


  .booklet-launch-button svg {
    width:
      23px;

    height:
      23px;
  }


  .booklet-overlay {
    padding:
      9px;
  }


  .booklet-modal {
    max-height:
      96dvh;

    padding:
      18px;

    border-radius:
      15px;
  }


  .booklet-options {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .booklet-actions {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr);
  }


  .booklet-actions .button {
    width:
      100%;
  }


  .booklet-file-title strong {
    max-width:
      100%;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .booklet-launch-button,
  .booklet-drop,
  .booklet-progress-track span {
    transition:
      none !important;
  }

}