/* Fuentes reales de la marca (Figma: Interface/Headlines usa Barlow,
   el resto del texto usa Inter) — vendorizadas para que el kiosco no
   dependa de internet, mismo criterio que el QR/barcode. */
@font-face {
  font-family: "Barlow";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Variable.woff2") format("woff2");
}

:root {
  --blue-grad-1: #010a5c;
  --blue-grad-2: #0033a0;
  --blue: #002eff;
  --blue-dark: #010a5c;
  --orange: #ff5c00;
  --orange-xiaomi: #ff4f00;
  --green: #1ea672;
  --navy-text: #0c0c0c;
  --gray-text: #66686c;
  --light-blue: #eff0f5;
  --border: #e9e9e9;
  --bg-card-image: #f7f7f7;
  --bg-section-alt: #f9f9fa;
  --badge-green-bg: #d0f9ec;
  --badge-green-border: #31ae87;
  --badge-orange-bg: #ffcfbf;
  --badge-orange-border: #ff3d00;
  --discount-bg: #ff9e80;
  --divider-light: #ccccd9;
  --divider-mid: #d9e0eb;
  --chip-border: #bfc7d9;
  --specs-border: #ebebf0;
  --font-display: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background: #dfe4ee;
  color: var(--navy-text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* ---- Marco del tótem: pantalla vertical 21.5" (1080x1920 aprox) ---- */
#kiosk-shell {
  width: 480px;
  background: #2b2f38;
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}

#kiosk-frame {
  width: 100%;
  aspect-ratio: 1080 / 1920;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---- Modo kiosco real: es el default en cualquier equipo (para que el
   tótem se vea a pantalla completa apenas se abre la URL, sin depender
   de que alguien agregue "?device="). Se desactiva solo si la URL trae
   "?vitrina=1", para mostrar la demo dentro de un navegador de escritorio
   sin ocupar toda la ventana. Acá no queremos la maqueta de teléfono ni
   el panel de eventos de debug: el catálogo debe ocupar toda la
   pantalla. ---- */
html.kiosk-mode body {
  padding: 0;
  background: #fff;
  display: block;
  min-height: 100vh;
}
html.kiosk-mode .layout {
  display: block;
}
html.kiosk-mode #kiosk-shell {
  width: 100vw;
  height: 100vh;
  background: #fff;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Todo el diseño (tarjetas, tipografía, paddings) está hecho en px fijos
   contra un lienzo de referencia de 480x853 (el ancho de la "maqueta" de
   siempre). En vez de reescribir cientos de valores px a unidades
   relativas, se mantiene ese lienzo a tamaño fijo y se escala entero con
   transform hasta llenar la pantalla real — así el contenido crece
   proporcionalmente en vez de quedar chico con espacio vacío alrededor.
   El factor de escala real (--kiosk-scale) lo calcula app.js según el
   tamaño de la ventana. */
html.kiosk-mode #kiosk-frame {
  width: 480px;
  height: 853px;
  aspect-ratio: auto;
  border-radius: 0;
  flex-shrink: 0;
  transform: scale(var(--kiosk-scale, 1));
}
html.kiosk-mode #event-panel {
  display: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
}
.screen.active { display: flex; }

/* ---- Header azul con logo ---- */
.header {
  background: linear-gradient(to top, var(--blue-grad-1), var(--blue-grad-2));
  color: #fff;
  padding: 20px 18px 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.swoosh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%) -10% 110% / 70% 60% no-repeat,
    radial-gradient(closest-side, rgba(90,140,255,.35), transparent 70%) 110% -10% / 80% 70% no-repeat;
}
.swoosh.orange {
  background:
    radial-gradient(closest-side, rgba(255,92,0,.55), transparent 70%) 115% 105% / 90% 90% no-repeat,
    radial-gradient(closest-side, rgba(90,140,255,.30), transparent 70%) -10% -10% / 70% 60% no-repeat;
}
.logo-img {
  display: block;
  height: 24px;
  width: auto;
  position: relative; z-index: 1;
}
.home-header .logo-img { margin: 0 auto; }
.header h1 {
  line-height: 1.15;
  margin: 12px 0 4px;
  position: relative; z-index: 1;
  font-family: var(--font-display);
}
.header h1 .h1-line1,
.header h1 .h1-line2 {
  font-size: 20px;
  font-weight: 600;
}
.header p {
  margin: 0 0 14px;
  font-size: 12px;
  opacity: .85;
  position: relative; z-index: 1;
}
.header p b { font-weight: 700; opacity: 1; }
.home-header h1, .home-header p { text-align: center; }
.home-header { padding-bottom: 8px; background: transparent; }

/* Inicio: el fondo azul cubre toda la pantalla (no solo el header), como
   en el Figma real — antes el header terminaba en azul y el resto de la
   pantalla (beneficios + botón) quedaba en blanco. */
#screen-home { background: linear-gradient(to top, var(--blue-grad-1), var(--blue-grad-2)); }

.white-body { background: transparent; display: flex; flex-direction: column; flex: 1; }

.benefits {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  position: relative;
  z-index: 2;
}
.benefits-inline { padding: 0; margin-top: 8px; position: relative; z-index: 1; }
.benefits-inline .benefit-card { background: rgba(255,255,255,.15); color: rgba(255,255,255,.85); padding: 7px 6px; }
.benefits-inline .benefit-card b { color: #fff; }
.benefits-inline .benefit-card .icon { margin-bottom: 2px; }
.benefits-inline .benefit-card .icon img { width: 17px; height: 17px; }
/* Inicio: tarjetas de beneficio en blanco (el fondo detrás es azul, a
   diferencia de otras pantallas donde .benefits vive sobre fondo claro). */
.white-body .benefit-card { background: #fff; }
.benefit-card {
  flex: 1;
  background: var(--light-blue);
  border: none;
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gray-text);
}
.benefit-card .icon { display: block; margin-bottom: 5px; }
.benefit-card .icon img { width: 22px; height: 22px; display: block; margin: 0 auto; }
.benefit-card b {
  display: block; color: var(--blue); font-size: 9.5px; font-weight: 600; line-height: 1.3;
  margin-bottom: 3px;
}

/* ---- Imagen de producto: foto real (sin bisel/mockup dibujado, como en
   el diseño de Figma) sobre fondo claro; si no hay foto, cae al color
   de respaldo (gradient). El tamaño lo define cada contexto. ---- */
.product-image {
  background: var(--bg-card-image);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.product-image.placeholder { background-size: cover; background-position: center; }

/* ---- Home: carrusel de un producto a la vez (foto grande + info al
   lado), como en el diseño real de Entel ---- */
/* margen negativo para contrarrestar el padding lateral de .header (18px)
   y que la tarjeta se acerque de verdad a los bordes de la pantalla,
   no solo a los del contenido de texto. */
.hero-carousel { position: relative; padding: 14px 0 6px; z-index: 1; margin: 0 -18px; }
.hero-carousel-inner {
  background: rgba(255,255,255,.1); border-radius: 20px; margin: 0 4px;
  padding: 22px 30px; display: flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden; min-height: 320px; cursor: pointer;
  touch-action: pan-y;
}
/* object-fit: contain (no cover) para que no se corte el arco completo del
   swoosh -- la caja ahora se hizo más alta justo para acercarse al aspect
   ratio real del SVG (994x635) y que quepa casi entero. */
.hero-swoosh { position: absolute; inset: 0 4%; width: 92%; height: 100%; object-fit: fill; opacity: .5; pointer-events: none; }
.hero-image { flex: 0 0 56%; position: relative; z-index: 1; }
.hero-image .product-image { background: transparent; aspect-ratio: 16/12; }
.hero-image .product-image img { max-width: 94%; max-height: 94%; }
.hero-info { flex: 1; position: relative; z-index: 1; color: #fff; text-align: left; min-width: 0; }
.hero-info .name { font-size: 11.5px; font-weight: 400; line-height: 1.25; }
.hero-info .subtitle { font-size: 8px; opacity: .85; margin: 3px 0 6px; line-height: 1.3; }
.hero-info .price { font-size: 16px; font-weight: 600; font-family: var(--font-display); margin-bottom: 2px; }
.hero-info .cuotas { font-size: 7px; opacity: .85; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.35); color: var(--blue); font-size: 20px; font-weight: 700; line-height: 1;
  z-index: 2; padding: 0;
}
.hero-arrow-left { left: 4px; }
.hero-arrow-right { right: 4px; }

.dots { display:flex; justify-content:center; align-items:center; gap:7px; padding: 6px 0 2px; position: relative; z-index: 1; }
.dots span { width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.45); cursor: pointer; transition: all .2s; }
.dots span.active { background: #fff; width: 24px; border-radius: 5px; }

.cta-wrap { padding: 14px 16px 18px; margin-top: auto; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 17px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.btn .hand svg { width: 16px; height: 16px; display: block; }
.btn .chev { font-size: 15px; font-weight: 400; }
.btn:active { background: var(--blue-dark); }
.btn.outline {
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.footnote { text-align: center; font-size: 10px; color: var(--gray-text); margin-top: 8px; }
.footnote b { color: var(--blue); }

/* Franja blanca al fondo de Inicio, debajo del botón (el resto de la
   pantalla es azul, ver #screen-home) -- separada de .cta-wrap a
   propósito para que esta franja quede blanca y no azul. */
.home-footer { background: #fff; flex-shrink: 0; padding: 14px 16px; }
.home-footer .footnote {
  font-size: 9.5px; font-weight: 600; color: var(--navy-text); font-family: var(--font-display);
  margin-top: 0;
}

/* ---- PLP ---- */
.plp-header {
  background: linear-gradient(to top, var(--blue-grad-1), var(--blue-grad-2));
  color: #fff; padding: 10px 16px 8px;
}
.plp-header h1 { font-size: 17px; margin: 0 0 6px; font-weight: 600; font-family: var(--font-display); }
.brand-title {
  font-weight: 600; color: var(--blue); font-size: 14px; font-family: var(--font-display);
  padding: 10px 16px 5px;
}
.brand-title.xiaomi { color: var(--orange-xiaomi); }
.plp-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
  cursor: grab; user-select: none;
  scrollbar-width: none;
}
.plp-row:active { cursor: grabbing; }
.plp-row::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.plp-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 0;
  cursor: pointer; background: #fff; overflow: hidden;
  flex: 0 0 auto; width: 142px; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column;
}
.plp-card .product-image { height: 98px; border-bottom: 1px solid var(--border); }
.plp-card .product-image img { max-width: 58%; max-height: 88%; }
.plp-content { padding: 9px 9px 0; flex: 1; display: flex; flex-direction: column; }
.plp-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 7px; }
.pill { font-size: 7.5px; font-weight: 600; padding: 3px 6px; border-radius: 5px; white-space: nowrap; border: 1px solid; color: var(--navy-text); }
.pill-new { background: var(--badge-green-bg); border-color: var(--badge-green-border); }
.pill-ship { background: var(--badge-orange-bg); border-color: var(--badge-orange-border); }
.plp-brand { font-size: 8px; font-weight: 700; color: var(--navy-text); }
.plp-card .name { font-size: 9px; font-weight: 500; margin: 2px 0 7px; line-height: 1.3; color: var(--navy-text); min-height: 0; }
.plp-card .name .yr { color: var(--blue); font-weight: 700; }
.discount-pill {
  display: flex; align-items: stretch; border: 1px solid var(--discount-bg); border-radius: 5px;
  overflow: hidden; margin-bottom: 6px; width: fit-content;
}
.discount-value {
  background: var(--discount-bg); color: var(--navy-text); font-size: 8px; font-weight: 700;
  line-height: 1.15; text-align: center; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center;
}
.discount-label {
  background: #fff; color: var(--navy-text); font-size: 8px; font-weight: 700;
  padding: 3px 6px; display: flex; align-items: center; white-space: nowrap;
}
.price-normal { font-size: 7px; color: var(--gray-text); text-decoration: line-through; margin-bottom: 2px; }
.plp-card .price {
  font-size: 14px; font-weight: 600; font-family: var(--font-display); color: var(--blue); letter-spacing: .2px;
}
.plp-card .cuotas { font-size: 6.8px; color: var(--navy-text); margin-bottom: 9px; display: block; }
.scan-footer {
  margin-top: auto; padding: 10px 16px; display: flex; align-items: center;
  gap: 6px; justify-content: center; font-size: 10.5px; color: var(--gray-text);
  border-top: 1px solid var(--border);
}
.scan-footer b { color: var(--blue); }
.scan-footer .lock-ic img { width: 13px; height: 13px; display: block; }
.btn-icon svg { width: 16px; height: 16px; display: block; }
.plp-dots { display:flex; gap:7px; padding: 6px 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.plp-dots span { width:9px; height:9px; border-radius:50%; background: var(--border); cursor: pointer; transition: all .2s; }
.plp-dots span.active { background: var(--blue); width: 24px; border-radius: 5px; }

/* ---- Modal (PDP / Intermedia / Éxito) ---- */
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  background: none; border: none; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.modal-close img { width: 24px; height: 24px; display: block; }

.pdp-carousel-wrap {
  position: relative;
  margin: 10px 16px 6px;
  width: calc(100% - 32px);
  /* Las fotos de producto quedan ~1.6:1 tras el recorte automático; con
     16:9 (1.78:1) sobraba franja gris a los costados. */
  aspect-ratio: 8/5;
  max-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; background: none; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 2; padding: 0;
}
.pdp-arrow img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.pdp-arrow-left { left: -10px; }
.pdp-arrow-right { right: -10px; }

.pdp-dots {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 2;
}
.pdp-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all .2s;
}
.pdp-dots span.active {
  background: var(--blue); width: 24px; border-radius: 5px;
}

.pdp-image {
  width: 100%; height: 100%;
}
.pdp-image .product-image { width: 100%; height: 100%; border-radius: 12px; }
.pdp-image .product-image img { max-width: 96%; max-height: 96%; }
.pdp-body { padding: 8px 16px 0; }
.size-chip {
  display: inline-block; background: var(--blue); color: #fff; font-weight: 700;
  font-size: 10px; padding: 5px 12px; border-radius: 6px; margin-bottom: 8px;
}
.pdp-body h2 { font-size: 15px; margin: 4px 0 4px; font-weight: 700; line-height: 1.25; }
.pdp-body .subtitle { font-size: 9.5px; color: var(--blue); margin: 0 0 10px; font-weight: 500; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  font-size: 8.5px; border: 1.5px solid var(--chip-border); border-radius: 6px;
  padding: 5px 9px; color: var(--navy-text); font-weight: 600;
  display: inline-flex; align-items: center;
}
.price-box {
  background: var(--light-blue);
  border-radius: 10px; padding: 10px 10px; margin-bottom: 12px;
  display: flex; flex-direction: column;
}
.price-box .row { display: flex; align-items: stretch; }
.price-box .col { flex: 1; text-align: center; }
.price-box .label { font-size: 6.5px; color: var(--gray-text); text-transform: uppercase; }
.price-box .old { color: var(--gray-text); font-size: 11px; font-weight: 600; margin-top: 1px; }
.price-box .offer { color: var(--blue); font-size: 15px; font-weight: 700; font-family: var(--font-display); margin-top: 1px; }
.price-box-divider { width: 1px; align-self: stretch; background: var(--divider-light); margin: 2px 0; }
.price-box .note {
  text-align: center; font-size: 6.5px; color: var(--navy-text); margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  line-height: 1.1; font-weight: 600;
}

.price-box-mini {
  background: var(--light-blue);
  border-radius: 8px; padding: 6px; margin-top: 4px;
  display: flex; align-items: stretch; gap: 6px;
  width: 100%;
}
.price-box-mini .col { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.price-box-mini .label { font-size: 6px; color: var(--gray-text); text-transform: uppercase; letter-spacing: 0.2px; }
.price-box-mini .old { color: var(--gray-text); font-size: 9.5px; font-weight: 600; text-decoration: line-through; }
.price-box-mini .offer { color: var(--blue); font-size: 12.5px; font-weight: 700; font-family: var(--font-display); }
.price-box-mini .note { font-size: 6px; color: var(--navy-text); display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 2px; }
.price-box-mini .price-box-divider { width: 1px; align-self: stretch; background: var(--divider-light); }

.price-blue {
  font-size: 14px; font-weight: 700; font-family: var(--font-display); color: var(--blue); margin-top: 3px;
}
.cuota-blue {
  font-size: 8.5px; color: var(--blue); font-weight: 600;
}

.pay-row {
  display: flex; border: 1.5px solid var(--divider-mid); border-radius: 10px; margin-bottom: 14px; overflow: hidden;
}
.pay-card {
  flex: 1; border-right: 1px solid var(--divider-mid); padding: 14px 8px;
  text-align: center; font-size: 8.5px; color: var(--gray-text); line-height: 1.3;
}
.pay-card:last-child { border-right: none; }
.pay-card .icon { display: block; margin-bottom: 6px; }
.pay-card .icon img { width: 22px; height: 22px; display: block; margin: 0 auto; }
.pay-card b { display: block; color: var(--blue); font-size: 9px; font-weight: 700; margin-bottom: 3px; }

/* Link de texto simple, no un botón — así se ve en el Figma real (sin
   borde, sin píldora, pegado al botón de arriba). */
.btn-volver {
  display: block;
  margin: 10px auto 16px; background: none; border: none;
  cursor: pointer; padding: 4px 10px;
  color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none;
  font-family: var(--font-display);
}
.btn-volver:active { opacity: .6; }

/* Variante para el header azul del PLP: el estilo normal (borde/texto
   azul) no se ve sobre un fondo que ya es azul. */
.btn-volver-header {
  margin: 0 0 6px; align-self: flex-start;
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: #fff;
  padding: 4px 14px; font-size: 11px;
}
.btn-volver-header:active { background: #fff; color: var(--blue); }

.specs-title { font-weight: 700; font-size: 11px; color: var(--blue); margin: 8px 0 6px; }
.specs-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.specs-table tr { border: 1px solid var(--specs-border); }
.specs-table td { padding: 5.5px 6px; font-size: 8.5px; }
.specs-table td:first-child { color: var(--navy-text); width: 42%; font-weight: 600; }
.specs-table td:last-child { color: var(--gray-text); text-align: left; }

/* ---- Intermedia / Éxito ---- */
.status-header {
  background: linear-gradient(to top, var(--blue-grad-1), var(--blue-grad-2));
  color: #fff; padding: 34px 20px 40px; text-align: center; position: relative;
}
.status-icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  margin: 0 auto 16px; position: relative; z-index: 1;
}
.status-icon img { width: 28px; height: 28px; }
.check-badge {
  position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px;
  background: var(--green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--blue-dark);
}
.check-badge img { width: 11px; height: 11px; }
.status-header h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; font-family: var(--font-display); position: relative; z-index: 1; }
.status-header p { margin: 0; font-size: 12px; opacity: .85; padding: 0 6px; line-height: 1.4; position: relative; z-index: 1; }

.summary-card {
  margin: -20px 16px 0; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; display: flex; gap: 14px;
  align-items: center; box-shadow: 0 6px 16px rgba(20,71,230,.08); position: relative; z-index: 2;
}
.summary-card .thumb { width: 68px; height: 54px; border-radius: 6px; flex-shrink: 0; overflow: hidden; }
.summary-card .thumb .product-image { width: 100%; height: 100%; }
.summary-card .thumb .product-image img { max-width: 85%; max-height: 85%; }
.summary-card .info b { font-size: 14px; display: block; }
.summary-card .info .sub { font-size: 10.5px; color: var(--gray-text); margin-top: 1px; }
.summary-card .info .price { font-size: 17px; font-weight: 600; font-family: var(--font-display); color: var(--blue); margin-top: 4px; }
.summary-card .info .cuota { font-size: 10px; color: var(--gray-text); margin-top: 1px; }
.summary-card .info .cuota b { color: var(--navy-text); font-weight: 700; }

.action-row {
  display: flex; margin: 18px 16px 8px; border: 1.5px solid var(--divider-mid);
  border-radius: 14px; overflow: hidden;
}
.action-row .pay-card { border-right: 1px solid var(--divider-mid); }
.action-row .pay-card:last-child { border-right: none; }

.print-btn-wrap { padding: 20px 16px; }

.ticket-card {
  margin: 18px 16px; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 14px; display: flex; gap: 16px; align-items: flex-start;
}
.ticket-mini-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ticket-mini {
  width: 76px; background: #fff; border: 1px solid var(--border); border-radius: 4px 4px 2px 2px;
  padding: 8px 6px 10px; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.12);
  position: relative; z-index: 1;
}
.ticket-mini::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 6px;
  background: repeating-linear-gradient(-45deg, #fff 0 3px, transparent 3px 6px);
  border-bottom: 1px solid var(--border);
}
.ticket-mini .tm-logo { display: block; height: 13px; width: auto; margin: 0 auto; }
.ticket-mini .tm-label { font-size: 6.5px; color: var(--gray-text); margin-top: 5px; letter-spacing: .3px; }
.ticket-mini .tm-folio { font-size: 14px; font-weight: 800; margin: 2px 0; }
.ticket-mini .tm-date { font-size: 6.5px; color: var(--gray-text); }
.ticket-mini .tm-line { border-top: 1px dashed var(--border); margin: 6px 0; }
.ticket-mini .tm-product { font-size: 7.5px; font-weight: 700; color: var(--navy-text); line-height: 1.25; }
.ticket-mini .tm-price { font-size: 10.5px; font-weight: 700; color: var(--blue); margin-top: 3px; }
.ticket-mini .tm-sku { font-size: 6px; color: var(--gray-text); margin-top: 2px; }
.printer-slot {
  width: 50px; height: 11px; background: #d7dbea; border-radius: 0 0 6px 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 800; color: var(--blue); margin-top: -1px;
}

.steps { flex: 1; padding-top: 4px; }
.step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.step:last-child { margin-bottom: 0; }
.step .num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.step span.txt { font-size: 11.5px; color: var(--navy-text); line-height: 1.3; }

.final-actions { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

/* ---- Pantallas de estado del dispositivo (cargando / pendiente / deshabilitado) ---- */
.device-screen {
  align-items: center; justify-content: center;
  background: linear-gradient(to top, var(--blue-grad-1), var(--blue-grad-2));
  color: #fff;
}
.device-status { text-align: center; padding: 0 28px; }
.device-status .logo-img { margin: 0 auto; opacity: .9; }
.device-status .device-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.12);
  margin-bottom: 14px;
}
.device-status .device-icon svg { width: 26px; height: 26px; }
.device-status h2 { font-size: 19px; margin: 0 0 8px; }
.device-status p { font-size: 12px; opacity: .8; line-height: 1.4; margin: 0 0 4px; }
.pending-code-wrap { margin: 22px 0; }
.pending-code-label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; margin-bottom: 8px; }
.pending-code {
  font-family: "SF Mono", Consolas, monospace; font-size: 32px; font-weight: 800;
  letter-spacing: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px; padding: 14px 10px;
}
.device-hint { font-size: 10.5px; opacity: .55; margin-top: 18px; }

/* ---- Panel de eventos (demo dev) ----
   Oculto por defecto (incluso apuntando solo a la IP, sin "?device="):
   es una ayuda técnica para desarrollo, no algo para mostrar en
   showroom ni frente a Entel/Imagix. Se muestra solo con "?debug=eventos"
   en la URL (ver index.html). */
#event-panel {
  display: none;
  width: 360px;
  background: #10163a;
  color: #d7e0ff;
  border-radius: 16px;
  padding: 16px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 11px;
  max-height: 640px;
  flex-direction: column;
}
html.show-events #event-panel {
  display: flex;
}
#event-panel h3 {
  color: #fff; font-family: "Segoe UI", sans-serif; font-size: 13px;
  margin: 0 0 4px; display: flex; align-items: center; gap: 6px;
}
#event-panel .sub {
  font-family: "Segoe UI", sans-serif; font-size: 10.5px; color: #8b95c4; margin-bottom: 10px;
}
#event-log { overflow-y: auto; flex: 1; display: flex; flex-direction: column-reverse; gap: 8px; }
.event-item {
  background: #1a2150; border-radius: 8px; padding: 8px 10px; border-left: 3px solid var(--orange);
}
.event-item .ev-name { color: #ffb27a; font-weight: 700; }
.event-item .ev-time { color: #6f7bb5; float: right; }
.event-item pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; color: #b9c3f2; }

.layout {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center;
}

@media (max-width: 900px) {
  .layout { flex-direction: column; align-items: center; }
}

.reprint-test-btn {
  width: 100%; margin-top: 14px; background: #1a2150; color: #d7e0ff;
  border: 1px solid #2b3470; border-radius: 8px; padding: 9px; font-size: 12px;
  font-family: "Segoe UI", sans-serif; cursor: pointer;
}
.reprint-test-btn:hover { background: #22285f; }

/* ---- Overlay "Imprimiendo ticket..." ----
   Tapa el pequeño flash visual que Chrome hace al procesar window.print()
   (incluso con --kiosk-printing, sin diálogo, igual repinta brevemente),
   mostrando un mensaje propio en vez de exponer ese detalle técnico. */
#print-overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(10, 15, 55, .92);
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  color: #fff;
}
#print-overlay.active { display: flex; }
#print-overlay p { margin: 0; font-size: 13px; font-weight: 700; }
.print-overlay-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: print-spin .8s linear infinite;
}
@keyframes print-spin { to { transform: rotate(360deg); } }

/* =================================================================
   TICKET IMPRIMIBLE — ancho real imprimible 72 mm (rollo de 80 mm,
   impresora PM-802, ver sección 3.1 del documento de proyecto).
   Oculto en pantalla; solo se activa dentro de @media print.
   ================================================================= */
#print-ticket { display: none; }

@media print {
  @page { size: 72mm auto; margin: 3mm 2mm; }

  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  #print-ticket, #print-ticket * { visibility: visible; }

  #print-ticket {
    display: block;
    position: absolute; top: 0; left: 0;
    width: 72mm;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #000;
    font-size: 3.2mm;
    line-height: 1.35;
    text-align: center;
  }
  .pt-logo { display: block; height: 5mm; width: auto; margin: 0 auto .8mm; }
  .pt-comprobante { font-size: 2.6mm; letter-spacing: .3mm; text-transform: uppercase; margin-bottom: 1.5mm; }
  .pt-line { border-top: 0.3mm dashed #000; margin: 2mm 0; }
  .pt-label { font-size: 2.6mm; letter-spacing: .3mm; margin-bottom: .8mm; }
  .pt-folio { font-size: 6mm; font-weight: 800; margin-bottom: .8mm; }
  .pt-date { font-size: 2.6mm; color: #333; }
  .pt-product { font-size: 3.6mm; font-weight: 700; margin-bottom: 1.5mm; }
  .pt-price { font-size: 4.4mm; font-weight: 800; }
  .pt-sku { font-size: 2.6mm; color: #333; margin-top: 1mm; }
  .pt-gracias { font-size: 3mm; font-weight: 700; margin-bottom: 2mm; }
  .pt-barcode { width: 55mm; height: 14mm; margin: 0 auto; }
  .pt-barcode svg { width: 100%; height: 100%; display: block; }
  .pt-barcode-text { font-size: 2.8mm; letter-spacing: .5mm; margin-top: 1mm; }
}