/* ===========================================================================
   foto_a_laser · lo PROPIO de esta herramienta
   ---------------------------------------------------------------------------
   🔴 Aquí NO hay ni un color, ni un tamaño de letra, ni un radio escritos a
   mano. Todo sale de los tokens de `marca.css`, el sistema de Import Asia.

   Y 🔴 NO SE REINVENTAN LOS COMPONENTES QUE EL SISTEMA YA TRAE. La versión
   anterior de esta hoja se inventó `.chip.listo` y `.chip.error` cuando
   marca.css ya define `.chip.ok`, `.chip.ambar`, `.chip.rojo`, `.chip.acento`
   y `.chip.marca`. Dos vocabularios para lo mismo es exactamente cómo dos
   productos de la misma casa dejan de parecerse.

   Las medidas de espaciado y el ancho del marco son los del Anidador, para
   que las dos herramientas se sientan iguales al pasar de una a otra.
   =========================================================================== */

/* --------------------------------------------------------------- la barra -- */
.ia-logo .sep {
  width: 1px; height: 22px; display: inline-block; background: var(--barra-linea);
}
.ia-logo .producto { font-weight: 600; color: var(--sobre-barra-2); }
.nav-sesion { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-sesion a, .der a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  color: var(--sobre-barra-2); text-decoration: none;
  padding: 8px 12px; border-radius: var(--r-campo);
  font-size: var(--t-cuerpo); min-height: var(--tactil-minimo);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.nav-sesion a:hover, .der a:hover { background: var(--barra-velo); color: var(--sobre-barra); }
.nav-sesion a[aria-current="page"] { background: var(--barra-velo-alto); color: var(--sobre-barra); }
.der { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.der .quien { font-family: var(--mono); color: var(--sobre-barra); }
.der .solo-ancho { font-size: var(--t-meta); color: var(--sobre-barra-3); }
@media (max-width: 760px) { .der .solo-ancho { display: none; } }

/* --------------------------------------------------------------- el marco -- */
.wrap { max-width: 1200px; margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-10); }
.cabecera { margin: var(--e-5) 0 var(--e-6); }
.cabecera h1 {
  margin: 0 0 var(--e-2); font-size: var(--t-h1); line-height: 1.15;
  display: inline-block; padding-bottom: var(--e-2);
  /* el ámbar como SUBRAYADO, nunca como texto: con tinta blanca da 1,77:1 */
  border-bottom: 3px solid var(--marca);
}
.cabecera .sub { margin: 0; color: var(--text2); max-width: 64ch; line-height: 1.5; }

.nota-sesion {
  display: flex; align-items: center; gap: var(--e-2);
  margin: var(--e-4) 0 0; color: var(--text3); font-size: var(--t-meta);
}
.nota-sesion .ic { color: var(--accent); }

.caja {
  background: var(--surface1); border: 1px solid var(--border1);
  border-radius: var(--r-panel); padding: var(--e-5);
}
.tarjeta { margin-bottom: var(--e-5); }
.tarjeta h2, .caja h2 {
  margin: 0 0 var(--e-3); font-size: var(--t-h2);
  display: flex; align-items: center; gap: var(--e-2);
}
.tarjeta h2 .ic, .caja h2 .ic { color: var(--accent); }
.rejilla {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.bloque { margin: var(--e-5) 0; }

/* Texto: los mismos nombres que usa el Anidador, para no tener dos idiomas */
.nota   { color: var(--text2); font-size: var(--t-meta); }
.tenue  { color: var(--text3); }
.tit    { font-weight: 600; color: var(--text1); }
.grande { font-size: var(--t-h2); }
.ok-txt { color: var(--success); font-weight: 600; }
.mal-txt{ color: var(--danger);  font-weight: 600; }

/* El consejo: fondo suave y filete de acento. NO es un `.aviso` —eso es para
   algo que hay que atender—; esto es para algo que conviene saber. */
.tip {
  display: flex; gap: var(--e-3); margin-top: var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--surface2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-campo) var(--r-campo) 0;
  font-size: var(--t-cuerpo); color: var(--text2);
}
.tip .ic { color: var(--accent); margin-top: 2px; }

.lista-porques { color: var(--text2); line-height: 1.7; margin: var(--e-3) 0 0; padding-left: 1.15em; }
.lista-porques li { margin-bottom: var(--e-2); }

.pie {
  margin-top: var(--e-10); padding-top: var(--e-4);
  border-top: 1px solid var(--border1);
  display: flex; gap: var(--e-4); flex-wrap: wrap;
  color: var(--text3); font-size: var(--t-meta);
}

/* ----------------------------------------------------------- el asistente -- */
.pasos {
  display: flex; gap: var(--e-5); flex-wrap: wrap;
  margin: 0 0 var(--e-6); padding: 0; list-style: none;
}
.pasos li {
  display: flex; align-items: center; gap: var(--e-2);
  color: var(--text3); font-size: var(--t-cuerpo);
}
.pasos .n {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface2); color: var(--text2);
  font-weight: 700; font-size: var(--t-sello);
  border: 1px solid var(--border2);
}
.pasos li[aria-current="step"] { color: var(--text1); font-weight: 600; }
/* 🔴 EL ÚNICO sitio donde el ámbar sale de su propio círculo */
.pasos li[aria-current="step"] .n {
  background: var(--marca); color: var(--marca-tinta); border-color: var(--marca);
  box-shadow: 0 0 0 5px var(--marca-halo);
}
.pasos li.hecho .n { background: var(--success); color: #fff; border-color: transparent; }
.pasos li.hecho { color: var(--text2); }

/* ------------------------------------------------------------- la entrada -- */
/* 🔴 Rejilla ASIMÉTRICA, no dos tarjetas iguales. El QR manda y la explicación
   acompaña: con dos columnas iguales el código queda pequeño en una pantalla
   ancha, que es donde se lee. */
.entrar {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--e-8); align-items: start; margin-top: var(--e-2);
}
@media (max-width: 760px) { .entrar { grid-template-columns: 1fr; } }

.qr-caja {
  background: var(--surface1); border: 1px solid var(--border1);
  border-radius: var(--r-panel); padding: var(--e-5);
  text-align: center; box-shadow: var(--sombra-1);
}
/* 🔴 El SVG llega SIN width/height y CON viewBox (segno, `omitsize`), que es lo
   único que permite escalarlo. Si alguien vuelve a generarlo con tamaño fijo,
   esta regla deja de hacer nada y el código sale diminuto: pasó en producción.
   Y va sobre --papel en los DOS temas: un lector necesita el contraste del
   papel, y en oscuro un QR gris no se lee. */
.qr-caja .qr {
  width: 100%; height: auto; max-width: 260px;
  background: var(--papel); border-radius: var(--r-campo);
  padding: var(--e-2); box-sizing: border-box;
  shape-rendering: crispEdges;
}
.qr-caja .codigo {
  font-family: var(--mono); font-size: 28px; font-weight: 700;
  letter-spacing: .18em; margin: var(--e-3) 0 var(--e-1);
  color: var(--text1); user-select: all;
}
.qr-caja .pista { text-align: left; }

/* el tiempo: chip con icono y barra que baja. Un número a secas no se mira */
.vigencia { display: flex; justify-content: center; margin: var(--e-4) 0 var(--e-2); }
.barra {
  height: 10px; min-width: 120px; overflow: hidden;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: var(--r-chip);
}
.barra span {
  display: block; height: 100%; background: var(--accent);
  transition: width 1s linear;
}
.estado {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  margin: var(--e-4) 0 0; color: var(--text2); font-size: var(--t-meta);
}
.estado .ic { color: var(--accent); }

/* 🔴 `.aviso` NO se redefine aquí: marca.css ya trae .aviso.ok, .ambar, .rojo
   e .info. Pisarlo con una variante propia («malo», «bien») era inventar un
   segundo vocabulario para lo mismo. Solo se le da separación vertical. */
.aviso { margin: var(--e-4) 0; }

/* --------------------------------------------------------- formularios --- */
.rejilla-campos {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: var(--e-5);
}
.campo .ayuda {
  font-size: var(--t-meta); color: var(--text3);
  font-weight: 400; letter-spacing: normal; text-transform: none;
}
input[type=text], input[type=number], input[type=file], select {
  width: 100%; min-height: var(--alto-campo);
  padding: 0 12px; border: 1px solid var(--border-campo);
  border-radius: var(--r-campo); background: var(--papel);
  color: var(--text1); font: inherit;
}
input[type=file] { padding: 9px 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-campo);
  padding: 0 var(--e-5); min-height: var(--alto-boton);
  font-family: var(--tipo); font-weight: 600; font-size: var(--t-cuerpo);
  /* MARINO en la acción principal: decisión del usuario del 2026-09-10 */
  background: var(--marino); color: var(--sobre-barra);
  transition: background var(--mov-rapido);
}
.btn:hover { background: var(--marino-hondo); }
.btn.plano {
  background: transparent; color: var(--text1); border-color: var(--border-campo);
  min-height: var(--alto-boton-corto); font-weight: 500;
}
.btn.plano:hover { background: var(--surface2); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 0; }

/* -------------------------------------------------------------- resultado -- */
.previa-marco {
  background: var(--papel); padding: var(--e-3);
  border-radius: var(--r-panel); border: 1px solid var(--border1); overflow: auto;
}
.previa-marco img { display: block; max-width: 100%; image-rendering: pixelated; }

dl.datos {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-4); margin: 0; font-size: var(--t-cuerpo);
}
dl.datos dt { color: var(--text3); }
dl.datos dd { margin: 0; font-family: var(--mono); color: var(--text1); }
dl.datos dd.prosa { font-family: var(--tipo); color: var(--text2); }

/* ------------------------------------------------------------------ tabla -- */
.tabla-marco { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-fila); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border1); }
th {
  color: var(--text3); font-size: var(--t-etiqueta); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
}
td.num, th.num { text-align: right; font-family: var(--mono); }
td code { font-family: var(--mono); font-size: var(--t-meta); color: var(--text2); }
.descargas { display: flex; gap: var(--e-2); flex-wrap: wrap; }