/* La entrega del evento (1-oct-2026): la sección de la ficha, la vista previa del tótem y su impresión
   en carta. El tótem sigue la línea del de Neumatika con la paleta de Wild Tribes (8_marca/Wild Tribes). */
.tt-entrega h3 { margin-top: 18px; }
.tt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tt-datos { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; }
.tt-datos label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-archivo b { min-width: 130px; }
.tt-subir { cursor: pointer; }
.tt-cargando { opacity: .6; pointer-events: none; }
.tt-cargando::after { content: ' · convirtiendo…'; }
.tt-tribus input { width: 100%; min-width: 70px; }
.tt-tribus input[type=color] { width: 44px; min-width: 44px; height: 32px; padding: 0; }
.tt-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt-encuesta { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; flex-wrap: wrap; }
.tt-qr { width: 120px; height: 120px; flex: 0 0 auto; background: #fff; padding: 6px; border-radius: 6px; }
.tt-qr svg { width: 100%; height: 100%; }
.tt-resultados { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tt-cifras { display: flex; flex-wrap: wrap; gap: 24px; }
.tt-cifras > div { display: flex; flex-direction: column; }
.tt-cifras b { font-size: 28px; }
.en-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.en-opciones label { display: inline-flex; }
.en-opciones input, .en-na input { position: absolute; opacity: 0; pointer-events: none; }
.en-opciones span, .en-na span { display: inline-flex; align-items: center; padding: 0 12px; height: 36px; border: 1px solid var(--linea);
  border-radius: 8px; cursor: pointer; }
.en-opciones input:checked + span, .en-na input:checked + span { background: var(--ok); color: #fff; border-color: var(--ok); }
.en-na { display: inline-flex; margin-left: 6px; }

/* ---------- vista previa ---------- */
#tt-impresion { position: fixed; inset: 0; z-index: 50; overflow: auto; background: #5b6b70; padding: 16px; }
#tt-impresion[hidden] { display: none; }
body.tt-viendo { overflow: hidden; }
.tt-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--papel);
  padding: 10px 14px; border-radius: 10px; margin: 0 auto 16px; max-width: 216mm; }
.tt-hojas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tt-solo-tribus { display: flex; flex-direction: column; gap: 16px; }
.tt-solo-tribus[hidden] { display: none; }

/* ---------- la hoja (carta) ---------- */
.tt-hoja { --esmeralda: #004E56; --petroleo: #0D7A80; --turquesa: #10949B; --aqua: #7EC6CA; --tinta-wt: #33474A;
  width: 215.9mm; height: 279.4mm; background: #fff; color: var(--tinta-wt); box-sizing: border-box; padding: 10mm 13mm;
  display: flex; flex-direction: column; gap: 4mm; overflow: hidden; font-family: 'Alegreya Sans', 'Source Sans 3', sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; flex: 0 0 auto; }
.tt-hoja > * { flex: 0 0 auto; }
.tt-hoja small { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 7.5pt; letter-spacing: .18em; font-weight: 700;
  color: var(--turquesa); }
.tt-banda { background: var(--esmeralda); color: #fff; border-radius: 1.5mm; padding: 4mm 7mm; }
.tt-arriba { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 3mm 6mm; align-items: center; }
.tt-coord span { font-size: 10pt; letter-spacing: .04em; }
.tt-wt { height: 13mm; width: auto; justify-self: end; }
.tt-cliente { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; min-height: 14mm; }
.tt-cliente img { max-height: 22mm; max-width: 80mm; object-fit: contain; background: #fff; border-radius: 1.5mm; padding: 2mm 4mm; }
.tt-cliente b { font-size: 28pt; font-weight: 500; }
.tt-fotos { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 62mm; gap: 3mm; flex: 0 0 auto; }
.tt-fotos > * { min-width: 0; min-height: 0; height: 62mm; }
.tt-fotos img { width: 100%; height: 62mm; object-fit: cover; border-radius: 1mm; display: block; }
.tt-fotos img + img { object-fit: contain; background: #f4f1e6; }
.tt-hueco { background: #eef4f4; color: #9bb; display: flex; align-items: center; justify-content: center; border-radius: 1mm; width: 100%; height: 100%; }
.tt-frase { text-align: center; font-weight: 400; font-size: 19pt; line-height: 1.15; margin: 0 18mm; color: var(--tinta-wt); }
.tt-evento { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6mm;
  border-top: .3mm solid #c2d0d1; border-bottom: .3mm solid #c2d0d1; padding: 3mm 0; }
.tt-evento b { display: block; font-size: 16pt; font-weight: 500; }
.tt-evento span { color: var(--petroleo); font-size: 10pt; }
.tt-der { text-align: right; }
.tt-rosa { height: 15mm; }
.tt-podio-fila { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3mm; margin-top: 2mm; }
.tt-tribu { border: .3mm solid #c2d0d1; border-radius: 1.5mm; overflow: hidden; display: flex; flex-direction: column; }
.tt-tribu img, .tt-tribu .tt-hueco { height: 27mm; width: 100%; object-fit: cover; object-position: center 40%; border-radius: 0; }
.tt-tribu-pie { border-top: 1.6mm solid var(--c); padding: 1.5mm 2mm; display: flex; flex-direction: column; line-height: 1.15; }
.tt-tribu-pie b { font-size: 11pt; font-weight: 700; }
.tt-tribu-pie span { font-size: 8.5pt; }
.tt-lugar { color: var(--c); font-weight: 800; font-size: 10pt !important; }
.tt-tiempo { font-size: 11pt !important; font-weight: 600; color: var(--esmeralda); }
.tt-firma { margin: -2mm 0 0 auto; width: 75mm; display: flex; flex-direction: column; gap: 1.5mm; font-size: 10pt; }
.tt-linea { border-bottom: .3mm solid var(--tinta-wt); height: 8mm; }
.tt-abajo { margin-top: auto; display: flex; gap: 6mm; align-items: center; }
.tt-qrbox { display: flex; gap: 3mm; align-items: center; flex: 1; }
.tt-qrbox span { font-size: 10pt; line-height: 1.2; display: block; }
.tt-qrimg { width: 21mm; height: 21mm; background: #fff; padding: 1.5mm; border-radius: 1mm; flex: 0 0 auto; }
.tt-qrimg svg { width: 100%; height: 100%; display: block; }
.tt-meta b { display: block; font-size: 10pt; margin-bottom: 2mm; }
.tt-abajo small, .tt-arriba small { color: var(--aqua); }

/* ---------- la hoja de cada tribu ---------- */
.tt-hoja-tribu { padding: 10mm; gap: 0; }
.tt-ruta { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #f4f1e6; border-radius: 1.5mm 1.5mm 0 0; }
.tt-franja { background: var(--esmeralda); color: #fff; border-top: 3mm solid var(--c); border-radius: 0 0 1.5mm 1.5mm;
  padding: 5mm 7mm; display: grid; grid-template-columns: 1.3fr 1fr 1.4fr auto; gap: 5mm; align-items: center; }
.tt-franja b { display: block; font-size: 14pt; font-weight: 500; }
.tt-franja .tt-nombre { font-size: 26pt; line-height: 1; }
.tt-franja span { font-size: 9.5pt; color: var(--aqua); }
.tt-franja small { color: var(--aqua); }

/* ---------- impresión: solo las hojas ---------- */
@media print {
  @page { size: letter; margin: 0; }
  body.tt-viendo > *:not(#tt-impresion) { display: none !important; }
  body.tt-viendo { overflow: visible; background: #fff; }
  /* documentos.css oculta todo menos #impresion: aquí manda el tótem. */
  body.tt-viendo > #tt-impresion { display: block !important; position: static; padding: 0; background: #fff; overflow: visible; }
  .tt-barra { display: none !important; }
  .tt-hojas { gap: 0; display: block; }
  .tt-solo-tribus { display: block; gap: 0; }
  .tt-solo-tribus[hidden] { display: none; }
  .tt-hoja { page-break-after: always; break-after: page; margin: 0; }
}
@media screen and (max-width: 860px) {
  .tt-hojas { zoom: .45; }
}