:root {
  --tinta: #1c1d21;
  --suave: #5c5f66;
  --tenue: #8a8d94;
  --linea: #e3e4e8;
  --fondo: #f6f6f8;
  --blanco: #ffffff;
  --acento: #2447d6;
  --acento-hover: #1b38ad;
  --acento-claro: #eaeefc;
  --ok: #17784a;
  --ok-claro: #e6f4ec;
  --alerta: #9a6100;
  --alerta-claro: #fdf3e1;
  --error: #b42318;
  --error-claro: #fdeceb;
  --radio: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
small, .tenue { color: var(--suave); }

/* ---------- Barra superior ---------- */
.barra { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.barra-dentro {
  max-width: 1100px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marca { font-weight: 700; font-size: 1.1rem; color: var(--tinta); letter-spacing: -.01em; }
.marca:hover { text-decoration: none; }
.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
.barra nav a {
  color: var(--suave); padding: .35rem .65rem; border-radius: 8px; font-size: .92rem;
}
.barra nav a:hover { background: var(--fondo); text-decoration: none; color: var(--tinta); }
.barra nav a.activo { background: var(--acento-claro); color: var(--acento); font-weight: 600; }

/* ---------- Contenido ---------- */
main { margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main.normal { max-width: 1100px; }
main.angosto { max-width: 480px; }
main.medio { max-width: 760px; }
body.simple main { padding-top: 2.5rem; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.25rem; margin-bottom: 1rem;
}
.tarjeta > :last-child { margin-bottom: 0; }

.encabezado-pagina {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.encabezado-pagina h1 { margin: 0; }

.rejilla { display: grid; gap: 1rem; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.metricas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: 1rem; }
.metrica { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; }
.metrica .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metrica .etiqueta { font-size: .85rem; color: var(--suave); }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.campo { margin-bottom: 1rem; }
.ayuda { font-size: .85rem; color: var(--suave); margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--blanco);
  border: 1px solid #cfd1d7; border-radius: 8px; padding: .6rem .7rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento-claro); border-color: var(--acento);
}
select { height: 2.83rem; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; vertical-align: -3px; }
.casilla { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }

.fila-campos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- Botones ---------- */
.boton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  padding: .6rem 1rem; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento); color: #fff; text-decoration: none; line-height: 1.2;
}
.boton:hover, button:hover { background: var(--acento-hover); border-color: var(--acento-hover); text-decoration: none; }
.boton.secundario, button.secundario { background: var(--blanco); color: var(--tinta); border-color: #cfd1d7; }
.boton.secundario:hover, button.secundario:hover { background: var(--fondo); }
.boton.peligro, button.peligro { background: var(--blanco); color: var(--error); border-color: #f1b7b1; }
.boton.peligro:hover, button.peligro:hover { background: var(--error-claro); }
.boton.chico, button.chico { padding: .35rem .65rem; font-size: .85rem; }
.boton.ancho, button.ancho { width: 100%; padding: .8rem 1rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.en-linea { display: inline; }

/* ---------- Avisos ---------- */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .95rem; border: 1px solid; }
.aviso-ok { background: var(--ok-claro); border-color: #b7dfc8; color: #0f5534; }
.aviso-error { background: var(--error-claro); border-color: #f1b7b1; color: #8a1a12; }
.aviso-info { background: var(--acento-claro); border-color: #c4cff5; color: #1a3399; }
.aviso-alerta { background: var(--alerta-claro); border-color: #f0d6a5; color: #6b4300; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; background: #fafafb; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .04em; }
.cortar { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.estado { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.estado-nueva { background: #eeeff2; color: #4a4d55; }
.estado-activa { background: var(--ok-claro); color: var(--ok); }
.estado-desactivada { background: var(--error-claro); color: var(--error); }
.marca-nfc { font-size: .75rem; color: var(--suave); }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.filtros input[type=search] { max-width: 260px; }
.filtros select { width: auto; }

.paginas { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

/* ---------- Grafica de escaneos ---------- */
.grafica { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: .5rem; }
.grafica .barra-dia { flex: 1; background: var(--acento); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.grafica .barra-dia.cero { background: var(--linea); }
.grafica-ejes { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tenue); margin-top: .3rem; }

/* ---------- Paginas publicas (escaneo) ---------- */
.publica { text-align: left; }
.publica .icono-grande {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--acento-claro); color: var(--acento); margin-bottom: 1rem;
}
.pie-publico { text-align: center; font-size: .8rem; color: var(--tenue); margin-top: 1.5rem; }
.separador { display: flex; align-items: center; gap: .75rem; color: var(--tenue); font-size: .85rem; margin: 1.25rem 0; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.pasos { padding-left: 1.2rem; margin: .25rem 0 0; font-size: .9rem; color: var(--suave); }
.pasos li { margin-bottom: .2rem; }
details.ayuda-link { font-size: .9rem; margin-top: .4rem; }
details.ayuda-link summary { cursor: pointer; color: var(--acento); }

/* ---------- Diseno y hoja ---------- */
.lienzo-envoltura { background: repeating-conic-gradient(#eceef2 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: flex; justify-content: center; }
.editor-placa { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); overflow: hidden; touch-action: none; }
.editor-placa img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.editor-placa .caja-qr { position: absolute; border: 2px dashed var(--acento); background: rgba(36,71,214,.08); cursor: move; display: flex; align-items: center; justify-content: center; }
.editor-placa .caja-qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.editor-placa .margen-seguro { position: absolute; border: 1px dashed rgba(0,0,0,.35); pointer-events: none; }
.vista-hoja { max-width: 100%; height: auto; border: 1px solid var(--linea); background: repeating-conic-gradient(#eceef2 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.vista-placa { display: block; width: 100%; max-width: 380px; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ficha-diseno { margin-bottom: 0; display: flex; flex-direction: column; }
.ficha-diseno h3 { margin: .85rem 0 .15rem; }
.ficha-diseno p { margin-bottom: .75rem; }
.ficha-diseno .acciones { margin-top: auto; }
.miniatura { position: relative; display: block; width: 100%; background: repeating-conic-gradient(#eceef2 0% 25%, #fff 0% 50%) 50% / 14px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.18); overflow: hidden; }
.miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; }
.miniatura .hueco-qr { position: absolute; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--acento); background: rgba(255,255,255,.85); color: var(--acento); font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.progreso { height: 8px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.progreso > div { height: 100%; background: var(--acento); width: 0; transition: width .2s; }

/* ---------- Estacion de grabado ---------- */
.estacion { text-align: center; }
.estacion video { width: 100%; max-width: 420px; border-radius: var(--radio); background: #000; }
.estacion .paso-grande { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 .5rem; }
.circulo-nfc {
  width: 120px; height: 120px; margin: 1rem auto; border-radius: 50%;
  border: 3px solid var(--acento); display: flex; align-items: center; justify-content: center;
  color: var(--acento); font-weight: 700;
}
.circulo-nfc.esperando { animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .circulo-nfc.esperando { animation: none; } }

.oculto { display: none !important; }

@media (max-width: 640px) {
  h1 { font-size: 1.3rem; }
  .barra nav { margin-left: 0; width: 100%; }
  .tarjeta { padding: 1rem; }
  th, td { padding: .5rem .55rem; }
  .ocultar-movil { display: none; }
  .metrica { padding: .7rem .75rem; }
  .metrica .valor { font-size: 1.35rem; }
  .metrica .etiqueta { font-size: .78rem; }
}