/* Colores y medidas en variables: cambiando estas líneas cambias el aspecto de toda la app.
   Paleta Venova. */
:root {
  --azul-profundo: #0B1020;
  --azul: #2563EB;
  --purpura: #8B5CF6;
  --cian: #22D3EE;
  --gris: #F3F4F6;
  --blanco: #ffffff;
  --texto: #111827;
  --suave: #6B7280;
  --borde: #E5E7EB;
  --verde: #16A34A;
  --rojo: #DC2626;
  --ambar: #F59E0B; /* avisos de "Nova vigila" y del PIN */
  --nova: linear-gradient(135deg, var(--azul), var(--purpura));
  --radio: 16px;
  --sombra: 0 4px 18px rgba(11, 16, 32, .07);
  --alto-nav: 68px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--gris);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--gris); -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
.ico { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.ico svg { width: 100%; height: 100%; }

/* ---------- Estructura: barra + contenido ---------- */
.contenido { padding: 20px 16px calc(var(--alto-nav) + 24px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; height: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--azul-profundo);
}
.nav-marca { display: none; }
.nav-enlace {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #9CA3AF; font-size: 12px; font-weight: 600;
}
.nav-enlace.activo { color: var(--blanco); }
.nav-enlace.activo .ico { color: var(--cian); }

/* En el ordenador, la barra pasa a la izquierda. */
@media (min-width: 860px) {
  .nav {
    top: 0; right: auto; width: 230px; height: auto; flex-direction: column; gap: 6px; padding: 24px 14px;
  }
  .nav-marca { display: flex; align-items: center; gap: 10px; color: var(--blanco); padding: 0 8px 22px; font-size: 15px; }
  .nav-enlace { flex: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
  .nav-enlace.activo { background: rgba(255, 255, 255, .08); }
  .contenido { margin-left: 230px; padding: 36px 40px 40px; max-width: none; }
  .contenido > * { max-width: 920px; }
}

.pie { text-align: center; color: var(--suave); font-size: 12px; padding: 32px 0 8px; }

/* ---------- Cabeceras ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
/* min-width: 0 deja que el texto se parta en vez de salirse por la derecha en el móvil. */
.cabecera > div { min-width: 0; overflow-wrap: anywhere; }
.cabecera h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cabecera p { color: var(--suave); margin-top: 4px; }
.cabecera-inicio { justify-content: flex-start; background: var(--azul-profundo); color: var(--blanco); padding: 22px; border-radius: var(--radio); }
.cabecera-inicio p { color: #CBD5E1; }
.cabecera-inicio p::first-letter { text-transform: uppercase; }

.logo-comercio {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanco); font-weight: 800; font-size: 24px; border: 2px solid rgba(255, 255, 255, .25);
}
.logo-comercio.pequeno { width: 38px; height: 38px; font-size: 17px; }

/* ---------- Botones ---------- */
button { font: inherit; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--azul); color: var(--blanco); font-weight: 700; font-size: 15px; text-align: center; line-height: 1.25;
  transition: transform .1s, filter .15s;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.boton:focus-visible, .boton-icono:focus-visible, .fila-cliente:focus-visible, .nav-enlace:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
.boton-suave { background: var(--blanco); color: var(--texto); border: 1px solid var(--borde); }
.boton-peligro { background: var(--rojo); }
.boton-whatsapp { background: var(--verde); }
.boton-ancho { width: 100%; }
.boton-gigante {
  width: 100%; min-height: 76px; font-size: 20px; border-radius: 20px; margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
}
.boton-gigante .ico { width: 30px; height: 30px; }
.boton-premio { background: var(--nova); box-shadow: 0 10px 24px rgba(139, 92, 246, .35); }

.botones-icono { display: flex; gap: 8px; }
.boton-icono {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--borde); background: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--texto);
}
.boton-icono.peligro { color: var(--rojo); }

/* ---------- Inicio: números clave y Nova ---------- */
.nova-destello { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--nova); color: var(--blanco); }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.numero strong { font-size: 30px; font-weight: 800; color: var(--azul); line-height: 1; }
.numero span { color: var(--suave); font-size: 13px; line-height: 1.35; }
.numero.riesgo strong { color: var(--purpura); }

.nova { background: var(--nova); color: var(--blanco); border-radius: var(--radio); padding: 20px; box-shadow: 0 12px 28px rgba(139, 92, 246, .28); }
.nova-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nova-cabecera h2 { font-size: 20px; }
.nova-cabecera p { opacity: .85; font-size: 14px; margin-top: 2px; }
.nova .nova-destello { background: rgba(255, 255, 255, .18); animation: brillar 2.4s ease-in-out infinite; }
@keyframes brillar { 50% { transform: rotate(45deg) scale(1.08); } }
.nova-vacio { background: rgba(255, 255, 255, .14); padding: 14px; border-radius: 12px; }
.nova-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nova-avisos li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 12px 14px;
}
.nova-avisos li > span:not(.ico) { flex: 1; min-width: 160px; font-weight: 600; line-height: 1.4; }
.nova-ico { width: 26px; height: 26px; color: var(--cian); }
.boton-nova { background: var(--blanco); color: var(--azul-profundo); min-height: 44px; }

/* Lista de clientes de un aviso (dentro del cuadro) */
.lista-aviso { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lista-aviso li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--borde); border-radius: 14px; }
.lista-aviso .fila-datos { flex: 1 1 180px; }
/* En pantallas estrechas los botones bajan a otra línea y ocupan todo el ancho. */
.lista-aviso-botones { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.lista-aviso .boton { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 14px; }

/* ---------- Mensajes ---------- */
.marcadores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.marcadores li { background: var(--gris); border-radius: 10px; padding: 6px 10px; font-size: 13px; color: var(--suave); }
.marcadores code { color: var(--purpura); font-weight: 700; font-size: 13px; }
.mensaje-rejilla { display: grid; gap: 16px; }
@media (min-width: 900px) { .mensaje-rejilla { grid-template-columns: 1fr 1fr; align-items: start; } }
.plantilla-texto {
  display: block; width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--gris);
}
.plantilla-texto:focus { outline: none; border-color: var(--azul); background: var(--blanco); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.sin-guardar.ok { color: var(--verde); }
.burbuja {
  background: #DCF8C6; color: var(--texto); padding: 12px 14px; border-radius: 14px 14px 14px 4px;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px;
}

/* ---------- Clientes ---------- */
.caja-buscador {
  display: flex; align-items: center; gap: 10px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 14px; padding: 0 14px; margin-bottom: 16px; color: var(--suave);
}
.caja-buscador:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.buscador { flex: 1; border: none; outline: none; font: inherit; font-size: 16px; min-height: 52px; background: none; color: var(--texto); }

.lista-clientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-clientes .vacio { text-align: center; color: var(--suave); padding: 30px 10px; }
.fila-cliente {
  display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--blanco);
  border-radius: 14px; box-shadow: var(--sombra);
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: #E0E7FF; color: var(--azul); font-weight: 800;
}
.fila-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-datos strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-datos small { color: var(--suave); }
.fila-sellos { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-weight: 700; font-size: 14px; }
.barra { width: 70px; height: 6px; border-radius: 3px; background: var(--borde); overflow: hidden; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), var(--cian)); border-radius: 3px; }
.etiqueta-premio { background: var(--nova); color: var(--blanco); padding: 3px 9px; border-radius: 99px; font-size: 11px; }

/* ---------- Ficha del cliente ---------- */
.volver { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-weight: 600; margin-bottom: 12px; }
.ficha-rejilla { display: grid; gap: 20px; }
@media (min-width: 720px) { .ficha-rejilla { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; } }
.acciones-tarjeta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.acciones-tarjeta .boton { padding: 0 10px; font-size: 14px; }
.ficha-acciones > .boton-suave { width: 100%; }
.nota { color: var(--suave); font-size: 13px; line-height: 1.5; margin: -8px 0 14px; }
.nota-centro { text-align: center; margin: 16px 0 0; }

.datos-cliente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.datos-cliente div { min-width: 0; background: var(--blanco); border-radius: 14px; padding: 12px; box-shadow: var(--sombra); }
.datos-cliente dt { color: var(--suave); font-size: 12px; }
.datos-cliente dd { margin: 4px 0 0; font-weight: 800; font-size: 18px; }
.datos-cliente div:nth-child(3) dd { font-size: 14px; }

.subtitulo { font-size: 16px; margin-bottom: 10px; }
.historial { list-style: none; margin: 0; padding: 0; background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra); }
.historial li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.historial li:last-child { border-bottom: none; }
.historial li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); margin-top: 6px; flex-shrink: 0; }
.historial span { flex: 1; }
.historial time { color: var(--suave); }
.historial .mov-canje::before { background: var(--purpura); }
.historial .mov-correccion::before { background: var(--rojo); }
.historial .mov-alta::before { background: var(--cian); }

/* Celebración al dar un sello */
.celebracion {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; margin-bottom: 18px; border-radius: var(--radio); background: var(--azul-profundo); color: var(--blanco);
  animation: entrar .35s ease-out;
}
.celebracion.completa { background: var(--nova); }
.celebracion-titulo { font-weight: 700; font-size: 16px; position: relative; }
.celebracion .boton { position: relative; }
.confeti i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px;
  background: hsl(calc(var(--i) * 30), 90%, 62%);
  animation: confeti 1s ease-out forwards; --angulo: calc(var(--i) * 30deg);
}
@keyframes confeti {
  from { transform: rotate(var(--angulo)) translateX(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--angulo)) translateX(160px) scale(.4); opacity: 0; }
}
@keyframes entrar { from { transform: translateY(-8px) scale(.97); opacity: 0; } }

/* ---------- La tarjeta de sellos (app y tarjeta.html) ---------- */
.tarjeta { background: var(--blanco); border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px rgba(11, 16, 32, .14); }
.tarjeta-cabecera {
  display: flex; align-items: center; gap: 14px; padding: 22px;
  background: linear-gradient(135deg, var(--t-color), var(--t-color2)); color: var(--t-texto);
}
.tarjeta-logo {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .5); font-weight: 800; font-size: 24px;
}
.tarjeta-cabecera > div { min-width: 0; overflow-wrap: anywhere; }
.tarjeta-negocio { display: block; font-size: 20px; font-weight: 800; }
.tarjeta-sub { font-size: 13px; opacity: .85; }
.tarjeta-cuerpo { padding: 20px 22px 22px; text-align: center; }
.tarjeta-cliente { font-size: 18px; font-weight: 700; margin-bottom: 16px; overflow-wrap: anywhere; }
.sellos { display: grid; gap: 10px; }
.sello {
  aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #EEF0F3; color: #C7CBD3; border: 2px dashed #D9DCE2;
}
.sello .ico { width: 55%; height: 55%; }
.sello.lleno { background: var(--t-color); color: var(--t-texto); border: 2px solid var(--t-color); }
.sello.nuevo { animation: sellar .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sellar { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tarjeta-contador { margin-top: 16px; font-weight: 800; font-size: 15px; }
.tarjeta-faltan { margin-top: 6px; color: var(--suave); line-height: 1.4; }
.premio-listo {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 14px;
  border-radius: 14px; background: var(--t-color); color: var(--t-texto); text-align: left; line-height: 1.35;
  animation: latir 1.8s ease-in-out infinite;
}
.premio-listo .ico { width: 30px; height: 30px; }
@keyframes latir { 50% { transform: scale(1.03); } }
.tarjeta-fecha { margin-top: 14px; font-size: 12px; color: var(--suave); }

/* Versión pequeña dentro de la ficha */
.tarjeta.mini .tarjeta-cabecera { padding: 16px; }
.tarjeta.mini .tarjeta-logo { width: 42px; height: 42px; font-size: 19px; }
.tarjeta.mini .tarjeta-negocio { font-size: 16px; }
.tarjeta.mini .tarjeta-cuerpo { padding: 16px; }
.tarjeta.mini .tarjeta-cliente { font-size: 15px; margin-bottom: 12px; }
.tarjeta.mini .sellos { gap: 8px; }

/* Página tarjeta.html */
.pagina-tarjeta { background: linear-gradient(180deg, #E5E7EB, var(--gris) 40%); }
.zona-tarjeta { max-width: 440px; margin: 0 auto; padding: 28px 16px 0; display: grid; gap: 16px; }
.zona-tarjeta > * { min-width: 0; }
@media (max-width: 380px) { .tarjeta-cuerpo { padding: 18px 14px; } .sellos { gap: 7px; } }
.enlace-roto { background: var(--blanco); border-radius: 22px; padding: 30px 24px; text-align: center; box-shadow: var(--sombra); }
.enlace-roto .ico { width: 48px; height: 48px; color: var(--purpura); margin-bottom: 10px; }
.enlace-roto h1 { font-size: 20px; margin-bottom: 10px; }
.enlace-roto p { color: var(--suave); line-height: 1.5; }

/* ---------- Cuadros (modal) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(11, 16, 32, .55);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
}
.modal[hidden] { display: none; }
.modal-caja {
  width: 100%; max-width: 440px; background: var(--blanco); border-radius: 22px; padding: 24px;
  animation: entrar .2s ease-out; max-height: 90vh; max-height: calc(100dvh - 32px); overflow: auto;
}
@media (max-width: 400px) { .modal { padding: 10px; } .modal-caja { padding: 20px 16px; } }
@media (min-width: 600px) { .modal { align-items: center; } }
.modal-caja h2 { font-size: 20px; margin-bottom: 12px; }
.modal-caja > p { color: var(--suave); line-height: 1.5; }
.acciones-modal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.acciones-modal .boton { flex: 1; }
.formulario label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.formulario input {
  display: block; width: 100%; margin-top: 6px; min-height: 50px; padding: 0 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--gris);
}
.formulario input:focus { outline: none; border-color: var(--azul); background: var(--blanco); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.formulario .nota { margin: 0; }
.error { color: var(--rojo); font-size: 14px; font-weight: 600; min-height: 1em; margin-top: 8px; }

/* Paginación del historial */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.paginacion span { color: var(--suave); font-size: 14px; font-weight: 600; text-align: center; }
.paginacion .boton { min-height: 44px; padding: 0 10px; font-size: 14px; }
.ico.girar { transform: rotate(180deg); }

/* ---------- Ajustes ---------- */
.oculto { display: none !important; }
.aviso-error { background: #FEE2E2; color: #991B1B; font-weight: 600; line-height: 1.45; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }
.aviso-ok { background: #DCFCE7; color: #166534; font-weight: 600; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }
.panel { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.panel h2 { font-size: 17px; margin-bottom: 14px; }
.panel .nota { margin: 0 0 14px; }
.etiqueta { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
h3.etiqueta { margin-top: 22px; }
.ajustes-rejilla { display: grid; gap: 16px; }
.ajustes-previa { margin-bottom: 8px; }
@media (min-width: 960px) {
  .ajustes-rejilla { grid-template-columns: 1fr 330px; align-items: start; }
  .ajustes-previa { order: 2; position: sticky; top: 24px; }
}
.formulario .selector-color { width: 90px; padding: 4px; cursor: pointer; }
.fila-logo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ajustes-logo .logo-comercio { width: 64px; height: 64px; border: 1px solid var(--borde); }
.botones-logo { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones-icono { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.opcion-icono { position: relative; }
.formulario .opcion-icono input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; margin: 0; }
.formulario .opcion-icono { margin: 0; }
.opcion-caja {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; cursor: pointer;
  border: 2px solid var(--borde); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--suave);
}
.opcion-caja .ico { width: 28px; height: 28px; }
.opcion-icono input:checked + .opcion-caja { border-color: var(--azul); color: var(--azul); background: #EFF6FF; }
.opcion-icono input:focus-visible + .opcion-caja { outline: 3px solid var(--cian); outline-offset: 2px; }
.sin-guardar { color: var(--purpura); font-weight: 600; min-height: 1.5em; margin: 4px 0 10px !important; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Hoja del QR del mostrador (en pantalla y al imprimir) */
.hoja-qr {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  max-width: 360px; margin: 0 auto; padding: 24px; border: 1px dashed var(--borde); border-radius: 14px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hoja-logo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 32px;
}
.hoja-negocio { font-size: 20px; overflow-wrap: anywhere; }
.hoja-qr { width: 100%; }
.hoja-titulo { font-size: 22px; font-weight: 800; }
.hoja-codigo { width: 100%; max-width: 260px; }
.hoja-codigo svg { display: block; width: 100%; height: auto; }
.hoja-frase { color: #374151; line-height: 1.5; font-size: 14px; }
.hoja-pie { color: var(--suave); font-size: 11px; }

#impresion { display: none; }
@media print {
  body > :not(#impresion) { display: none !important; }
  #impresion { display: block; }
  #impresion .hoja-qr { max-width: none; border: none; padding: 40px 20px; gap: 18px; }
  #impresion .hoja-logo { width: 120px; height: 120px; font-size: 52px; }
  #impresion .hoja-negocio { font-size: 30px; }
  #impresion .hoja-titulo { font-size: 38px; }
  #impresion .hoja-codigo { max-width: 420px; }
  #impresion .hoja-frase { font-size: 20px; max-width: 520px; }
  #impresion .hoja-pie { font-size: 13px; }
}

/* Menos movimiento si la persona lo prefiere en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Controles antifraude --- */
.formulario select {
  display: block; margin-top: 6px; min-height: 50px; padding: 0 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--gris);
}
.formulario select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.fila-monto { display: flex; gap: 10px; }
.fila-monto label:first-child { flex: 1; min-width: 0; }
.modal-caja .formulario > .nota { margin-bottom: 14px; }
.aviso-alerta { background: #FEF3C7; color: #92400E; border: 1px solid var(--ambar); font-weight: 600; line-height: 1.45; padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }

/* Nova vigila: alertas con borde ámbar dentro del bloque Nova */
.nova-avisos li.alerta { border: 2px solid var(--ambar); background: rgba(245, 158, 11, .22); }
.nova-avisos li.alerta .nova-ico { color: #FCD34D; }
.nova-avisos li.alerta small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #FDE68A; }
.lista-aviso .fila-datos small { display: block; }

/* Historial: referencia, monto y "autorizado por el dueño" */
.historial small { display: block; color: var(--suave); font-size: 12px; margin-top: 3px; }
.historial .marca-pin { color: var(--purpura); font-weight: 700; }
.historial time { text-align: right; font-size: 13px; }

/* Ajustes bloqueado hasta dar el PIN */
.bloqueado { text-align: center; display: grid; justify-items: center; gap: 14px; }
.bloqueado .ico { width: 40px; height: 40px; color: var(--purpura); }

/* Seguimiento de los avisos de Nova: progreso, casos atendidos (verde) y avisos completos */
.nova-avisos .progreso { display: block; font-style: normal; font-weight: 500; font-size: 12px; opacity: .9; margin-top: 3px; }
.nova-avisos li.completo, .nova-avisos li.alerta.completo { border: 1px solid #86EFAC; background: rgba(22, 163, 74, .32); padding: 8px 12px; gap: 10px; }
.nova-avisos li.completo > span:not(.ico) { font-size: 13px; font-weight: 500; }
.nova-avisos li.completo .nova-ico { width: 20px; height: 20px; color: #BBF7D0; }
.nova-avisos li.completo .boton-nova { min-height: 36px; padding: 0 14px; font-size: 13px; }
.progreso-casos { font-weight: 700; color: var(--verde); margin-top: 8px; }
.lista-aviso li.atendido { background: #F0FDF4; border-color: #BBF7D0; }
.lista-aviso .marca-ok { color: var(--verde); font-weight: 700; }
.pin-caso { flex: 1 1 100%; }
.pin-caso label { margin-bottom: 4px; }
.historial .mov-nota::before { background: var(--suave); }