/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — Automatización y puente físico-digital
   Complementa assets/estilos.css (se enlaza DESPUÉS y no lo modifica).
   Acá viven solo las piezas que esta página necesita y el sistema no traía:
   migas, el diagrama de convergencia del encabezado, el diagrama de cuatro
   columnas del puente y las mini-maquetas de las herramientas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Migas de pan ──────────────────────────────────────────────────── */
.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-suave); margin: 0 0 26px;
}
.migas a { color: var(--tinta-suave); border-bottom: 1px solid transparent; }
.migas a:hover { color: var(--verde-vivo); border-bottom-color: var(--verde-vivo); }
.migas i { font-style: normal; opacity: .38; }
.migas b { font-weight: 500; color: var(--verde-vivo); }

/* Titular de encabezado: la frase es larga, así que baja el techo del clamp. */
.titulo-hero { font-size: clamp(32px, 4.2vw, 50px); }

/* ── Diagrama de convergencia (encabezado) ─────────────────────────────
   Cuatro entradas del mundo real bajan a un nodo de reglas y de ahí salen
   al panel del sistema. Todo es CSS y SVG: no hay imágenes que cargar. */
.convergencia { display: grid; gap: 0; }

.conv-entradas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.conv-entrada {
  border: 1px solid var(--panel-borde); border-radius: 3px;
  background: rgba(22, 33, 27, .55); padding: 15px 8px; text-align: center;
}
.conv-entrada svg { width: 22px; height: 22px; color: var(--verde-vivo); margin: 0 auto 10px; display: block; }
.conv-entrada span {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tinta-suave);
}

.conv-lineas { display: block; width: 100%; height: 52px; }
.conv-baja { display: block; width: 100%; height: 30px; }

.conv-nodo {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid var(--verde); background: var(--verde-tenue);
  border-radius: 3px; padding: 15px 20px; text-align: left;
}
.conv-nodo svg { width: 30px; height: 27px; flex: none; }
.conv-nodo-nombre { font-family: var(--serif); font-size: 17px; letter-spacing: .16em; line-height: 1; }
.conv-nodo-nombre em { font-style: normal; color: var(--verde-vivo); }
.conv-nodo small {
  display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-suave); margin-top: 7px;
}

@media (max-width: 560px) {
  .conv-entradas { grid-template-columns: repeat(2, 1fr); }
  .conv-lineas { display: none; }
  /* Sin las curvas, un solo tramo vertical mantiene la lectura del flujo. */
  .conv-nodo { position: relative; margin-top: 40px; }
  .conv-nodo::before {
    content: ""; position: absolute; left: 50%; top: -34px;
    width: 1px; height: 28px; background: var(--panel-borde);
  }
}

/* ── Retícula de nueve soluciones ──────────────────────────────────── */
.tarjetas-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tarjetas-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tarjetas-3 { grid-template-columns: 1fr; } }

/* ── Los cinco pasos, encadenados por una línea ────────────────────── */
.pasos-flujo .paso { position: relative; padding-top: 28px; }
.pasos-flujo .paso::before {
  content: ""; position: absolute; top: 0; left: 0; right: -22px;
  height: 1px; background: var(--crema-borde);
}
.pasos-flujo .paso:last-child::before { right: 0; }
.pasos-flujo .paso::after {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--crema); border: 1px solid var(--verde);
}
@media (max-width: 900px) { .pasos-flujo .paso::before { right: 0; } }

/* ── Diagrama del puente: cuatro columnas encadenadas ──────────────── */
.puente { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px; }
.puente-col { position: relative; }
.puente-col h3 {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--verde-vivo);
}
.puente-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.puente-lista li {
  border: 1px solid var(--panel-borde); border-radius: 3px;
  padding: 11px 14px; font-size: 13px; color: var(--tinta-suave);
}
.puente-col.es-centro .puente-lista li {
  border-color: var(--verde); background: rgba(63, 107, 74, .18); color: var(--tinta-clara);
}
.puente-col.es-final .puente-lista li { border-style: dashed; }

/* La flecha vive en el espacio entre columnas: no ensancha nada. */
.puente-col + .puente-col::before {
  content: ""; position: absolute; left: -30px; top: 3px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--verde); border-right: 1px solid var(--verde);
  transform: rotate(45deg);
}
@media (max-width: 900px) {
  .puente { grid-template-columns: 1fr; gap: 42px; }
  .puente-col + .puente-col::before {
    left: 50%; top: -27px; margin-left: -5px; transform: rotate(135deg);
  }
}

/* ── Herramientas: tarjeta oscura + mini-maqueta de lo que produce ──── */
.herramientas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .herramientas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .herramientas { grid-template-columns: 1fr; } }

.herramienta { border: 1px solid var(--panel-borde); background: var(--noche); border-radius: 4px; padding: 20px; }
.herramienta h3 { font-family: var(--sans); font-size: 15px; font-weight: 500; margin-top: 20px; }
.herramienta p { font-size: 13px; color: var(--tinta-suave); margin-top: 10px; }

.mini {
  position: relative; height: 200px; overflow: hidden;
  border: 1px solid var(--panel-borde); border-radius: 3px;
  background: var(--panel); padding: 14px;
}
/* Texto "redactado": barras en vez de datos inventados. */
.txt { display: block; height: 7px; border-radius: 2px; background: rgba(233, 231, 223, .17); }
.hoja .txt { background: rgba(22, 33, 27, .17); }

/* Hoja clara compartida por la factura, la etiqueta y el código. */
.hoja {
  background: var(--crema); color: var(--tinta-oscura);
  border-radius: 2px; padding: 12px; height: 100%;
}

/* 1 · Documento tributario electrónico */
.doc-sello {
  border: 1px solid #b4402f; color: #b4402f; border-radius: 2px;
  font-size: 7.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px; text-align: center; line-height: 1.5;
}
.doc-lineas { display: grid; gap: 7px; margin-top: 14px; }
.doc-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(22, 33, 27, .22); margin-top: 14px; padding-top: 9px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-media);
}
.doc-total b { font-family: var(--serif); font-size: 15px; letter-spacing: 0; color: var(--tinta-oscura); }

/* 2 · Etiqueta de envío */
.env-tit {
  font-size: 8px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tinta-media); display: flex; justify-content: space-between;
  border-bottom: 1px solid rgba(22, 33, 27, .18); padding-bottom: 7px;
}
.env-tit b { color: var(--tinta-oscura); }
.env-lineas { display: grid; gap: 6px; margin: 11px 0 12px; }
.env-barras {
  height: 36px;
  background-image: repeating-linear-gradient(90deg,
    #16211b 0 2px, transparent 2px 4px, #16211b 4px 7px, transparent 7px 9px,
    #16211b 9px 10px, transparent 10px 13px);
}
.env-cod {
  font-size: 8px; letter-spacing: .34em; text-align: center;
  color: var(--tinta-media); margin-top: 7px;
}

/* 3 · Tabla de inventario */
.inv { display: grid; gap: 1px; background: var(--panel-borde); border: 1px solid var(--panel-borde); border-radius: 2px; }
.inv-fila {
  display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center;
  background: var(--panel); padding: 9px 11px;
}
.inv-fila b { font-size: 11px; font-weight: 500; text-align: right; color: var(--tinta-clara); }
.inv-enc { background: var(--noche-2); }
.inv-enc span { font-size: 8px; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-suave); }
.inv-enc span:last-child { text-align: right; }
.inv-baja b { color: #d9a15c; }
.inv-baja { box-shadow: inset 2px 0 0 #d9a15c; }

/* 4 · Alertas */
.alerta-caja {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--panel-borde); border-radius: 3px; padding: 12px;
  margin-bottom: 10px;
}
.alerta-caja svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alerta-caja b { display: block; font-size: 11.5px; font-weight: 500; }
.alerta-caja span { display: block; font-size: 10px; color: var(--tinta-suave); margin-top: 4px; }
.alerta-aviso { border-color: rgba(217, 161, 92, .55); }
.alerta-aviso svg { color: #d9a15c; }
.alerta-ok svg { color: var(--verde-vivo); }

/* 5 · Código impreso */
.cod-grid { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; height: 100%; }
.qr { width: 74px; height: 74px; display: block; }
.cod-datos { display: grid; gap: 7px; }
.cod-datos span {
  font-size: 7.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-media);
}

/* 6 · App móvil escaneando */
.fono {
  width: 108px; height: 100%; margin: 0 auto;
  border: 1px solid var(--panel-borde); border-radius: 10px;
  background: var(--noche); padding: 9px; display: grid;
  grid-template-rows: auto 1fr auto; gap: 8px;
}
.fono-barra { width: 32px; height: 3px; border-radius: 2px; background: var(--panel-borde); margin: 0 auto; }
.visor { position: relative; border: 1px solid var(--panel-borde); border-radius: 3px; background: rgba(63, 107, 74, .10); }
.esq { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--verde-vivo); }
.e1 { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.e2 { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.e3 { bottom: 7px; left: 7px; border-right: 0; border-top: 0; }
.e4 { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.rayo { position: absolute; left: 12px; right: 12px; top: 46%; height: 1px; background: var(--verde-vivo); opacity: .85; }
.fono-pie { display: grid; gap: 5px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes escaneo { 0%, 100% { top: 16%; } 50% { top: 78%; } }
  .rayo { animation: escaneo 3.4s ease-in-out infinite; }
}