/* componentes.css — componentes reutilizables de la marca NORA V1 (botón, tarjeta, alerta, insignia, campo, pasos, QR, progreso). Solo tokens; ningún color suelto. */

/* ── botón ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nora-e2);
  min-height: var(--nora-objetivo); padding: 10px 20px; border-radius: var(--nora-radio-sm);
  font: 600 var(--nora-t-md)/1.2 var(--nora-fuente); cursor: pointer; text-decoration: none;
  border: 2px solid transparent; background: var(--nora-superficie); color: var(--nora-texto);
}
.boton:hover { filter: brightness(0.96); }
.boton:active { filter: brightness(0.92); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.boton.primario { background: var(--nora-naranja); color: var(--nora-sobre-naranja); border-color: var(--nora-sobre-naranja); }
.boton.secundario { background: var(--nora-superficie); color: var(--nora-texto); border-color: var(--nora-borde); }
.boton.texto { background: transparent; color: var(--nora-naranja-texto); border-color: transparent; text-decoration: underline; padding-left: 8px; padding-right: 8px; }
.boton.peligro { background: var(--nora-superficie); color: var(--nora-error); border-color: var(--nora-error); }

/* ── tarjeta ── */
.tarjeta { background: var(--nora-superficie); border: 1px solid var(--nora-linea); border-radius: var(--nora-radio); padding: var(--nora-e5); box-shadow: var(--nora-sombra); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta.destacada { border-top: 6px solid var(--nora-naranja); }

/* ── alerta (icono + texto: nunca solo color) ── */
.alerta { display: flex; gap: var(--nora-e3); align-items: flex-start; padding: var(--nora-e4); border-radius: var(--nora-radio-sm); border: 1px solid var(--nora-borde); background: var(--nora-info-fondo); color: var(--nora-texto); }
.alerta > .icono { flex: 0 0 auto; font-weight: 800; width: 1.6em; text-align: center; }
.alerta .cuerpo { flex: 1 1 auto; min-width: 0; }
.alerta .cuerpo > :last-child { margin-bottom: 0; }
.alerta .titulo { font-weight: 650; margin: 0 0 var(--nora-e1); }
.alerta.ok { background: var(--nora-ok-fondo); border-color: var(--nora-ok); }
.alerta.aviso { background: var(--nora-aviso-fondo); border-color: var(--nora-aviso); }
.alerta.error { background: var(--nora-error-fondo); border-color: var(--nora-error); }
.alerta.marca { background: var(--nora-naranja-suave); border-color: var(--nora-naranja-texto); }

/* ── insignia de estado ── */
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--nora-t-sm); font-weight: 650; border: 1px solid var(--nora-borde); background: var(--nora-superficie); }
.insignia.ok { color: var(--nora-ok); border-color: var(--nora-ok); background: var(--nora-ok-fondo); }
.insignia.aviso { color: var(--nora-aviso); border-color: var(--nora-aviso); background: var(--nora-aviso-fondo); }
.insignia.error { color: var(--nora-error); border-color: var(--nora-error); background: var(--nora-error-fondo); }

/* ── campo de formulario ── */
.campo { display: flex; flex-direction: column; gap: var(--nora-e1); }
.campo label { font-weight: 650; }
.campo .ayuda { color: var(--nora-texto-suave); font-size: var(--nora-t-sm); }
.campo .error { color: var(--nora-error); font-weight: 600; font-size: var(--nora-t-sm); }
.campo input { min-height: var(--nora-objetivo); padding: 8px 12px; font: inherit; border: 2px solid var(--nora-borde); border-radius: var(--nora-radio-sm); background: var(--nora-superficie); color: var(--nora-texto); max-width: 14em; letter-spacing: 0.12em; }
.campo input[aria-invalid="true"] { border-color: var(--nora-error); }

/* ── pasos (stepper) ── */
.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--nora-e2); margin: 0; padding: 0; }
.pasos li { margin: 0; }
.paso { display: inline-flex; align-items: center; gap: var(--nora-e2); min-height: var(--nora-objetivo); padding: 6px 14px; border-radius: 999px; border: 2px solid var(--nora-linea); background: var(--nora-superficie); color: var(--nora-texto); text-decoration: none; font-weight: 600; font-size: var(--nora-t-sm); }
.paso .estado { font-weight: 500; color: var(--nora-texto-suave); }
.paso[aria-current="step"] { border-color: var(--nora-foco); }
.paso.hecho .estado { color: var(--nora-ok); font-weight: 650; }
.paso .num { flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--nora-t-xs); font-weight: 750; border: 2px solid var(--nora-borde); background: var(--nora-superficie); color: var(--nora-texto); }
.paso.hecho .num { background: var(--nora-ok); border-color: var(--nora-ok); color: var(--nora-superficie); }
.paso.pendiente { color: var(--nora-texto-suave); border-style: dashed; }
.paso[aria-current="step"] .num { background: var(--nora-naranja); border-color: var(--nora-sobre-naranja); color: var(--nora-sobre-naranja); }
.paso[aria-current="step"] { border-width: 3px; }
.paso.atencion .num { border-color: var(--nora-naranja-texto); color: var(--nora-naranja-texto); }
.paso.atencion { border-color: var(--nora-naranja-texto); }
.paso.atencion .estado { color: var(--nora-naranja-texto); font-weight: 650; }

/* ── QR ── */
.qr-marco { display: inline-block; padding: var(--nora-e3); background: #FFFFFF; border: 2px solid var(--nora-texto); border-radius: var(--nora-radio); line-height: 0; }
.qr-marco svg { width: 264px; height: 264px; max-width: 70vw; max-height: 70vw; }
.qr-vacio { width: 264px; height: 264px; max-width: 70vw; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--nora-e4); line-height: 1.4; color: var(--nora-texto-suave); }

/* ── progreso indeterminado ── */
.progreso { position: relative; height: 6px; border-radius: 3px; background: var(--nora-linea); overflow: hidden; }
.progreso::before { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: var(--nora-naranja); border-radius: 3px; animation: nora-corre 1.4s ease-in-out infinite; }
@keyframes nora-corre { to { left: 100%; } }

/* ── documentos legales y lista de funciones (NORA-V1-FEATURE-UX-FREEZE) ── */
.documento { max-height: 22rem; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: var(--nora-e3); background: var(--nora-superficie); border: 2px solid var(--nora-borde); border-radius: var(--nora-radio); font: var(--nora-t-sm)/1.5 var(--nora-fuente); }
.documento:focus-visible { outline: 3px solid var(--nora-foco); outline-offset: 2px; }
.lista-funciones, .lista-pasos-legales { padding-left: var(--nora-e5); display: grid; gap: var(--nora-e3); }
.nota { color: var(--nora-texto-suave); font-size: var(--nora-t-sm); margin: var(--nora-e1) 0 0; }

/* ── lista de datos ── */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--nora-e2) var(--nora-e4); margin: 0 0 var(--nora-e3); }
.datos dt { color: var(--nora-texto-suave); }
.datos dd { margin: 0; font-weight: 600; }
@media (max-width: 520px) { .datos { grid-template-columns: 1fr; } }

.enlace-visible { word-break: break-all; font-size: var(--nora-t-sm); }
.avisos-zona { max-width: var(--nora-ancho); margin: 0 auto; padding: var(--nora-e4) var(--nora-e4) 0; display: grid; gap: var(--nora-e3); }