/* ══════════════════════════════════════
   Boleta de Tecmus - v1.0
   Paleta: Gold #e8c97a - Dark #996e15 - BG #0d0d0d
   ══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

@property --hstk-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }

@keyframes hstk-spin    { to { --hstk-a: 360deg; } }
@keyframes hstk-fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes hstk-fill    { from { width:0% } }

/* -- Wrap con borde animado -- */
.hstk-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: #0d0d0d !important;
  border-radius: 10px;
  padding: 2px;
  isolation: isolate;
  animation: hstk-fade-up .5s ease both;
}

.hstk-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: conic-gradient(
    from var(--hstk-a),
    transparent 0%, transparent 62%,
    rgba(153,110,21,.18) 73%, rgba(153,110,21,.82) 81%,
    rgba(232,201,122,1) 87%, rgba(153,110,21,.82) 93%,
    rgba(153,110,21,.18) 97%, transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: hstk-spin 3s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* -- Pantallas -- */
.hstk-screen {
  background: #0d0d0d;
  border-radius: 9px;
  padding: 36px 40px 28px;
}

/* -- Pantalla PIN -- */
.hstk-pin-header {
  text-align: center;
  margin-bottom: 28px;
}

.hstk-pin-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #0d0900;
  border: 1px solid #996e15;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.hstk-pin-icon i        { color: #e8c97a; font-size: 22px; }
.hstk-pin-icon--ok      { border-color: #e8c97a; background: #0a0800; }
.hstk-pin-icon--ok i    { color: #e8c97a; }

.hstk-title {
  font-family: 'Cinzel', Georgia, serif !important;
  color: #e8c97a !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

.hstk-subtitle {
  color: #6a5a40 !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 14px !important;
  font-style: italic !important;
  margin: 0 !important;
}

.hstk-pin-form {
  max-width: 320px;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hstk-pin-input {
  background: #080600 !important;
  border: 1px solid #4a3500 !important;
  border-radius: 6px !important;
  color: #e8c97a !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 20px !important;
  letter-spacing: .35em !important;
  padding: 14px 20px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color .2s !important;
}

.hstk-pin-input:focus   { border-color: #996e15 !important; }
.hstk-pin-input::placeholder { color: #3a2a10 !important; letter-spacing: .1em !important; font-size: 14px !important; }

.hstk-total-note {
  text-align: center !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 12px !important;
  color: #3a2a10 !important;
  margin: 8px 0 6px !important;
}

.hstk-total-note i { color: #4a3500; margin-right: 5px; }

/* -- Formulario -- */
.hstk-form-header {
  text-align: center;
  margin-bottom: 24px;
}

.hstk-field-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.hstk-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* -- Errores -- */
.hstk-err {
  display: none;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 12px;
  color: #c87d7d;
  padding: 4px 2px 0;
  line-height: 1.3;
}

/* -- Nota info -- */
.hstk-info-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #060c02;
  border: 1px solid #1a3800;
  border-radius: 5px;
  padding: 9px 13px;
  margin-bottom: 16px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
  color: #80c890;
  line-height: 1.5;
}

.hstk-info-note i { color: #e8c97a; flex-shrink: 0; margin-top: 2px; }

/* -- Boton dorado -- */
.hstk-btn {
  background: linear-gradient(135deg, #7a5010 0%, #b88820 50%, #7a5010 100%) !important;
  background-size: 200% 100% !important;
  transition: background-position .35s ease, box-shadow .2s ease !important;
}

.hstk-btn:hover {
  background-position: right center !important;
  box-shadow: 0 0 18px rgba(232,201,122,.28) !important;
}

.hstk-btn-default,
.hstk-btn-loading { display: flex; align-items: center; gap: 8px; justify-content: center; }

/* -- Mensaje respuesta -- */
.hstk-form-msg {
  display: none;
  align-items: flex-start;
  gap: 8px;
  border-radius: 5px;
  padding: 10px 14px;
  margin-top: 12px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  animation: hstk-fade-up .2s ease both;
}

.hstk-form-msg i    { flex-shrink: 0; margin-top: 2px; }
.hstk-form-msg span { flex: 1; }

.hstk-msg-error { display: flex !important; background: #180300; border: 1px solid #5a1000; color: #e09070; }
.hstk-msg-error i { color: #c87d7d; }
.hstk-msg-ok    { display: flex !important; background: #011506; border: 1px solid #0a4518; color: #80c890; }
.hstk-msg-ok i  { color: #7dc87d; }

/* -- Pantalla exito -- */
.hstk-success-screen {
  text-align: center;
  padding: 32px 36px 28px;
}

.hstk-success-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0d0900;
  border: 1px solid #e8c97a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.hstk-success-icon i { color: #e8c97a; font-size: 22px; }

.hstk-success-title {
  font-family: 'Cinzel', Georgia, serif !important;
  color: #e8c97a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  margin: 0 0 5px !important;
}

.hstk-success-sub {
  color: #6a5a40 !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 13px !important;
  font-style: italic !important;
  margin: 0 0 20px !important;
}

/* -- Boleta card -- */
.hstk-boleta-card {
  background: #080600;
  border: 1px solid #4a3500;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto 14px;
  max-width: 480px;
  text-align: left;
}

.hstk-boleta-top {
  background: #0a0800;
  border-bottom: 1px solid #2a1f00;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hstk-boleta-evento {
  font-family: 'Cinzel', Georgia, serif;
  color: #e8c97a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
}

.hstk-boleta-tipo {
  font-family: 'EB Garamond', Georgia, serif;
  color: #6a5a40;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hstk-boleta-body {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px;
}

.hstk-boleta-left { flex: 1; padding-right: 16px; }

.hstk-boleta-nombre-label,
.hstk-boleta-codigo-label {
  font-family: 'EB Garamond', Georgia, serif !important;
  color: #996e15 !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}

.hstk-boleta-nombre {
  font-family: 'Cinzel', Georgia, serif !important;
  color: #e8dfc0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
  line-height: 1.3 !important;
}

.hstk-boleta-codigo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hstk-boleta-codigo {
  font-family: 'Courier New', monospace;
  color: #e8c97a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .25em;
  text-shadow: 0 0 12px rgba(232,201,122,.3);
}

.hstk-copy-btn {
  background: #150e00 !important;
  border: 1px solid #996e15 !important;
  border-radius: 4px !important;
  color: #996e15 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .18s, color .18s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}

.hstk-copy-btn:hover  { background: #2a1f00 !important; color: #e8c97a !important; }
.hstk-copy-btn .fa-check { color: #7dc87d; }

.hstk-boleta-nota {
  font-family: 'EB Garamond', Georgia, serif !important;
  color: #4a3a20 !important;
  font-size: 11px !important;
  margin: 0 !important;
  font-style: italic !important;
}

.hstk-boleta-right {
  flex-shrink: 0;
  border-left: 1px solid #1a1200;
  padding-left: 20px;
}

.hstk-qr-img {
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid #2a1f00;
}

.hstk-boleta-bottom {
  background: #0a0800;
  border-top: 1px solid #2a1f00;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 11px;
  color: #4a3a20;
  letter-spacing: .06em;
}

.hstk-boleta-dot { color: #2a1f00; }

/* -- Toast copiar -- */
.hstk-copy-toast {
  display: none;
  background: #0a2a10;
  border: 1px solid #1e6030;
  color: #7dc87d;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 6px 16px;
  border-radius: 20px;
  margin: 0 auto 18px;
  width: fit-content;
  animation: hstk-fade-up .2s ease both;
}

.hstk-copy-toast i { margin-right: 5px; }

/* -- Honeypot -- */
.hsmv-hp { display: none !important; visibility: hidden !important; }

/* -- Responsive -- */
@media (max-width: 540px) {
  .hstk-screen         { padding: 24px 20px 20px !important; }
  .hstk-success-screen { padding: 24px 16px 20px !important; }
  .hstk-row-2          { grid-template-columns: 1fr !important; }
  .hstk-boleta-body    { flex-direction: column !important; }
  .hstk-boleta-left    { padding-right: 0 !important; width: 100% !important; }
  .hstk-boleta-right   { border-left: none !important; border-top: 1px solid #1a1200 !important; padding-left: 0 !important; padding-top: 16px !important; margin-top: 14px !important; display: flex !important; justify-content: center !important; width: 100% !important; }
  .hstk-qr-img         { width: 130px !important; height: 130px !important; }
  .hstk-boleta-codigo  { font-size: 15px !important; letter-spacing: .16em !important; }
  .hstk-boleta-top     { flex-direction: column !important; gap: 4px !important; }
}