/* CSS del cotizador nacional v2 (/v2/cotizador-envios-nacionales).
   Reutiliza los tokens y clases realmente globales de v2/app.css (.card, .card-body,
   .btn, .t-h1, .t-sub). El resto (.field-input, .field-label, .card-title, .flow-card,
   .dot) NO son globales pese al nombre generico: cada modulo v2 carga su propio CSS y
   redefine estas piezas ahi (mismo patron que nuevo-envio.css, balance.css, etc.), asi
   que se duplican aqui tal cual estan en nuevo-envio.css. */

.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--tx-base); margin-bottom: 6px; }
.field-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font: 13.5px var(--font); color: var(--tx-strong); background: var(--bg-card); }
.field-input::placeholder { color: var(--tx-faint); }
.card-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--tx-strong); }
.flow-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot--green { background: var(--green); }
.dot--orange { background: var(--orange); }
.dot--blue { background: var(--blue); }
.dot--faint { background: var(--tx-faint); }
.dot--red { background: var(--red); }

.v2qn-profit-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--orange-bg); border-radius: var(--r-md); padding: 14px 18px;
  margin: 16px 0;
}
.v2qn-profit-strip__margin { font-size: 13px; font-weight: 700; color: var(--orange-d); }
.v2qn-profit-strip__note { font-size: 12.5px; color: var(--tx-muted); }

.v2qn-route-flow { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: start; }
.v2qn-flow-connector { display: flex; align-items: center; justify-content: center; padding-top: 40px; color: var(--tx-faint); }
.v2qn-flow-connector svg { width: 16px; height: 16px; }

.v2qn-flow-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.v2qn-flow-head .dot { width: 8px; height: 8px; }
.v2qn-flow-head span.lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-muted); }

.v2qn-field { position: relative; }
.v2qn-field + .v2qn-field { margin-top: 14px; }
.v2qn-field-check {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.v2qn-field-check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; }
.v2qn-field-check--inline { position: static; transform: none; box-shadow: none; width: 18px; height: 18px; margin-right: 6px; flex-shrink: 0; }

.v2qn-select {
  width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 34px 10px 16px;
  font: 13.5px var(--font); color: var(--tx-strong); background: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2C2C2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.v2qn-select--valid { padding-right: 58px; background-position: right 34px center; }

.v2qn-hint { margin: 7px 0 0; font-size: 12px; color: var(--tx-muted); }
.v2qn-hint--faint { color: var(--tx-faint); }

.v2qn-medidas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* Switch (toggle "Enviar de mi inventario") — mismo patron que nuevo-envio.css,
   duplicado aqui porque esta pagina no carga esa hoja de estilos. */
.switch-row { display: flex; align-items: flex-start; gap: 10px; }
.switch-label { font-size: 12px; font-weight: 400; color: var(--tx-base); line-height: 1.4; }
.ep-switch { position: relative; display: inline-block; flex-shrink: 0; margin-top: 1px; }
.ep-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ep-switch-track { display: block; width: 34px; height: 20px; padding: 2px; border-radius: var(--r-pill); background: var(--border); transition: background .15s; }
.ep-switch-thumb { display: block; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ep-switch input:checked ~ .ep-switch-track { background: var(--orange); }
.ep-switch input:checked ~ .ep-switch-track .ep-switch-thumb { transform: translateX(14px); }

@media (max-width: 780px) {
  .v2qn-route-flow { grid-template-columns: 1fr; }
  .v2qn-flow-connector { display: none; }
  .v2qn-medidas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Chips de estado por proveedor */
.v2qn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.v2qn-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--bg-app); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--tx-base);
}
.v2qn-chip .dot { width: 6px; height: 6px; }
.v2qn-chip--retry { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; }
.v2qn-chip-retry-btn {
  background: var(--orange-bg); color: var(--orange-d); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; border: none; transition: background .15s, color .15s;
}
.v2qn-chip-retry-btn:hover { background: var(--orange-d); color: #fff; }

/* Resultados */
.v2qn-results { margin-top: 24px; }
.v2qn-results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.v2qn-results-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--tx-strong); letter-spacing: -.02em; }
.v2qn-results-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--tx-muted); }

.v2qn-quote-list { display: flex; flex-direction: column; gap: 10px; }
.v2qn-quote-row {
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 18px; background: var(--bg-card); flex-wrap: wrap;
}
.v2qn-quote-row--best { border: 1.5px solid var(--orange-d); }
.courier-logo { display: inline-flex; align-items: center; }
.courier-logo__img { max-height: 22px; width: auto; max-width: 90px; object-fit: contain; }
.courier-logo__text { font-size: 12px; font-weight: 600; color: var(--tx-muted); }
.v2qn-quote-row .courier-logo { flex-shrink: 0; }
.v2qn-quote-row .courier-logo__img { max-height: 26px; width: auto; max-width: 100px; object-fit: contain; }
.v2qn-quote-info { flex: 1; min-width: 140px; }
.v2qn-quote-name { display: flex; align-items: center; gap: 8px; }
.v2qn-quote-name span { font-size: 13.5px; font-weight: 700; color: var(--tx-strong); }
.v2qn-quote-service { display: block; font-size: 12px; color: var(--tx-muted); margin-top: 2px; }
.v2qn-quote-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff;
  background: var(--orange-d); padding: 3px 8px; border-radius: 999px;
}
.v2qn-quote-time { width: 90px; text-align: center; font-size: 13px; font-weight: 700; color: var(--tx-strong); flex-shrink: 0; }
.v2qn-quote-price-wrap { text-align: right; flex-shrink: 0; }
.v2qn-quote-price { font-size: 18px; font-weight: 800; color: var(--tx-strong); }
.v2qn-quote-cost { font-size: 11px; color: var(--tx-muted); margin-top: 2px; }
.v2qn-quote-cost b { color: var(--green); font-weight: 700; }
.v2qn-quote-create {
  flex-shrink: 0; border: none; border-radius: var(--r-sm); background: var(--green); color: #fff;
  font: 700 12.5px var(--font); padding: 10px 16px; cursor: pointer; transition: background .15s;
}
.v2qn-quote-create:hover { background: #128a3e; }

.v2qn-quote-empty { padding: 24px 0; text-align: center; color: var(--tx-muted); font-size: 13px; }

.v2qn-quote-guest { margin-top: 14px; text-align: center; }
.v2qn-quote-guest-btn {
  display: inline-block; border: none; border-radius: var(--r-sm); background: var(--orange); color: #fff;
  font: 700 13px var(--font); padding: 12px 24px; cursor: pointer; text-decoration: none;
}
.v2qn-quote-guest-btn:hover { background: var(--orange-d); color: #fff; }
.v2qn-quote-guest-login { margin: 10px 0 0; font-size: 12.5px; color: var(--tx-muted); }

/* ============================================================
   Crear envio nacional (/v2/cotizador-envios-nacionales/crear-guia)
   ============================================================ */

.v2fcg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
/* .card trae overflow:hidden (bordes redondeados) por default -- aqui se necesita que el
   dropdown de shop-items-picker-v2 (position:absolute) pueda salirse del card, igual que
   ya se hace en cobertura.css/puntos-recoleccion.css/payments.css para el mismo problema. */
.v2fcg-inventory-card { overflow: visible; position: relative; z-index: 5; }
.v2fcg-card-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--tx-muted); }
.v2fcg-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.v2fcg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.v2fcg-error { color: var(--red); font-size: 12px; font-weight: 600; margin-top: 4px; }
.v2fcg-hint-inline { text-transform: none; font-weight: 400; color: var(--tx-faint); }
.v2fcg-missing-note { margin: 0 0 10px; font-size: 11.5px; color: var(--orange-d); }

.v2fcg-summary { position: sticky; top: 20px; }

.v2fcg-route { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.v2fcg-route__node { display: flex; align-items: flex-start; gap: 10px; }
.v2fcg-route__node .dot { margin-top: 4px; }
.v2fcg-route__cp { font-size: 12.5px; color: var(--tx-base); line-height: 1.4; }
.v2fcg-route__muted { color: var(--tx-muted); }
.v2fcg-route__arrow { font-size: 13px; color: var(--tx-faint); padding-left: 3px; }

.v2fcg-specs { margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.v2fcg-specs div { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.v2fcg-specs div:last-child { margin-bottom: 0; }
.v2fcg-specs dt { color: var(--tx-muted); }
.v2fcg-specs dd { margin: 0; font-weight: 600; color: var(--tx-strong); }

.v2fcg-price-band { background: var(--orange-bg); border-radius: var(--r-md); padding: 12px 14px; }
.v2fcg-price-band__label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-d); }
.v2fcg-price-band__value { font-size: 24px; font-weight: 800; color: var(--tx-strong); margin-top: 2px; }
.v2fcg-price-band__sub { font-size: 11px; color: var(--tx-muted); margin-top: 2px; }

.v2fcg-profit-band { display: flex; align-items: center; justify-content: space-between; background: var(--green-bg); border-radius: var(--r-md); padding: 10px 14px; margin-top: 10px; }
.v2fcg-profit-band span { font-size: 12.5px; font-weight: 600; color: var(--tx-base); }
.v2fcg-profit-band b { font-size: 15px; font-weight: 800; color: var(--green); }

.v2fcg-price-footnote { margin-top: 12px; font-size: 11px; color: var(--tx-muted); line-height: 1.5; }

@media (max-width: 780px) {
  .v2fcg-layout { grid-template-columns: minmax(0, 1fr); }
  .v2fcg-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .v2fcg-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Modal crear guia (reintentar borrador) — ModalCreateGuideV2.vue.
   El shell (.ep-modal-*) ya es global (v2/app.css); aqui solo lo especifico de esta pantalla. */
.v2mcg-previous {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-app); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px;
}
.v2mcg-previous__price { font-size: 16px; font-weight: 800; color: var(--tx-strong); }

/* Flujo traido del cotizador nacional del TPV: validacion en rojo, estados de proveedores,
   cancelar cotizacion y modal de guia creada. */
.v2qn-input--error, .v2qn-input--error:focus { border-color: var(--red); }
.v2qn-results-head { align-items: flex-start; }
.v2qn-results-head .v2qn-results-sub { margin: 4px 0 0; }
.v2qn-results-actions { display: flex; gap: 8px; flex-shrink: 0; }
.v2qn-btn-cancel { color: var(--red); }
.v2qn-loading-card {
  display: flex; align-items: center; gap: 12px; padding: 22px 18px; margin: 12px 0;
  border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--bg-card);
  font-size: 13px; color: var(--tx-muted);
}
.v2qn-loading-card--inline { padding: 10px 14px; border-style: solid; background: var(--bg-app); font-size: 12.5px; }
.v2qn-spinner {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--orange); animation: v2qn-spin .8s linear infinite;
}
@keyframes v2qn-spin { to { transform: rotate(360deg); } }
.v2qn-quote-cancelled {
  margin: 12px 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg-app); font-size: 12.5px; color: var(--tx-muted);
}
.v2qn-quote-errors { margin-top: 12px; font-size: 12px; color: var(--tx-muted); }
.v2qn-quote-errors summary { cursor: pointer; color: var(--tx-faint); }
.v2qn-quote-errors ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 780px) {
  .v2qn-results-head { flex-direction: column; }
}
.v2fcg-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2fcg-success-specs { margin: 16px 0 0; text-align: left; }
.v2fcg-success-guide {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px;
  padding: 12px; border-radius: var(--r-md); background: var(--bg-app);
}
.v2fcg-success-guide span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tx-muted); }
.v2fcg-success-guide strong { font-size: 18px; font-weight: 800; color: var(--tx-strong); letter-spacing: .02em; }

/* Formulario compacto: un renglon por bloque (origen, destino, paquete) con la etiqueta a
   la izquierda, sin tarjetas anidadas, para que los precios se vean sin hacer scroll. */
.v2qn-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--border); }
.v2qn-row--first { border-top: none; padding-top: 4px; }
.v2qn-row-label {
  display: flex; align-items: center; gap: 8px; padding-top: 11px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-muted);
}
.v2qn-row-label .dot { width: 8px; height: 8px; }
.v2qn-row-body { min-width: 0; }
.v2qn-row-fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.v2qn-row-fields .v2qn-field + .v2qn-field { margin-top: 0; }
.v2qn-field--wide { grid-column: 1 / -1; }
.v2qn-field .field-input { padding-right: 38px; }
.v2qn-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg-app);
}
.v2qn-summary__text { font-size: 13.5px; color: var(--tx-strong); min-width: 0; }
.v2qn-summary__muted { color: var(--tx-muted); }
.v2qn-link { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--orange-d); cursor: pointer; flex-shrink: 0; }
.v2qn-link:hover { text-decoration: underline; }
.v2qn-row .v2qn-medidas-grid { gap: 10px; max-width: 520px; }
.v2qn-mini-label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--tx-muted); }
.v2qn-unit-input { position: relative; }
.v2qn-unit-input .field-input { padding-right: 34px; -moz-appearance: textfield; }
.v2qn-unit-input .field-input::-webkit-outer-spin-button,
.v2qn-unit-input .field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v2qn-unit-input span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--tx-faint); pointer-events: none; }
@media (max-width: 780px) {
  .v2qn-row { grid-template-columns: 1fr; gap: 8px; }
  .v2qn-row-label { padding-top: 0; }
  .v2qn-row-fields { grid-template-columns: 1fr; }
  .v2qn-row .v2qn-medidas-grid { max-width: none; }
}
.v2qn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.v2qn-card-head .card-title { margin: 0; }
.v2qn-btn-reset { display: inline-flex; align-items: center; gap: 6px; }
.v2qn-btn-reset svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Tamaños prefabricados del paquete */
.v2qn-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.v2qn-size {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card);
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.v2qn-size:hover { border-color: var(--orange); }
.v2qn-size b { font-size: 13px; font-weight: 700; color: var(--tx-strong); }
.v2qn-size span { font-size: 11px; color: var(--tx-muted); line-height: 1.3; }
.v2qn-size--active { border-color: var(--orange); background: var(--orange-bg); box-shadow: inset 0 0 0 1px var(--orange); }
/* Renglon de resultado: columnas fijas en computadora para que el tiempo quede centrado */
@media (min-width: 781px) {
  .v2qn-quote-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px 150px auto; gap: 16px; }
}
.v2qn-quote-time { width: auto; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.v2qn-quote-time b { font-size: 14px; font-weight: 800; color: var(--tx-strong); }
.v2qn-quote-time span { font-size: 11px; font-weight: 500; color: var(--tx-muted); }
/* Mejor precio: verde suave en lugar del cafe */
.v2qn-quote-row--best { border: 1.5px solid var(--green); }
.v2qn-quote-badge { color: var(--green); background: var(--green-bg); }
@media (max-width: 780px) {
  .v2qn-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2qn-quote-time { align-items: flex-start; }
}
/* Emoji de tamaño (mismos que envios locales, sizeIcons.js) */
.v2qn-size { flex-direction: row; align-items: center; gap: 10px; }
.v2qn-size__emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.v2qn-size__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Letra chiquita del servicio (sin recoleccion, no reembolsable) */
.v2qn-quote-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.v2qn-quote-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; color: #92400e; background: #fef3c7; cursor: help; }
.v2qn-hero { margin-bottom: 20px; }
.v2qn-hero .t-sub { max-width: 560px; }
/* Renglon de resultado en celular: arriba logo + paqueteria + precio (lo que se compara),
   abajo tiempo de entrega + boton. Precio y boton siempre pegados a la derecha. */
@media (max-width: 780px) {
  .v2qn-quote-row {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "logo info price" "time time create"; gap: 12px 12px; padding: 14px;
  }
  .v2qn-quote-row .courier-logo { grid-area: logo; }
  .v2qn-quote-row .courier-logo__img { max-width: 72px; max-height: 22px; }
  .v2qn-quote-info { grid-area: info; min-width: 0; }
  .v2qn-quote-name { flex-wrap: wrap; gap: 4px 8px; }
  .v2qn-quote-price-wrap { grid-area: price; align-self: start; }
  .v2qn-quote-price { font-size: 18px; }
  .v2qn-quote-cost { max-width: 130px; margin-left: auto; }
  .v2qn-quote-time { grid-area: time; align-self: center; }
  .v2qn-quote-create { grid-area: create; align-self: center; }
}
/* Letra chiquita en una sola linea discreta (reemplaza las pastillas amarillas) */
.v2qn-quote-note { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: #b45309; cursor: help; }
.v2qn-quote-note i { font-size: 10.5px; }
@media (max-width: 780px) {
  .v2qn-quote-row .courier-logo { align-self: start; margin-top: 2px; }
}
/* Computadora: pastillas amarillas; celular: una sola linea discreta */
@media (min-width: 781px) {
  .v2qn-quote-note { display: none; }
}
@media (max-width: 780px) {
  .v2qn-quote-tags { display: none; }
}
/* Resumen de crear guia: juego tipografico como login/rastreo (titulares grandes y apretados,
   etiquetas chicas en mayuscula naranja) */
.v2fcg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-d); }
.v2fcg-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v2fcg-sum-eta { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--tx-base); }
.v2fcg-trip { position: relative; list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.v2fcg-trip::before { content: ""; position: absolute; left: 13px; top: 46px; bottom: 26px; border-left: 2px dashed var(--border); }
.v2fcg-trip__stop { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.v2fcg-trip__tag { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tx-strong); font-size: 10.5px; font-weight: 800; color: var(--bg-card); }
.v2fcg-trip__city { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tx-strong); }
.v2fcg-trip__detail { display: block; margin-top: 3px; font-size: 12px; color: var(--tx-muted); line-height: 1.35; }
.v2fcg-sum-pkg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--tx-strong); }
.v2fcg-sum-pkg i { margin-right: 6px; font-size: 12px; color: var(--tx-faint); }
.v2fcg-sum-price { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--r-lg, 14px); background: var(--orange-bg); }
.v2fcg-sum-price__value { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.v2fcg-sum-price__sub { font-size: 12px; color: var(--tx-muted); }
.v2fcg-submit-btn__price { font-weight: 700; opacity: .85; }
@media (max-width: 780px) {
  /* En celular el resumen va primero (ves que y cuanto antes de llenar) y el boton a todo lo ancho */
  .v2fcg-summary { order: -1; position: static; }
  .v2fcg-trip { flex-direction: row; gap: 10px; }
  .v2fcg-trip::before { display: none; }
  .v2fcg-trip__stop { flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
  .v2fcg-trip__city { font-size: 20px; overflow-wrap: anywhere; }
  .v2fcg-sum-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 14px 16px; }
  .v2fcg-sum-price .v2fcg-eyebrow { flex-basis: 100%; }
  .v2fcg-sum-price__value { font-size: 34px; }
  .v2fcg-submit-row { flex-wrap: wrap; }
  .v2fcg-submit-row > div[style] { display: none; }
  .v2fcg-submit-btn { width: 100%; justify-content: center; }
}
/* Campos de crear guia: label clickeable (Bootstrap le pone margen a <label>), signo de pesos */
#form_create_guide_national_v2 label.field-label { margin: 0 0 6px; }
.v2fcg-money { position: relative; }
.v2fcg-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--tx-muted); pointer-events: none; }
.v2fcg-money .field-input { padding-left: 24px; }
#form_create_guide_national_v2 .field-input::placeholder { color: var(--tx-faint); }
/* Categoria SAT: lista + "Otra" con buscador (SatCategoryPickerV2.vue) */
.v2sat { position: relative; min-width: 0; }
.v2sat select.field-input { max-width: 100%; text-overflow: ellipsis; }
.v2sat-link { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--orange-d); cursor: pointer; }
.v2sat-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--tx-strong); }
.v2sat-chosen .v2sat-link { margin: 0; }
.v2sat-trigger { display: block; text-align: left; cursor: pointer; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23737373'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.v2sat-placeholder { color: var(--tx-muted); }
.v2sat-group { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-muted); }
.v2sat-results button.v2sat-current { background: var(--orange-bg); }
.v2sat .v2sat-results { position: absolute; left: 0; right: 0; z-index: 20; }
.v2sat-results { margin: 6px 0 0; padding: 4px; list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 260px; overflow-y: auto; }
.v2sat-results button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; color: var(--tx-base); cursor: pointer; }
.v2sat-results button:hover, .v2sat-results button:focus { background: var(--orange-bg); }
.v2sat-results b { color: var(--tx-strong); }
.v2sat-empty { padding: 9px 10px; font-size: 12.5px; color: var(--tx-muted); }
/* Barra fija tipo aerolinea: solo celular, flotando arriba del menu de abajo */
.v2fcg-paybar { display: none; }
@media (max-width: 780px) {
  /* 16px evita que iPhone haga zoom al picar un campo */
  #form_create_guide_national_v2 .field-input { font-size: 16px; }
  #form_create_guide_national_v2 { padding-bottom: 84px; }
  .v2fcg-paybar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 72px; z-index: 190;
    padding: 12px 16px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--tx-strong); color: var(--bg-card);
    box-shadow: 0 -8px 24px rgba(0,0,0,.18); transition: transform .2s, opacity .2s; }
  .v2fcg--typing .v2fcg-paybar { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .v2fcg-paybar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .v2fcg-paybar__route { font-size: 11.5px; font-weight: 600; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2fcg-paybar__price { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .v2fcg-paybar__btn { flex: none; padding: 12px 20px; font-size: 14px; }
  /* El precio ya vive en la barra: arriba solo ruta y paquete; abajo no se repite el boton */
  .v2fcg-summary .v2fcg-sum-price { display: none; }
  #form_create_guide_national_v2:not(.v2fcg--embedded) .v2fcg-submit-btn { display: none; }
}
/* Crear guia en secciones que se cierran (una abierta a la vez) */
.v2fcg-step { overflow: visible; }
.v2fcg-step__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border: 0; background: none; text-align: left; font-family: var(--font); color: inherit; cursor: pointer; }
.v2fcg-step__head:disabled { cursor: default; color: inherit; }
.v2fcg-step__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-app); color: var(--tx-muted); font-size: 15px; transition: background .15s, color .15s; }
.v2fcg-step--open .v2fcg-step__icon { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(var(--orange-rgb), .35); }
.v2fcg-step--done:not(.v2fcg-step--open) .v2fcg-step__icon { background: var(--green-bg); color: var(--green); }
.v2fcg-step__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2fcg-step__num { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-faint); }
.v2fcg-step--open .v2fcg-step__num { color: var(--orange-d); }
.v2fcg-step__title { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--tx-strong); }
.v2fcg-step--open .v2fcg-step__title { font-size: 22px; letter-spacing: -.03em; }
.v2fcg-step:not(.v2fcg-step--open):not(.v2fcg-step--done) .v2fcg-step__title { color: var(--tx-muted); }
.v2fcg-step__summary { font-size: 12.5px; color: var(--tx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2fcg-step__edit, .v2fcg-sub__edit { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--orange-bg); font-size: 12px; font-weight: 700; color: var(--orange-d); cursor: pointer; }
.v2fcg-step__edit i, .v2fcg-sub__edit i { font-size: 10.5px; }
.v2fcg-step__body { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 20px; }
.v2fcg--embedded .v2fcg-step__body { padding-top: 0; }
.v2fcg-step__next { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; }
/* Bloques dentro de cada seccion (Remitente, Destinatario, Origen, Destino) */
.v2fcg-sub { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.v2fcg-sub__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.v2fcg-sub__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-bg); color: var(--orange-d); font-size: 14px; }
.v2fcg-sub__titles { flex: 1; min-width: 0; }
.v2fcg-sub__titles .v2fcg-card-sub { margin: 2px 0 0; }
.v2fcg-sub__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--tx-strong); }
.v2fcg-sub__title small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--tx-muted); }
.v2fcg-sub__readonly { display: flex; flex-direction: column; gap: 3px; padding-left: 48px; font-size: 13.5px; color: var(--tx-base); }
.v2fcg-sub__readonly b { font-size: 15px; color: var(--tx-strong); }
.v2fcg-sub__head + .v2fcg-sub__readonly { margin-top: -6px; }
.v2fcg-city-chip { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--orange-bg); font-size: 12px; font-weight: 700; color: var(--orange-d); }
/* Medidas fijas en cuadritos */
.v2fcg-dims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v2fcg-dim { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-app); }
.v2fcg-dim span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-muted); }
.v2fcg-dim b { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.v2fcg-dim small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--tx-muted); }
.v2fcg-dims-note { margin: -4px 0 0; font-size: 12px; color: var(--tx-muted); }
.v2fcg-dims-note a { margin-left: 4px; font-weight: 700; color: var(--orange-d); }
.v2fcg-inventory { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 5; }
@media (max-width: 780px) {
  .v2fcg-step__head { padding: 16px; gap: 12px; }
  .v2fcg-step__body { padding: 0 16px 16px; }
  .v2fcg-step--open .v2fcg-step__title { font-size: 20px; }
  .v2fcg-step__edit { padding: 6px 10px; }
  .v2fcg-sub { padding: 14px; }
  .v2fcg-sub__readonly { padding-left: 0; }
  .v2fcg-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2fcg-step__next { align-self: stretch; justify-content: center; }
}
/* Validacion como en pagos/cobranza: el campo con error se marca en rojo, no solo el texto */
#form_create_guide_national_v2 .field-input:has(~ .field-error),
#form_create_guide_national_v2 .v2fcg-money:has(~ .field-error) .field-input,
#form_create_guide_national_v2 .v2sat:has(~ .field-error) .field-input { border-color: var(--red); background: #fff7f7; }
#form_create_guide_national_v2 .field-input:has(~ .field-error):focus,
#form_create_guide_national_v2 .v2fcg-money:has(~ .field-error) .field-input:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.v2fcg-hint { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--tx-muted); }
.v2fcg-step__notice { margin: 16px 0 0; }
.v2fcg-step__notice + .v2fcg-step__next { margin-top: 10px; }
/* Ningun bloque del formulario puede ser mas ancho que la pantalla (la lista SAT trae textos largos) */
#form_create_guide_national_v2 .v2fcg-step, #form_create_guide_national_v2 .v2fcg-sub { min-width: 0; max-width: 100%; }
#form_create_guide_national_v2 .v2sat-chosen span { min-width: 0; overflow-wrap: anywhere; }
/* Modal "Creando tu guia" (espera + rechazo de la paqueteria) */
.v2fcg-creating .ep-modal-body { text-align: center; }
.v2fcg-creating__spinner { width: 44px; height: 44px; margin: 4px auto 14px; border-radius: 50%; border: 4px solid var(--orange-mid); border-top-color: var(--orange); animation: v2fcg-spin .9s linear infinite; }
@keyframes v2fcg-spin { to { transform: rotate(360deg); } }
.v2fcg-creating__steps { list-style: none; margin: 18px auto 0; padding: 0; max-width: 300px; text-align: left; display: grid; gap: 10px; }
.v2fcg-creating__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tx-muted); }
.v2fcg-creating__steps li.is-current { color: var(--tx-strong); font-weight: 700; }
.v2fcg-creating__steps li.is-done { color: var(--tx-base); }
.v2fcg-creating__dot { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.v2fcg-creating__steps li.is-current .v2fcg-creating__dot { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-bg); }
.v2fcg-creating__steps li.is-done .v2fcg-creating__dot { border-color: var(--green); background: var(--green); }
.v2fcg-creating__warn { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 20px 0 0; padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--amber-bg); color: var(--amber); font-size: 12.5px; font-weight: 600; text-align: left; }
.v2fcg-creating__warn i { margin-top: 2px; }
.v2fcg-creating__icon { font-size: 44px; color: var(--amber); line-height: 1; margin-bottom: 12px; }
.v2fcg-creating__reason { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-md, 10px); background: #fff7f7; border: 1px solid #f5d0d0; text-align: left; }
.v2fcg-creating__reason span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--red); margin-bottom: 6px; }
.v2fcg-creating__reason ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--tx-strong); }
.v2fcg-creating__reason li + li { margin-top: 4px; }
.v2fcg-creating__tip { margin: 16px 0 0; font-size: 13.5px; color: var(--tx-base); text-align: left; }
.v2fcg-creating .ep-modal-footer { flex-wrap: wrap; }
.v2fcg-creating .ep-modal-footer .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .v2fcg-creating__spinner { animation-duration: 3s; } }
/* Boton "Crear guia" bajo el precio (solo computadora, pagina completa) */
.v2fcg-sum-cta { display: grid; gap: 10px; margin-top: 16px; }
.v2fcg-sum-cta .v2-notice { margin: 0; }
.v2fcg-sum-cta .btn { width: 100%; justify-content: center; }
@media (min-width: 781px) {
  #form_create_guide_national_v2:not(.v2fcg--embedded) .v2fcg-submit-btn,
  #form_create_guide_national_v2:not(.v2fcg--embedded) .v2fcg-bottom-notice { display: none; }
}
@media (max-width: 780px) {
  .v2fcg-sum-cta { display: none; }
}
.v2fcg-success-go { flex: 1 1 auto; justify-content: center; text-align: center; }

/* Municipio como etiqueta debajo de "Origen"/"Destino" (antes iba a la derecha y apretaba el titulo) */
.v2fcg-sub__titles .v2fcg-city-chip { display: inline-block; margin: 4px 0 2px; }
/* Reintento de borrador en celular: sin la caja de Remitente/Destinatario/Origen/Destino
   (ya van dentro del modal y del paso), solo una rayita entre una y otra */
@media (max-width: 780px) {
  .v2fcg--embedded .v2fcg-sub { padding: 0; border: none; border-radius: 0; background: none; }
  .v2fcg--embedded .v2fcg-sub + .v2fcg-sub { padding-top: 18px; border-top: 1px solid var(--border); }
}
/* Sin saldo: aviso discreto junto al boton (estilo .xp-balance-note de cotizador-express.css) */
.v2fcg-sum-cta .xp-balance-note { margin: 0; }
.v2fcg-paybar .xp-bar__notice { border-radius: var(--r-lg) var(--r-lg) 0 0; }
/* Ya cotizado: datos compactados (CotizadorEnviosNacionalesV2 form_compact) */
.v2qn-compact { display: grid; gap: 14px; }
.v2qn-compact__list { display: grid; gap: 0; margin: 0; }
.v2qn-compact__list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.v2qn-compact__list > div:first-child { border-top: none; padding-top: 0; }
.v2qn-compact__list dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-muted); }
.v2qn-compact__list dt .dot { width: 8px; height: 8px; }
.v2qn-compact__list dd { margin: 0; min-width: 0; font-size: 13.5px; color: var(--tx-strong); overflow-wrap: anywhere; }
.v2qn-compact__list dd span { display: block; font-size: 12px; color: var(--tx-muted); }
.v2qn-compact .btn i { margin-right: 6px; }
/* Computadora ancha: datos a la izquierda, opciones a la derecha */
@media (min-width: 1100px) {
  .v2qn-layout--split { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .v2qn-layout--split .v2qn-layout__form { position: sticky; top: 16px; }
  .v2qn-layout--split .v2qn-results { margin-top: 0; }
  /* Formulario abierto en la columna angosta: como en celular */
  .v2qn-layout--split .v2qn-row { grid-template-columns: 1fr; gap: 8px; }
  .v2qn-layout--split .v2qn-row-label { padding-top: 0; }
  .v2qn-layout--split .v2qn-row-fields { grid-template-columns: 1fr; }
  .v2qn-layout--split .v2qn-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2qn-layout--split .v2qn-row .v2qn-medidas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .v2qn-layout--split .v2qn-compact__list > div { grid-template-columns: 1fr; gap: 4px; }
  /* Renglon de opcion mas compacto: arriba paqueteria + precio, abajo tiempo + boton */
  .v2qn-layout--split .v2qn-quote-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas: "logo info price" "logo time create"; gap: 10px 16px;
  }
  .v2qn-layout--split .v2qn-quote-row .courier-logo { grid-area: logo; align-self: center; }
  .v2qn-layout--split .v2qn-quote-info { grid-area: info; min-width: 0; }
  .v2qn-layout--split .v2qn-quote-price-wrap { grid-area: price; text-align: right; }
  .v2qn-layout--split .v2qn-quote-time { grid-area: time; align-items: baseline; flex-direction: row; gap: 6px; align-self: center; }
  .v2qn-layout--split .v2qn-quote-create { grid-area: create; align-self: center; }
}
/* Tamaño con foto (mismas imagenes de public/images/tamanos) */
.v2qn-size__img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.v2qn-size__emoji { width: 34px; text-align: center; }
/* Pills "Elegir tamaño / Medidas exactas" (mismas que envios locales) */
.v2qn-mode-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.v2qn-mode-tabs button { flex: 0 0 auto; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; padding: 7px 14px;
  border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--tx-muted); }
.v2qn-mode-tabs button.is-active { border-color: var(--orange); background: var(--orange-bg); color: var(--orange-d); }
/* Barra de abajo con el mismo look que envios locales (.xp-bar de cotizador-express.css): blanca, texto oscuro */
@media (max-width: 780px) {
  .v2fcg-paybar { border-radius: 0; background: var(--bg-card); color: var(--tx-strong); padding: 12px 16px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
  .v2fcg-paybar__route { font-weight: 400; opacity: 1; color: var(--tx-muted); }
  .v2fcg-paybar__price { font-size: 18px; letter-spacing: 0; color: var(--tx-strong); }
  .v2fcg-paybar__btn { padding: 12px 18px; }
  .v2fcg-paybar .xp-bar__notice { border-radius: 0; }
}