/* ╔══════════════════════════════════════════════════════════════╗
   ║  Tucajadeusa · App (auth + cliente + admin)                   ║
   ║  Extiende app.css · estética Manifiesto de Carga              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Auth split layout ── */
.auth { min-height: 100vh; display: grid; grid-template-columns: 0.92fr 1.08fr; background: var(--cream); }
/* Panel de marca: navy-night con estrellas (.stars-night); el piso rojo es la cinta con la ruta impresa (.ribbon--print, v9)
   al pie del panel, en flujo, y Boxy se para sobre su borde alto (nunca pisa el texto) */
.auth__brand { position: relative; background-color: var(--navy-night); color: var(--cream); padding: clamp(36px,5vw,72px) clamp(36px,5vw,72px) 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; overflow: hidden; isolation: isolate; }
/* La cinta: bloque a todo ancho del panel (márgenes negativos = padding), sin colores arriba/abajo (se ven las estrellas),
   banda de 84 px a -6° con la ruta impresa. margin-top negativo: el borde alto de la banda (más alto a la derecha) queda bajo los pies de Boxy */
/* El modificador .ribbon--print se borró de app.css al sustituir el corte
   diagonal por `.ola`, pero estas dos páginas seguían colgando de él todos
   sus tamaños. Ahora cuelgan de su propia clase, que sí existe. */
.auth__brand-ribbon { --floor-from: transparent; --floor-to: transparent; --ribbon-h: clamp(60px, 6.5vw, 84px); --ribbon-fs: clamp(17px, 2vw, 27px); flex: none; width: auto; margin: -34px calc(-1 * clamp(36px,5vw,72px)) 0; z-index: 2; }
.auth__brand .grain { z-index: 1; }
.auth__brand-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; }
.auth__brand-top .brand__mark { width: 46px; height: 46px; }
.auth__brand-mid { position: relative; z-index: 3; }
.auth__brand-mid .tape { margin-bottom: 18px; }
.auth__brand-mid .auth__brand-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,3.4vw,52px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 18px; text-wrap: balance; }
.auth__brand-mid .auth__brand-title .accent { color: var(--brand-red); }
.auth__brand-mid p { font-size: clamp(15px,1.2vw,17px); line-height: 1.6; color: rgba(245,238,225,0.74); max-width: 40ch; }
.auth__points { position: relative; z-index: 3; list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.auth__points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(245,238,225,0.88); font-weight: 500; }
.auth__points .check { width: 22px; height: 22px; margin: 0; background: var(--cream-2); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); }
.auth__points .check svg { width: 11px; height: 11px; }
/* Boxy: en flujo, alineado a la derecha, apoyado sobre el piso rojo; encoge en pantallas bajas */
/* (.auth__brand-img.boxy: misma especificidad que la regla de app.css, gana por orden) */
.auth__brand-img.boxy { position: relative; z-index: 3; align-self: flex-end; width: auto; height: clamp(180px, 27vh, 320px); max-width: min(100%, 300px); margin: 0 clamp(12px, 3vw, 40px) 0 0; opacity: 1; }

.auth__panel { padding: clamp(28px,4vw,56px); display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.auth__panel-inner { width: 100%; max-width: 460px; margin: 0 auto; }
.auth__back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; transition: color 0.2s; }
.auth__back:hover { color: var(--brand-red-2); }
.auth__back:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; border-radius: 4px; }

/* ── Stepper ── */
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; }
.stepper__node { display: flex; align-items: center; gap: 8px; }
.stepper__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--cream-2); color: var(--ink-mute); border: 2px solid rgba(8,29,76,0.25); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.stepper__node.is-done .stepper__dot { background: var(--tape-red); color: var(--white); border-color: var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-navy); }
.stepper__node.is-active .stepper__dot { background: var(--brand-navy); color: var(--cream); border-color: var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); }
.stepper__line { flex: 1; height: 2px; background: rgba(8,29,76,0.12); border-radius: 2px; overflow: hidden; position: relative; }
.stepper__line.is-done::after { content: ''; position: absolute; inset: 0; background: var(--brand-red); animation: pf 0.5s var(--ease) forwards; transform-origin: left; }

.auth__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3vw,40px); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.auth__sub { font-size: 15px; line-height: 1.5; color: var(--ink-mute); margin-bottom: 28px; }

.auth__step { display: none; flex-direction: column; gap: 18px; animation: si 0.45s var(--ease); }
.auth__step.is-active { display: flex; }

/* Botón Google + divisor */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 14px 18px; border-radius: var(--r-btn); background: var(--white); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: var(--shadow-hard-sm); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s var(--ease), translate 0.2s var(--ease); }
.btn-google:hover { background: var(--cream-2); box-shadow: var(--shadow-hard); translate: -1px -1px; }
.btn-google:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--brand-navy); }
.btn-google:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.btn-google:disabled { opacity: 0.6; cursor: default; translate: 0 0; }
.btn-google svg { width: 18px; height: 18px; }
.auth__or { display: flex; align-items: center; gap: 14px; margin: 4px 0; color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--paper-line); }

/* segmented control (retiro/domicilio, etc) */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(8,29,76,0.05); border-radius: 14px; padding: 4px; }
.segmented button { border: 0; background: transparent; border-radius: var(--r-sm); padding: 14px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-mute); cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; }
.segmented button small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; opacity: 0.7; }
.segmented button.is-active { background: var(--white); color: var(--ink); box-shadow: 0 4px 14px -6px rgba(8,29,76,0.2); }
.segmented button.is-active small { color: var(--brand-red-2); opacity: 1; }
.segmented button:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

.pwmeter { height: 4px; border-radius: 999px; background: rgba(8,29,76,0.08); overflow: hidden; margin-top: 4px; }
.pwmeter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.3s var(--ease), background 0.3s; }

/* Tarjeta de dirección asignada (registro, paso 2): cartón con cinta arriba y sticker de suite */
.address-card { margin-top: 12px; padding: 26px 24px 22px; }
.address-card__label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.address-card__label .tape { margin: 0; }
.address-card__suite { position: relative; z-index: 2; margin-bottom: 16px; }
.address-card__suite .sticker { font-size: 17px; letter-spacing: -0.01em; }
.address-card__lines { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.address-card__lines mark { background: rgba(245,26,24,0.14); color: var(--brand-navy); font-weight: 700; padding: 0 4px; border-radius: 4px; text-decoration: underline; text-decoration-color: var(--brand-red); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.address-card__copy { position: relative; z-index: 2; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--brand-navy); background: var(--white); border: 2px solid var(--brand-navy); box-shadow: 3px 3px 0 var(--brand-navy); padding: 10px 14px; border-radius: var(--r-md); cursor: pointer; transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s; }
.address-card__copy:hover { background: var(--cream-2); translate: -1px -1px; box-shadow: 4px 4px 0 var(--brand-navy); }
.address-card__copy:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--brand-navy); }
.address-card__copy:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
/* Matasellos «SUITE TCDU» estampado en la esquina alta derecha de la tarjeta de dirección (registro y casillero).
   La cabecera deja sitio a la derecha para que el botón «Copiar todo» no quede debajo. */
.addr__postmark, .address-card__postmark { position: absolute; top: -14px; right: -8px; z-index: 3; --postmark-size: 84px; }
.addr__head, .address-card__label { padding-right: 76px; }
@media (max-width: 480px) { .addr__postmark, .address-card__postmark { --postmark-size: 66px; top: -10px; right: -4px; } .addr__head, .address-card__label { padding-right: 58px; } }
/* «Listo» y «Revisa tu correo»: Boxy pequeño centrado (apoyo ≤ 96 px; el grande vive en el panel de marca) */
.auth__hero-boxy { width: clamp(80px, 12vw, 96px); margin: 0 auto 10px; }
.auth__mail-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--brand-navy); color: var(--cream); border: 2px solid var(--brand-navy); box-shadow: 3px 3px 0 var(--brand-red); display: grid; place-items: center; margin: 0 auto 16px; }
.auth__mail-ico svg { width: 28px; height: 28px; }
/* «Qué sigue» (registro, paso 2) */
.next { display: flex; flex-direction: column; gap: 14px; }
.next .tape { align-self: flex-start; margin: 0; }
.next ol { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.next li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.next .n { width: 30px; height: 30px; border-radius: 50%; background: var(--white); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.next b { color: var(--ink); }
/* Extras de login/registro (antes duplicados en cada página) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 54px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink-mute); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.pw-eye:hover { color: var(--ink); background: rgba(8,29,76,0.06); }
.pw-eye:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] .ic-eye, .pw-eye[aria-pressed="false"] .ic-eye-off { display: none; }
/* Error del formulario: tarjeta crema con borde rojo y Boxy alerta pequeño */
.form-err { display: none; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--cream-2); border: 2px solid var(--brand-red); box-shadow: 3px 3px 0 var(--brand-red-2); color: var(--ink); font-size: 13.5px; line-height: 1.55; }
.form-err.is-on { display: flex; }
.form-err::before { content: ''; flex: none; width: 34px; height: 44px; background: url('brand/boxy-alert.png') center / contain no-repeat; }
.form-err a, .form-err button { color: var(--brand-navy); font-weight: 700; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 2px; }
.auth .form-help { font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.auth .form-help strong { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; }
.auth__foot-link { text-align: center; font-size: 13.5px; color: var(--ink-mute); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--brand-navy); text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--brand-red-2); }
.link-btn:disabled { color: rgba(8,29,76,0.45); text-decoration-color: rgba(8,29,76,0.25); cursor: default; }
.otp-sent { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); font-size: 13.5px; color: var(--ink-soft); }
.otp-sent strong { color: var(--ink); word-break: break-all; }
.otp-sent .link-btn { flex-shrink: 0; }
#o-code { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.35em; text-align: center; }
/* Foco rojo visible en todo campo de la app y error en activa */
.auth .field input:focus-visible, .auth .field select:focus-visible, .auth .field textarea:focus-visible,
.app .field input:focus-visible, .app .field select:focus-visible, .app .field textarea:focus-visible,
.modal .field input:focus-visible, .modal .field select:focus-visible, .modal .field textarea:focus-visible,
.track-box input:focus-visible { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--brand-red); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(245,26,24,0.14); }
.field__err { color: var(--brand-red-2); font-weight: 700; }
/* --brand-red-2 está pensado para crema. El formulario «Ya pagué» vive en la
   tarjeta navy (.pay), y ahí ese rojo se quedaba en 2,93:1: el aviso de
   «Pon la referencia…» no se leía. El rojo claro da 7,16:1 sobre navy. */
.pay .field__err { color: var(--orange-soft); }

@media (max-width: 1100px) {
  .auth__brand-img.boxy { height: clamp(150px, 22vh, 240px); }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth__brand { padding: 18px 20px 26px; min-height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  /* La cinta pasa a banda fina (22 px, -2°) pegada al pie del panel */
  .auth__brand-ribbon { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; width: auto; --ribbon-h: 22px; --ribbon-fs: 9px; --ribbon-rot: -2deg; letter-spacing: 0.2em; }
  .auth__brand-mid, .auth__points, .auth__brand-foot { display: none; }
  /* Boxy encoge a un apoyo pequeño (≤ 96 px), de pie sobre la cinta */
  .auth__brand-img.boxy { height: 82px; max-width: none; margin: 0 8px 10px 0; align-self: flex-end; }
  .auth__panel { padding-top: 22px; justify-content: flex-start; }
  .auth-notice { top: calc(14px + env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%) translateY(-16px); }
  .auth-notice.is-visible { transform: translateX(-50%) translateY(0); }
}

/* ╔════════ APP SHELL (dashboard cliente / admin) ════════╗ */
.app { min-height: 100vh; background: var(--cream); display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.app__side { background-color: var(--navy-night); color: var(--cream); padding: 24px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; }
/* Estrellas de marca dentro de la app: .card/.calc2__out pisan el background-image de .stars-night (app.css), se repone aquí */
.app .stars-night, .auth .stars-night, .app__side.stars-night, .auth__brand.stars-night { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='%23F5EEE1'%3E%3Cpath fill-opacity='0.09' d='M18 10Q18 16 24 16Q18 16 18 22Q18 16 12 16Q18 16 18 10Z'/%3E%3Cpath fill-opacity='0.07' d='M50 42.5Q50 46 53.5 46Q50 46 50 49.5Q50 46 46.5 46Q50 46 50 42.5Z'/%3E%3Ccircle cx='8' cy='50' r='1' fill-opacity='0.08'/%3E%3Ccircle cx='58' cy='10' r='1.2' fill-opacity='0.08'/%3E%3Ccircle cx='34' cy='34' r='0.8' fill-opacity='0.06'/%3E%3C/svg%3E"); background-size: 72px 72px; }
.app__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; }
.app__nav { display: flex; flex-direction: column; gap: 4px; }
.app__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); color: rgba(245,238,225,0.7); font-weight: 600; font-size: 14px; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.app__nav a svg { width: 18px; height: 18px; opacity: 0.8; }
.app__nav a:hover { background: var(--glass); color: var(--cream); }
.app__nav a.is-active { background: var(--tape-red); color: var(--white); box-shadow: 3px 3px 0 var(--cream); }
.app__nav a:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.app__nav a.is-active svg { opacity: 1; }
.app__side-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--glass-border); }
.app__user { display: flex; align-items: center; gap: 10px; }
.app__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--cream-2); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; flex-shrink: 0; }
/* El muñequito que sale mientras no hay nombre (renderIdentity en app-dash.js). */
.app__avatar-ico { width: 18px; height: 18px; display: block; }
.app__user-meta { font-size: 12.5px; line-height: 1.3; }
.app__user-meta .name { font-weight: 700; color: var(--cream); }
/* Suite como mini sticker kraft (badge del casillero) */
.app__user-meta .suite { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-navy); background: var(--kraft); border: 1.5px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); }

.app__main { padding: clamp(20px,3vw,40px); overflow-x: clip; }
.app__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.app__head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3vw,38px); letter-spacing: -0.02em; }
.app__head .sub { font-size: 14px; color: var(--ink-mute); margin-top: 4px; }

.card { background: var(--cream-2); border: 1px solid var(--paper-line); border-radius: var(--r-lg); padding: 24px; }
.grid-cards { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,3vw,42px); letter-spacing: -0.02em; line-height: 1; }
.kpi__lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }

/* package / prealert rows */
.plist { display: flex; flex-direction: column; }
.prow { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--paper-line); }
.prow:last-child { border-bottom: 0; }
.prow__ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--kraft); color: var(--brand-navy); border: 1.5px solid var(--kraft-line); display: grid; place-items: center; }
.prow__ico svg { width: 20px; height: 20px; }
.prow__main .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.prow__main .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 2px; }
/* Badges de estado = stickers pequeños (mismo dibujo que .sticker--sm .sticker--mono: borde navy y sombra dura 3 px), con punto de color por estado */
.badge-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: var(--brand-navy); background: var(--white); border: 1.5px solid var(--brand-navy); box-shadow: 3px 3px 0 var(--brand-navy); }
.badge-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kraft-line); flex: none; }
.badge-status--transit { background: var(--tape-red); color: var(--white); }
.badge-status--transit::before { background: var(--white); }
.badge-status--received { background: var(--white); }
.badge-status--received::before { background: var(--ok-fill); }
.badge-status--pending { background: var(--kraft); }
.badge-status--delivered { background: var(--brand-navy); color: var(--cream); box-shadow: 2px 2px 0 var(--brand-red); }
.badge-status--delivered::before { background: var(--brand-red); }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-mute); }
.empty svg { width: 44px; height: 44px; margin: 0 auto 14px; opacity: 0.4; }
.empty p { font-size: 14px; }
/* Estados vacíos con Boxy (los pinta boxyEmpty() en app-dash.js y el HTML inicial) */
.boxy-empty { color: var(--ink); }
.boxy-empty .boxy { width: clamp(72px, 10vw, 96px); }
.boxy-empty__text { color: var(--ink-mute); opacity: 1; }
.boxy-empty .btn { margin-top: 4px; }

/* mobile bottom nav (cliente) */
.app__mobnav { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app__side { display: none; }
  .app__main { padding: 18px 16px calc(122px + env(safe-area-inset-bottom)); }   /* 102 px de barra + 14 px del CTA elevado + margen */
  .app__mobnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; background-color: var(--navy-night); border-top: 3px solid var(--brand-red); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .app__mobnav a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(245,238,225,0.66); font-size: 9.5px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 6px; border-radius: var(--r-sm); min-width: 0; }
  .app__mobnav a svg { width: 22px; height: 22px; }
  .app__mobnav a.is-active { color: var(--orange-hot); }
}

/* ── Vistas internas del dashboard (SPA) ── */
.view { display: none; }
.view.is-active { display: block; animation: viewIn 0.4s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Rastrear (dentro del dashboard) */
.track-box { display: flex; gap: 10px; flex-wrap: wrap; }
.track-box input { flex: 1; min-width: 200px; background: var(--white); border: 1px solid var(--paper-line-2); border-radius: 14px; padding: 15px 18px; font-family: var(--font-mono); font-size: 16px; color: var(--ink); outline: 0; transition: border-color 0.25s, box-shadow 0.25s; }
.track-box input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-ink); }
.track-result { margin-top: 22px; display: none; }
.track-result.is-on { display: block; animation: viewIn 0.45s var(--ease); }
.track-time { position: relative; display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
/* v9: el riel es la cinta vertical (.ribbon--rail-v, 14 px) y cada paso un matasellos .postmark--48 con disco de papel
   para que el riel no lo cruce. Cumplido = rojo-2 con ✓, en curso = navy, pendiente = navy al 30 %. */
.track-step { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 0 0 22px; position: relative; z-index: 1; align-items: start; }
.track-step:last-child { padding-bottom: 0; }
.track-step .postmark { --postmark-color: rgba(8,29,76,0.3); background: var(--cream-2); border-radius: 50%; }
.prow__detail .track-step .postmark { background: #F2EEE6; }
.track-step.is-active .postmark { --postmark-color: var(--brand-navy); }
.track-step.is-done .postmark { --postmark-color: var(--brand-red-2); }
.track-step__c { padding-top: 12px; }
.track-step__c .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.track-step__c .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }

/* Cotizador: tabs */
.qtabs { display: inline-flex; gap: 4px; padding: 5px; background: rgba(8,29,76,0.05); border-radius: 14px; margin-bottom: 18px; }
/* El borde está siempre, transparente, y la pestaña activa solo le cambia el
   color. Antes la activa pasaba de 0 a 2 px de borde y el texto daba un
   salto de 2 px al cambiar de pestaña. */
.qtab { display: inline-flex; align-items: center; gap: 8px; border: 2px solid transparent; background: transparent; border-radius: var(--r-sm); padding: 9px 14px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink-mute); cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.qtab svg { width: 16px; height: 16px; }
.qtab.is-active { background: var(--white); color: var(--ink); border-color: var(--brand-navy); box-shadow: var(--shadow-hard-sm); }
.qtab:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.qtab__ai { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; background: var(--tape-red); color: var(--white); padding: 2px 6px; border-radius: 6px; }
.qpanel { display: none; }
.qpanel.is-active { display: block; animation: viewIn 0.35s var(--ease); }

/* Cotizador: resultado */
.quote-result { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--paper-line); animation: viewIn 0.4s var(--ease); }
.quote-result.is-on { display: block; }
.quote-detected { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.quote-detected__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-red-2); font-weight: 700; }
.quote-detected__cat { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.q-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
/* `.ca-mode` (Compra asistida) no tenía ninguna regla: sus dos botones salían
   con el aspecto por defecto del navegador. Es el mismo control que .q-mode.
   El activo engorda el borde con una sombra interior de 1 px en vez de
   cambiar de 1 a 2 px: así no cambia de tamaño y la fila de abajo no baja. */
.q-mode, .ca-mode { border: 1px solid var(--paper-line-2); background: var(--white); border-radius: var(--r-md); padding: 12px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); text-align: center; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.q-mode small, .ca-mode small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); margin-top: 2px; }
.q-mode.is-active, .ca-mode.is-active { border-color: var(--brand-navy); box-shadow: inset 0 0 0 1px var(--brand-navy), var(--shadow-hard-sm); background: var(--white); }
.q-mode.is-active small, .ca-mode.is-active small { color: var(--brand-red-2); }
.q-mode:focus-visible, .ca-mode:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.quote-breakdown { background-color: var(--brand-navy); color: var(--cream); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.qb-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(245,238,225,0.8); }
.qb-row span:last-child { font-family: var(--font-mono); }
.qb-total { padding-top: 12px; margin-top: 2px; border-top: 1px solid rgba(245,238,225,0.14); font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--cream); }
.qb-total span:last-child { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--orange-hot); }

/* Calcular (dentro del dashboard) */
/* ── La caja dibujada a escala ──────────────────────────────────────────
   Tres caras de cartón en isometría, con su cinta roja, y dentro el cubo de
   un pie cúbico en alambre para comparar. Lo dibuja app.js. */
.cajaviz { margin: 14px 0 0; padding: 0; }
.cajaviz[hidden] { display: none; }
.cajaviz svg { display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto; overflow: visible; }
.cajaviz__cara { stroke: var(--brand-navy); stroke-width: 1.6; stroke-linejoin: round; }
.cajaviz__cara--top { fill: #E8D5AE; }
.cajaviz__cara--izq { fill: #D6BE92; }
.cajaviz__cara--der { fill: #C2A878; }
.cajaviz__cinta { fill: var(--brand-red); opacity: 0.9; stroke: none; }
.cajaviz__cubo line {
  stroke: var(--brand-navy); stroke-width: 1.4; stroke-dasharray: 5 4;
  opacity: 0.55; stroke-linecap: round;
}
.cajaviz__pie {
  margin: 8px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--ink-mute);
}

/* ── Pulgadas o centímetros ── */
.calc__medcab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc__unidades { display: inline-flex; gap: 2px; padding: 2px; background: rgba(8,29,76,0.07); border-radius: 999px; }
/* La píldora se ve de 30 px, pero el dedo tiene 44: el ::before invisible
   estira la zona que se puede tocar hacia arriba y hacia abajo sin mover
   nada de la maqueta. Las dos opciones van una al lado de la otra, así que
   estirarla a lo alto no la monta sobre la vecina. A lo ancho, «cm» no
   llegaba a 44 px: min-width la lleva. Es la misma regla que la
   calculadora pública (page-sub.css). */
.calc__unidad {
  position: relative;
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 5px 12px; min-height: 30px; min-width: 44px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); background: none; transition: background 0.18s, color 0.18s;
}
/* 30 px de botón + 7 arriba + 7 abajo = 44 px donde el dedo cuenta. */
.calc__unidad::before { content: ''; position: absolute; inset: -7px 0; }
.calc__unidad:hover { color: var(--brand-navy); }
.calc__unidad.is-active { background: var(--brand-navy); color: var(--cream); }
.calc__unidad:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* ── La pasarela: métodos, datos de pago y el reporte del cliente ────────
   La tarjeta «Por pagar» va sobre fondo navy (.pay.stars-night), así que
   aquí el texto es crema y los bordes translúcidos. */
.pay__metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 12px 0 0; }
.pay__metodos[hidden] { display: none; }
.paymetodo {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; min-height: 56px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(245,238,225,0.06); border: 1.5px solid rgba(245,238,225,0.18);
  color: var(--cream); transition: background 0.18s, border-color 0.18s;
}
.paymetodo:hover { border-color: rgba(245,238,225,0.4); }
.paymetodo.is-active { background: var(--tape-red); border-color: var(--cream); }
.paymetodo:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.paymetodo b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.paymetodo small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; }

.pay__datos { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pay__datos[hidden] { display: none; }
.paydato {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(245,238,225,0.07); border: 1px solid rgba(245,238,225,0.14);
}
.paydato__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,238,225,0.7); flex: none; }
.paydato__v { font-family: var(--font-mono); font-size: 14px; color: var(--cream); flex: 1 1 auto; min-width: 0; word-break: break-all; }
.paydato__copiar {
  appearance: none; border: 0; cursor: pointer; flex: none; min-height: 44px;   /* 44 px: se toca con el pulgar, con el teléfono en la otra mano */
  padding: 6px 12px; border-radius: 8px;
  background: var(--cream); color: var(--brand-navy);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.paydato__copiar.ok { background: #6FC79A; }
.paydato__copiar:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.paydato__titulo { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--cream); }
.paydato__monto { margin: 8px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--cream); }
.paydato__copiar-todo {
  margin-top: 10px; width: 100%; padding: 8px 12px; border: 1px solid rgba(245,238,225,0.25);
  background: transparent; color: var(--cream); font: inherit; font-size: 13px; cursor: pointer; border-radius: 2px;
}
.paydato__copiar-todo.ok { background: #6FC79A; color: #0a1f14; border-color: #6FC79A; }
.paydato__copiar-todo:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.paydato__nota { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(245,238,225,0.72); }

.pay__form { margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pay__form[hidden] { display: none; }
.pay__form label { color: rgba(245,238,225,0.82); }
.pay__form input { background: rgba(245,238,225,0.96); color: var(--ink); }
.pay__form-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* .link-btn es navy, pensado para tarjeta clara. Aquí el fondo es navy
   también, así que sin esto el «Cancelar» queda a 1:1: invisible. */
.pay__form-acciones .link-btn { color: rgba(245,238,225,0.82); text-decoration-color: var(--brand-red); }
.pay__form-acciones .link-btn:hover { color: var(--cream); }
.pay__msg { font-size: 13px; line-height: 1.5; color: #FF9B90; }
.pay__msg:empty { display: none; }


/* ── La báscula ─────────────────────────────────────────────────────────
   La pareja del dibujo de la caja: aquel explica el tamaño para el
   marítimo, esta enseña el peso para el aéreo. La pinta assets/peso-viz.js. */
.pesoviz { --pesoviz-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.pesoviz__sombra { fill: rgba(8,29,76,0.38); pointer-events: none; }
.pesoviz__plato { fill: #0B2258; }
.pesoviz__plato-lip { fill: rgba(245,238,225,0.18); }
.pesoviz__cuerpo { fill: #071A46; }
.pesoviz__bezel { stroke: rgba(245,238,225,0.14); stroke-width: 1; }
.pesoviz__dial-ring { stroke: rgba(245,238,225,0.32); stroke-width: 1.1; }
.pesoviz__dial { stroke: rgba(8,29,76,0.08); stroke-width: 0.8; }
.pesoviz__glass { pointer-events: none; }
.pesoviz__pista {
  stroke: rgba(8,29,76,0.1); stroke-width: 3.2; stroke-linecap: round;
}
.pesoviz__arco {
  stroke: var(--brand-red); stroke-width: 3.2; stroke-linecap: round;
  opacity: 0.9;
}
.pesoviz__marcas line { stroke: rgba(8,29,76,0.22); stroke-width: 1; stroke-linecap: round; }
.pesoviz__marcas line.es-media { stroke: rgba(8,29,76,0.34); stroke-width: 1.15; }
.pesoviz__marcas line.es-larga { stroke: rgba(8,29,76,0.55); stroke-width: 1.55; }
.pesoviz__nums text {
  fill: rgba(8,29,76,0.42); font-family: var(--font-mono);
  font-size: 7.5px; letter-spacing: 0.02em;
}
.pesoviz__aguja { fill: var(--brand-red); }
.pesoviz__aguja-tail {
  stroke: rgba(8,29,76,0.35); stroke-width: 1.6; stroke-linecap: round;
}
.pesoviz__eje { fill: var(--brand-navy); stroke: #FFF8EE; stroke-width: 1.2; }
.pesoviz__eje-dot { fill: var(--brand-red); }
.pesoviz__cifra {
  fill: var(--brand-navy); font-family: var(--font-display); font-weight: 800;
  font-size: 20px; letter-spacing: -0.03em;
  transition: fill 0.45s var(--pesoviz-ease);
}
.pesoviz.is-pesando .pesoviz__cifra { fill: rgba(8,29,76,0.5); }
.pesoviz.is-asentada .pesoviz__cifra { fill: var(--brand-red); }
.pesoviz__lb {
  fill: rgba(8,29,76,0.38); font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.pesoviz__tope {
  fill: rgba(245,238,225,0.5); font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .pesoviz__cifra { transition: none; }
}

/* La cuenta escrita, en el casillero. */
.calc2__cuenta { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-mute); }
.calc2__cuenta:empty { display: none; }
.calc2__medcab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.calc2__unidad-lbl { flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

.calc2 { display: flex; flex-direction: column; gap: 18px; max-width: 540px; min-width: 0; }
.calc2 .field { min-width: 0; }
/* Las tres medidas de la caja, para el marítimo. Cada una encoge por igual
   para que en un teléfono de 360 px sigan cabiendo las tres en la fila. */
.calc2__caja { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
/* Cada medida es una etiqueta con su casilla dentro y el nombre debajo,
   a la vista (antes solo lo decía el aria-label). `min-width: 0` en las dos
   capas: sin él la etiqueta hereda el ancho mínimo del campo y en 360 px la
   tercera casilla se sale de la fila. */
.calc2__med { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; cursor: text; }
.calc2__med input { width: 100%; min-width: 0; text-align: center; }
.calc2__med-t {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center; line-height: 1.2;
}
/* El «×» y la unidad, centrados con la casilla y no con la etiqueta. */
.calc2__caja > span { flex: none; font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); align-self: flex-start; margin-top: 18px; }
.calc2__pies { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--red-text); }
.calc2 .field[hidden] { display: none; }
.calc2__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc2__mode { border: 1px solid var(--paper-line-2); background: var(--white); border-radius: 14px; padding: 16px; text-align: left; cursor: pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.calc2__mode small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
/* Mismo truco que .q-mode: 1 px de borde + 1 px de sombra interior, sin
   cambiar de tamaño. Con la zona «Distrito Capital, Miranda y Carabobo»
   partida en dos líneas, todo lo de debajo bajaba 2 px al elegir. */
.calc2__mode.is-active { border-color: var(--brand-navy); box-shadow: inset 0 0 0 1px var(--brand-navy), var(--shadow-hard-sm); background: var(--white); }
.calc2__mode.is-active small { color: var(--brand-red-2); }
.calc2__mode:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.calc2__out { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 22px; background-color: var(--brand-navy); color: var(--cream); border-radius: var(--r-lg); }
.calc2__amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px,5vw,52px); letter-spacing: -0.02em; color: var(--orange-hot); }
.card__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.card__title-row .boxy { width: clamp(56px, 7vw, 76px); flex: none; margin: -6px 0 -10px; }

/* dropzone for screenshot upload (pre-alerta OCR) */
.dropzone { display: block; width: 100%; box-sizing: border-box; border: 2px dashed var(--paper-line-2); border-radius: var(--r-lg); padding: 36px 24px; text-align: center; cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); background: rgba(8,29,76,0.02); overflow: hidden; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--brand-red); background: rgba(245,26,24,0.04); }
/* El campo de archivo va dentro, con .sr-only (no hidden): es el que recibe
   el foco del teclado, y este anillo lo enseña en toda la zona. `position`
   para que el campo de 1 px quede dentro de la zona y no en otro sitio de la
   página, que al enfocarlo haría saltar el desplazamiento. */
.dropzone { position: relative; }
.dropzone:focus-within { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.dropzone__ico { width: 54px; height: 54px; border-radius: 14px; background: var(--white); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: 3px 3px 0 var(--brand-red); display: grid; place-items: center; margin: 0 auto 16px; }
.dropzone__ico svg { width: 26px; height: 26px; }
.dropzone h3, .dropzone h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 6px; }
.dropzone p { font-size: 13px; color: var(--ink-mute); }
/* Caja fija, no maximo: con solo max-height la miniatura ocupaba cero
   al aparecer y hasta 220 px al llegar la foto, y el modal daba dos
   saltos. Con la caja puesta desde el principio, la foto se acomoda
   dentro y no mueve nada. */
.dropzone__preview { width: 220px; height: 220px; max-width: 100%; object-fit: contain; border-radius: var(--r-md); margin: 0 auto 12px; display: block; }
.ocr-status { margin-top: 16px; display: none; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--brand-navy); justify-content: center; }
.ocr-status.is-on { display: flex; }
/* Sin spinner: una barra skeleton que respira (misma animación que .skel) */
.ocr-status .spin { width: 54px; height: 10px; border-radius: 6px; background: rgba(245,26,24,0.3); position: relative; overflow: hidden; flex: none; }

/* ── Aviso de auth (toast) ── */
.auth-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);max-width:min(92vw,420px);padding:14px 18px;border-radius:14px;font-family:var(--font-body,system-ui);font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 20px 50px -18px rgba(8,29,76,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:9999}
.auth-notice.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
/* Toasts de marca: navy con borde rojo; el punto dice si fue bien (verde) o mal (rojo) */
.auth-notice{display:flex;align-items:flex-start;gap:10px;background:var(--brand-navy);color:var(--cream);border:2px solid var(--brand-red);box-shadow:4px 4px 0 var(--brand-red),0 20px 50px -18px rgba(8,29,76,.6);border-radius:14px}
.auth-notice::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:#2EE07A;margin-top:5px}
.auth-notice--ok{background:var(--brand-navy);color:var(--cream)}
.auth-notice--error{background:var(--brand-navy);color:var(--cream)}
.auth-notice--error::before{background:var(--orange-hot)}
/* En el casillero el aviso sube por encima de la barra móvil */
@media (max-width: 860px) { .auth-notice.dash-notice { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  CASILLERO (app/cuenta.html) · fase 1 + fase 2                ║
   ║  Fase 1 (Empieza aquí, dirección campo por campo, barra móvil ║
   ║  y hoja «Más») dejó el marcado sin estilos en ningún CSS:     ║
   ║  se definen aquí. Fase 2: paquetes con estado real, detalle,  ║
   ║  pre-alerta con guardado real, Rastrear, Mi perfil, Mis envíos║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Utilidades ── */
.skel { display: inline-block; height: 1em; min-width: 3ch; border-radius: 6px; vertical-align: middle; background: rgba(8,29,76,0.1); position: relative; overflow: hidden; }
.skel::after, .ocr-status .spin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: skel-slide 1.4s linear infinite; }
.skel--dark { background: rgba(245,238,225,0.18); }
.skel--dark::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); }
/* Sobre cartón, un poco más de tinta: con el 10 % de siempre la fila de
   «Nombre completo» y la píldora de la suite parecían vacías mientras
   cargaba el perfil. El sticker rojo de dentro de .addr sigue con el crema. */
.kraft-card .skel:not(.skel--dark), .app__user-meta .suite .skel { background: rgba(8,29,76,0.2); }
@keyframes skel-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* `pointer-events: none` frena el ratón y nada más: el enlace sigue en el
   orden de tabulación y Enter lo dispara igual. Estos dos llevan
   target="_blank", así que un Enter de más abría una pestaña en href="#" o
   mandaba un WhatsApp de despacho con cero cajas marcadas. El bloqueo de
   verdad lo hace `aria-disabled`, que marcamos siempre junto a esta clase:
   quita el elemento de la tabulación por CSS y hay un guardia en JavaScript
   que corta clic y Enter. */
.btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn[aria-disabled="true"] { pointer-events: none; }
a.btn[aria-disabled="true"] { cursor: default; }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }
/* Anillo que se desvanece (solo opacity; box-shadow animado repintaba cada frame) */
.is-flash { position: relative; }
.is-flash::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--brand-red); border-radius: inherit; pointer-events: none; animation: flash-ring 1.6s var(--ease) forwards; }
@keyframes flash-ring { from { opacity: 1; } to { opacity: 0; } }
.field__err--solo { margin-top: 8px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.card__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.card__head .boxy { width: 52px; margin: -8px 0 -12px; }
.form-help { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.form-help a { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 3px; }
.phone-row { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.phone-row select { padding-left: 12px; padding-right: 8px; }
.field textarea { min-height: 70px; }

/* ── Sidebar y cabecera ── */
.app__user--link { border-radius: var(--r-md); padding: 6px; margin: -6px; transition: background 0.25s; }
.app__user--link:hover { background: var(--glass); }
.app__side-link { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: rgba(245,238,225,0.75); transition: color 0.2s; }
.app__side-link svg { width: 16px; height: 16px; }
.app__side-link:hover { color: var(--cream); }
.app__side-link--muted { color: rgba(245,238,225,0.5); font-size: 12.5px; margin-top: 10px; }
.app__side-link[data-wa-link] { justify-content: center; background: var(--wa-green); color: var(--navy-night); border: 2px solid var(--navy-night); box-shadow: 3px 3px 0 var(--brand-red); border-radius: var(--r-md); padding: 10px 14px; font-weight: 700; }
.app__side-link[data-wa-link]:hover { background: var(--wa-green-hover); color: var(--navy-night); }
.app__side-link:focus-visible { outline: 2px solid var(--orange-hot); outline-offset: 2px; border-radius: 8px; }
.app__side .brand__tag { color: rgba(245,238,225,0.55); }
/* Boxy asomado al pie del sidebar (detrás del bloque de usuario, no tapa nada) */
.app__side-boxy { position: absolute; right: -14px; bottom: 196px; width: 92px; rotate: -8deg; opacity: 0.95; pointer-events: none; z-index: 0; }
.app__side { position: sticky; overflow: hidden; }
.app__side > * { position: relative; z-index: 1; }
.app__side > .app__side-boxy { position: absolute; z-index: 0; }
@media (max-height: 720px) { .app__side-boxy { display: none; } }
/* Cabecera del casillero */
.app__head-kicker { margin-bottom: 8px; }
.app__head-kicker .tape { margin: 0; }
.app__head .sub { max-width: 60ch; }
.app__head-actions { display: flex; align-items: center; gap: 10px; }
.app__avatar--head { display: none; border: 0; cursor: pointer; width: 40px; height: 40px; font-size: 14px; }
.app__nav a[hidden] { display: none; }

/* ── Barra de error de carga ── */
.loadbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--cream-2); border: 2px solid var(--brand-red); box-shadow: 3px 3px 0 var(--brand-red-2); color: var(--ink); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.loadbar__msg { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.loadbar__boxy { width: 40px; flex: none; }
.loadbar a { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 3px; }

/* ── «Empieza aquí» ── */
.start { margin-bottom: 16px; }
.start__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.start__kicker { margin-bottom: 8px; }
.start__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px,2.4vw,26px); letter-spacing: -0.025em; line-height: 1.1; }
.start__toggle { border: 1.5px solid var(--brand-navy); background: var(--white); color: var(--ink); border-radius: var(--r-btn); padding: 7px 12px; min-height: 44px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 2px 2px 0 var(--brand-navy); }
.start__toggle:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.start__skel { display: none; flex-direction: column; gap: 10px; padding: 6px 0 12px; }
.start.is-loading .start__skel { display: flex; }
.start.is-loading .start__steps, .start.is-loading .start__done { display: none; }
/* Cuando la carga falló y no hay cajas a la vista: en vez de la bienvenida
   de cliente nuevo, la frase y su Reintentar (updateStartCard). */
.start__err { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0 6px; }
.start__err[hidden], .start.is-loading .start__err { display: none; }
.start__err .start__s { margin: 0; flex: 1 1 240px; }
/* Las paradas del inicio sin poder contar: «?» apagado, no la cifra roja. */
.viaje[data-estado="error"] .viaje__n { color: var(--ink-mute); }
/* La lista de Mis paquetes con una lectura caída (los paquetes o las cajas
   del aliado): lo que hay es verdad, pero puede faltar alguna. */
.prelist__aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.prelist__aviso span { flex: 1 1 220px; }
.start__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.start__steps[hidden] { display: none; }
.start__step { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--paper-line); }
.start__step:first-child { border-top: 0; }
.start__num { width: 34px; height: 34px; border-radius: 50%; background: var(--white); color: var(--ink); border: 2px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.start__num svg { display: none; width: 16px; height: 16px; }
.start__step.is-done .start__num { background: var(--ok-fill); color: var(--white); border-color: var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-navy); }
.start__step.is-done .start__num b { display: none; }
.start__step.is-done .start__num svg { display: block; }
.start__t { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.start__step.is-done .start__t { color: var(--ink-mute); text-decoration: line-through; }
.start__s { font-size: 13.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }
.start__done { display: flex; flex-direction: column; gap: 8px; }
.start__done[hidden] { display: none; }
.start__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--brand-navy); font-size: 14px; align-self: flex-end; text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.start__link:hover { color: var(--brand-red-2); }
.start__link svg { width: 14px; height: 14px; }
.home-grid { align-items: start; }
.home-side { display: flex; flex-direction: column; gap: 16px; }

/* ── Dirección campo por campo ── */
/* La dirección es una caja de cartón sellada con cinta (.kraft-card--taped) y la suite va en sticker rojo */
.addr { padding: 26px 22px 22px; }
.addr__head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.addr__label { margin-bottom: 10px; }
.addr__label .tape { margin: 0; }
.addr__suite { display: inline-flex; }
.addr__suite .sticker { font-size: 15px; }
.addr__suite .skel { min-width: 5ch; }
.addr__copyall { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--brand-navy); background: var(--white); color: var(--brand-navy); border-radius: var(--r-md); box-shadow: 3px 3px 0 var(--brand-navy); padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s; }
.addr__copyall svg { width: 14px; height: 14px; }
.addr__copyall:hover:not(:disabled) { background: var(--cream-2); translate: -1px -1px; box-shadow: 4px 4px 0 var(--brand-navy); }
.addr__copyall:active:not(:disabled) { translate: 2px 2px; box-shadow: 1px 1px 0 var(--brand-navy); }
.addr__copyall:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.addr__copyall:disabled { opacity: 0.5; cursor: default; }
.addr__rows { position: relative; z-index: 2; display: flex; flex-direction: column; }
.addr__row { display: grid; grid-template-columns: 112px 1fr 44px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px dashed rgba(8,29,76,0.22); }
.addr__row:first-child { border-top: 0; }
/* En pantalla ancha la ficha va en dos columnas. Es algo que se copia campo a
   campo, no un texto que se lee de arriba abajo: en una sola columna se
   convertía en una torre de 700 px que empujaba todo lo demás fuera de vista. */
@media (min-width: 1200px) {
  .addr__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .addr__row { grid-template-columns: 96px minmax(0, 1fr) 40px; }
  .addr__row:nth-child(2) { border-top: 0; }
}
.addr__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.addr__v { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); word-break: break-word; }
.addr__v small { color: var(--ink-soft); font-size: 11px; }
.addr__row--hl .addr__v { color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Sin cursiva: Poppins no tiene aquí su itálica cargada y el navegador la
   inclinaba a mano, deformando las letras. Va sobre --kraft (la tarjeta de
   la dirección), el fondo más oscuro de la app: el 0.6 de antes daba 3.79:1
   y --ink-mute se queda justo (4.71:1), así que --ink-soft (6.14:1). */
.addr__v--pending { color: var(--ink-soft); font-style: normal; font-family: var(--font-body); }
.addr__copy { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--brand-navy); background: var(--white); color: var(--brand-navy); display: grid; place-items: center; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.addr__copy svg { width: 15px; height: 15px; }
.addr__copy:hover:not(:disabled) { background: var(--brand-navy); color: var(--cream); }
.addr__copy:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.addr__copy:disabled { opacity: 0.4; cursor: default; }
.addr__copy.is-copied { background: var(--ok-fill); border-color: var(--ok-fill); color: var(--white); }
.addr__copy.is-failed { background: var(--tape-red); border-color: var(--tape-red); color: var(--white); }
.addr__copy--wa { background: var(--wa-green); border-color: var(--brand-navy); color: var(--navy-night); }
.addr__help { position: relative; z-index: 2; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.addr__help b { color: var(--ink); }
.addr__example { position: relative; z-index: 2; margin-top: 12px; }
.addr__example summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand-red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.addr__example summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.amz { margin-top: 12px; background: var(--white); color: #111; border-radius: var(--r-md); padding: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.amz__title { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.amz__title span { font-weight: 400; font-size: 11px; color: #6B6B6B; }   /* #777 sobre blanco = 4.48:1 */
.amz__f { margin-bottom: 8px; }
.amz__f label { display: block; font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.amz__f > div { border: 1px solid #a6a6a6; border-radius: 3px; padding: 6px 8px; background: var(--white); }
.amz__f > div + div { margin-top: 6px; }
.amz__f--3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.amz__hl { border-color: var(--brand-red) !important; background: rgba(245,26,24,0.08) !important; font-weight: 700; }
.amz__muted { color: #6B6B6B; font-style: italic; }   /* #888 sobre blanco = 3.54:1 */
.amz__note { font-size: 11.5px; color: #555; margin-top: 4px; }

/* ── KPIs tocables · Telegram ── */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tg__main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.tg__ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-sky); color: var(--brand-blue); border: 1.5px solid rgba(8,29,76,0.2); display: grid; place-items: center; flex-shrink: 0; }
.tg__status { font-size: 13px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; }   /* 5.65:1 sobre --cream-2; el 0.6 de antes se quedaba en 4.35:1 */

/* ── Chips de filtro ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chips { gap: 10px 12px; margin-bottom: 12px; }
.chip { cursor: pointer; font-weight: 700; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.chip:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }

/* ── Barra móvil y hoja «Más» ── */
.app__mobnav button { background: transparent; border: 0; font: inherit; cursor: pointer; }
@media (max-width: 860px) {
  .app__avatar--head { display: grid; }
  .app__head-cta { padding: 12px 16px; font-size: 13.5px; }
  .app__mobnav a, .app__mobnav button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(245,238,225,0.6); font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--r-sm); }
  .app__mobnav button svg { width: 20px; height: 20px; }
  .app__mobnav__cta { position: relative; top: -14px; color: var(--cream) !important; }
  .app__mobnav__ctaBtn { width: 52px; height: 52px; border-radius: 50%; background: var(--tape-red); color: var(--white); border: 2px solid var(--cream); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--cream), 0 10px 24px -8px var(--orange-ink); }
  .app__mobnav a:focus-visible, .app__mobnav button:focus-visible { outline: 2px solid var(--orange-hot); outline-offset: 2px; }
  .app__mobnav__ctaBtn svg { width: 22px; height: 22px; }
}
.sheet-mask { position: fixed; inset: 0; background: rgba(8,12,36,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; }
.sheet-mask.is-open { opacity: 1; visibility: visible; }
.sheet { width: 100%; max-width: 520px; background: var(--cream-2); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform 0.35s var(--ease); outline: 0; max-height: 85vh; overflow-y: auto; }
.sheet-mask.is-open .sheet { transform: translateY(0); }
.sheet__grip { width: 42px; height: 4px; border-radius: 999px; background: rgba(8,29,76,0.18); margin: 4px auto 14px; }
.sheet__user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--paper-line); margin-bottom: 8px; }
.sheet__user-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; border-radius: var(--r-md); }
.sheet__meta { min-width: 0; }
.sheet__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__suite { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); }
.sheet__hint { font-size: 12.5px; color: var(--brand-red-2); font-weight: 700; margin-top: 2px; }
.sheet__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(8,29,76,0.06); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.sheet__close svg { width: 15px; height: 15px; }
.sheet__list { display: flex; flex-direction: column; }
.sheet__item { display: flex; align-items: center; gap: 12px; padding: 14px 6px; font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--paper-line); }
.sheet__item:last-child { border-bottom: 0; }
.sheet__item svg { width: 18px; height: 18px; color: var(--brand-red-2); }
.sheet__item.is-active { color: var(--brand-red-2); }
.sheet__suite { display: inline-block; padding: 2px 8px; border-radius: 999px; color: var(--brand-navy); background: var(--kraft); border: 1.5px solid var(--brand-navy); box-shadow: 2px 2px 0 var(--brand-red); font-weight: 700; margin-top: 2px; }
.sheet__item--out { color: var(--ink-mute); }
.sheet__item[hidden] { display: none; }

/* ── Mis paquetes: filas con estado real y panel de detalle ── */
.prow--skel .skel { display: block; height: 12px; }
.prow--btn { cursor: pointer; border-radius: var(--r-md); margin: 0 -8px; padding-left: 8px; padding-right: 8px; transition: background 0.2s; }
.prow--btn:hover { background: rgba(8,29,76,0.04); }
.prow--btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; background: rgba(8,29,76,0.04); }
.prow--btn.is-open { border-bottom-color: transparent; }
.prow__main { min-width: 0; }
.prow__main .s { white-space: normal; line-height: 1.4; }
.prow__meta { font-size: 12px; color: var(--ink-mute); margin-top: 3px; word-break: break-word; }
.prow__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.badge-status--cancelled { background: var(--cream); color: var(--ink-mute); border-color: rgba(8,29,76,0.3); box-shadow: none; text-decoration: line-through; }
.badge-status--cancelled::before { display: none; }
.badge-status--alert { background: var(--white); color: var(--brand-red-2); border-color: var(--brand-red-2); box-shadow: 2px 2px 0 var(--brand-red-2); }
.badge-status--alert::before { background: var(--brand-red); }
.badge-status--sync { background: var(--kraft-2); color: var(--brand-navy); }
.badge-status--sync::before { background: var(--kraft-line); }
.prow__detail { background: rgba(8,29,76,0.035); border-radius: 14px; padding: 16px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 14px; animation: viewIn 0.3s var(--ease); }
.pd { display: grid; grid-template-columns: 1fr; gap: 6px 14px; }
.pd__row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; font-size: 13.5px; }
.pd__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.pd__v { color: var(--ink); word-break: break-word; }
.pd__v--mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.pd__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pd__cancel { color: var(--brand-red-2); }
/* «Qué sigue»: nota en cartón (sin borde lateral de color) */
.whatsnext { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); border-radius: var(--r-sm); padding: 10px 12px; }
.whatsnext--boxy { display: flex; align-items: center; gap: 12px; }
.whatsnext--boxy .boxy { width: 56px; flex: none; }
.photos__lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.photos__none { font-size: 13px; color: var(--ink-mute); }
.photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.photos__grid a, .photos__ph { display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: rgba(8,29,76,0.06); }
.photos__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
  .pd__row { grid-template-columns: 1fr; gap: 2px; }
  /* En el celular los stickers de estado bajan debajo del texto: la fila no se aprieta */
  .prow { grid-template-columns: 40px 1fr; gap: 6px 10px; }
  .prow__ico { width: 40px; height: 40px; grid-row: span 2; }
  .prow__badges { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 8px 10px; padding-bottom: 2px; }
  .prow--skel > .skel:last-child { grid-column: 2; }
  .start__head { flex-wrap: wrap; }
  .start__head > div:first-child { flex: 1 1 200px; }
  .start__kicker .tape { white-space: nowrap; }
  /* La etiqueta pasa encima del valor: «Suite TCDU-1787» ya no se parte en dos líneas */
  .addr__row { grid-template-columns: 1fr 44px; row-gap: 2px; }
  .addr__k { grid-column: 1 / -1; }
}

/* ── Modal pre-alerta: dos caminos, progreso OCR real, guardado real ── */
.pa-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.pa-mode { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px solid var(--brand-navy); background: var(--white); color: var(--ink); border-radius: var(--r); padding: 20px 14px; min-height: 132px; cursor: pointer; font: inherit; box-shadow: var(--shadow-hard); transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s; }
.pa-mode:hover { background: var(--cream-2); translate: -1px -1px; box-shadow: var(--shadow-hard-lg); }
.pa-mode:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--brand-navy); }
.pa-mode:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.pa-mode svg { width: 26px; height: 26px; color: var(--brand-red-2); }
.pa-modes { gap: 14px; padding: 4px 6px 8px 0; }
.modal__sub.tape { color: var(--tape-fg); margin-bottom: 12px; }
.pa-mode__t { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.pa-mode__s { font-size: 12.5px; color: var(--ink-mute); }
.pa-modes[hidden], .dropzone[hidden], .pa-review[hidden], .pa-save[hidden], .pa-alt[hidden] { display: none; }
/* El tercer camino: reenviar el correo de la tienda. Va debajo de los dos
   botones, como texto, porque no se hace desde aquí. */
.pa-correo { margin: 14px 0 0; padding: 12px 14px; border: 1.5px dashed var(--brand-navy); border-radius: var(--r-md); background: var(--cream-2); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.pa-correo__t { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-red-2); margin-bottom: 4px; }
/* La dirección va DENTRO de una frase: hacerla de 44 px de alto partiría el
   párrafo. Se ve como está, y el ::before invisible le da al dedo los 44 px
   que necesita (lo de arriba y abajo es texto, no otro botón). */
.pa-correo__addr { position: relative; display: inline-block; font: inherit; font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--brand-navy); background: var(--white); border: 1.5px solid var(--brand-navy); border-radius: 6px; padding: 2px 8px; margin: 2px 2px; cursor: pointer; }
.pa-correo__addr::before { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; translate: 0 -50%; }
.pa-correo__addr:hover { background: var(--brand-navy); color: var(--cream); }
.pa-correo__addr:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.pa-correo__addr.is-copied { background: var(--brand-navy); color: var(--cream); }
/* Estos sí van sueltos, cada uno en su renglón: tamaño real de 44 px. */
.pa-correo__addr--filtro { font-family: inherit; font-weight: 600; font-size: 12.5px; margin: 6px 0 0; display: block; width: max-content; max-width: 100%; min-height: 44px; padding: 10px 12px; }
.pa-correo__addr--filtro::before { display: none; }
.pa-correo__auto { margin-top: 10px; border-top: 1px dashed rgba(8,29,76,0.3); padding-top: 8px; }
.pa-correo__auto summary { cursor: pointer; font-weight: 700; color: var(--brand-navy); font-size: 13px; }
.pa-correo__auto summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 4px; }
.pa-correo__auto ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pa-correo__auto p { margin: 8px 0 0; color: var(--ink-mute); }
.pa-correo[hidden] { display: none; }
/* Tarjeta «Conectar mi Gmail»: los dos botones (conectar y desconectar) juntos. */
.tg__btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tg__btns .link-btn { font-size: 13px; }
.dropzone { margin-top: 14px; }
.ocr-status--bar { flex-direction: column; gap: 8px; }
.ocr-status__row { display: flex; align-items: center; gap: 10px; }
.ocr-progress { width: 100%; max-width: 360px; height: 6px; border-radius: 999px; background: rgba(8,29,76,0.12); overflow: hidden; }
.ocr-progress__bar { display: block; height: 100%; width: 0; background: var(--brand-red); border-radius: 999px; transition: width 0.3s var(--ease); }
/* Medía 20 px de alto, sin relleno: debajo de una barra que se mueve, el
   dedo fallaba. Ahora 44, sin cambiar cómo se ve el texto. */
.ocr-status__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* La nota que aparece cuando el plan elegido no se puede calcular de una
   foto, porque se cobra por volumen. */
.qb-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(245,238,225,0.72); }
.qb-nota[hidden] { display: none; }
.pa-alt { appearance: none; background: none; border: 0; padding: 0; min-height: 44px; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--brand-navy); text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 3px; text-decoration-thickness: 2px; cursor: pointer; }
.pa-alt:hover { color: var(--brand-red-2); }
.pa-alt svg { width: 16px; height: 16px; }
.pa-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--paper-line-2); border-radius: var(--r-md); background: var(--white); cursor: pointer; }
.pa-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-red); flex-shrink: 0; }
.pa-check b { display: block; font-family: var(--font-display); font-size: 14.5px; }
.pa-check small { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.field.is-off input { background: rgba(8,29,76,0.04); color: rgba(8,29,76,0.4); }
.pa-save { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; }
.pa-save--err { background: var(--cream-2); color: var(--ink); border: 2px solid var(--brand-red); box-shadow: 3px 3px 0 var(--brand-red-2); }
.pa-save--info { background: rgba(8,29,76,0.05); color: var(--ink); }
.pa-save small { display: block; font-weight: 400; font-size: 12.5px; margin-top: 3px; opacity: 0.8; }
.pa-success__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pa-review { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.pa-review__t { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.pa-review__row { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr auto; gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--paper-line-2); border-radius: var(--r-md); background: var(--white); }
.pa-review__row .field input, .pa-review__row .field select { padding: 10px 12px; }
/* Menos de 16px y iOS amplia la pagina en cuanto se toca el campo, y no
   la devuelve al salir. El tamano pequeno, solo donde no hay ese teclado. */
@media (min-width: 861px) { .pa-review__row .field input, .pa-review__row .field select { font-size: 14px; } }
.pa-review__x { border: 0; background: rgba(8,29,76,0.06); width: 38px; height: 42px; border-radius: var(--r-sm); cursor: pointer; font-size: 16px; }
@media (max-width: 560px) { .pa-review__row { grid-template-columns: 1fr 1fr; } .pa-review__row .field:first-child { grid-column: 1 / -1; } .pa-modes { grid-template-columns: 1fr; } }

/* ── Rastrear: cabecera e historial ── */
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--paper-line); }
.track-head__code { font-family: var(--font-mono); font-size: 13px; color: var(--brand-red-2); font-weight: 700; word-break: break-all; }
.track-head__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }
.track-none { font-size: 14px; line-height: 1.55; color: var(--ink-mute); padding: 14px 0 12px; }
.track-hist { margin-top: 14px; }
.track-hist summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-red-2); font-weight: 700; }
.track-hist ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.track-hist li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13px; }
.track-hist__d { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }
.track-hist__t { color: var(--ink); }
.track-step__c .s { white-space: normal; }

/* ── Mi perfil ── */
.pf-grid { align-items: start; }
.pf-fields { display: flex; flex-direction: column; gap: 14px; }
.pf-lede { font-size: 13.5px; color: var(--ink-mute); margin: -6px 0 14px; line-height: 1.5; }
.pf-suite { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--brand-navy); font-weight: 700; }
.pf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.pf-msg { font-size: 13.5px; font-weight: 600; color: var(--ok); }
.pf-msg.is-err { color: var(--brand-red-2); }
.pf-pass { margin-top: 16px; }
.pf-fields--row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.pf-fields--row .pf-msg { grid-column: 1 / -1; }
.segmented button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.field[hidden] { display: none; }
@media (max-width: 620px) { .pf-fields--row { grid-template-columns: 1fr; } .pf-fields--row .btn { width: 100%; justify-content: center; } }

/* ── Mis envíos ── */
.envios-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.envios-main, .envios-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .envios-grid { grid-template-columns: 1fr; } }
.ship { padding: 18px 0; border-top: 1px solid var(--paper-line); display: flex; flex-direction: column; gap: 12px; }
.ship:first-child { border-top: 0; padding-top: 4px; }
.ship__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ship__ref { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--brand-navy); }
.ship__meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; letter-spacing: 0.03em; }
.ship__boxes { font-size: 13.5px; color: var(--ink-mute); }
.ship__hold { font-size: 13.5px; color: var(--ink); background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); padding: 10px 12px; border-radius: var(--r-sm); }
.ship__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pay { background-color: var(--brand-navy); color: var(--cream); border: 2px solid var(--brand-navy); box-shadow: 4px 4px 0 var(--brand-red); }
.pay .card__title { color: var(--cream); }
.pay__how { margin-bottom: 14px; }
.pay__pending { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: rgba(245,238,225,0.85); border: 1px dashed rgba(245,238,225,0.35); border-radius: var(--r-sm); padding: 10px 12px; }
.pay__sent { font-size: 13px; color: rgba(245,238,225,0.75); margin-top: 10px; line-height: 1.45; }
.pay .form-help { color: rgba(245,238,225,0.55); margin-top: 10px; }
.boxes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.boxes__none { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
.box { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--paper-line-2); border-radius: var(--r-md); background: var(--white); cursor: pointer; }
.box input { width: 18px; height: 18px; accent-color: var(--brand-red); grid-row: span 2; }
.box__t { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.box__s { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.dispatch .calc2__modes { margin-bottom: 12px; }
.dispatch .calc2__mode { padding: 12px 14px; }
.dispatch__est { background-color: var(--brand-navy); color: var(--cream); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.dispatch__est:empty { display: none; }
.dispatch__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,238,225,0.6); }
.dispatch__amt { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--orange-hot); }
.dispatch__note { font-size: 12.5px; color: rgba(245,238,225,0.7); }
.dispatch .form-help { margin-bottom: 12px; }
.deliv__mode { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.deliv__line { font-size: 14px; color: var(--ink-mute); margin-top: 4px; line-height: 1.5; }
.deliv__phone { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 8px; }
.deliv__none { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }

/* ── Fase 2 · complementos (lo que el bloque anterior no cubría) ── */
/* El atributo hidden debe ganar siempre (.loadbar { display:flex } lo pisaba y la barra de error se veía sin error). */
[hidden] { display: none !important; }
.start__head { align-items: center; }
.start__boxy { width: clamp(64px, 8vw, 96px); height: auto; flex-shrink: 0; margin: -10px 0 -18px; align-self: flex-end; }
@media (max-width: 860px) { .start__boxy { width: 60px; margin: -6px 0 -10px; } }
@media (max-width: 400px) { .start__boxy { display: none; } }
.pa-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.pa-form[hidden], .pa-check[hidden], .modal__lede[hidden], .ocr-status[hidden] { display: none; }
.pa-check span { min-width: 0; }
.pa-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 0 8px; animation: viewIn 0.35s var(--ease); }
.pa-success[hidden] { display: none; }
.pa-success__boxy { width: clamp(80px, 12vw, 96px); margin-bottom: 4px; }
.pa-success__t { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.pa-success__s { font-size: 14px; color: var(--ink-mute); max-width: 36ch; line-height: 1.5; }
.pa-success__actions { margin-top: 8px; }
.pa-save__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-save[hidden] { display: none; }
.ocr-status--bar.is-on { display: flex; }
.prow__detail[hidden] { display: none; }
.prow__ico--pkg { background: rgba(30,158,90,0.16); border-color: rgba(30,158,90,0.4); color: var(--ok); }
.prow__ico--ship { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--cream); }
.confirming { background: var(--tape-red) !important; color: var(--white) !important; }
.ship__tracker { margin-top: 4px; }
.ship__tracker .track-step { padding-bottom: 14px; }
.ship__tracker .track-step .postmark { --postmark-size: 40px; }
.ship__tracker .track-step__c { padding-top: 8px; }
.ship__tracker .track-step__c .t { font-size: 14px; }
.ship__tracker .track-step { grid-template-columns: 40px 1fr; gap: 12px; }
.card[hidden] { display: none; }
.badge-status--ready { background: var(--brand-sky); }
.badge-status--ready::before { background: var(--ok-fill); }

/* ── v9 · movimiento reducido: toda animación de la app se detiene y queda en estado final (solo transform/opacity animan) ── */
@media (prefers-reduced-motion: reduce) {
  .view.is-active, .track-result.is-on, .qpanel.is-active, .quote-result, .prow__detail, .pa-success, .auth__step,
  .stepper__line.is-done::after, .is-flash, .skel::after, .ocr-status .spin::after { animation: none; }
  .stepper__line.is-done::after { transform: none; }
  .btn-google:hover, .btn-google:active, .kpi--btn:hover, .kpi--btn:active, .pa-mode:hover, .pa-mode:active,
  .addr__copyall:hover, .addr__copyall:active, .address-card__copy:hover, .address-card__copy:active { translate: 0 0; }
}

/* ╔════════ RESPONSIVE v10 · casillero y acceso ════════╗
   Correcciones de la auditoria por dispositivo. Al final del archivo
   para ganar la cascada (el aviso flotante se anulaba a si mismo). */

/* 1. Aviso flotante: en movil arriba, donde no pelea con la barra inferior */
@media (max-width: 860px) {
  .auth-notice, #toast {
    top: calc(14px + env(safe-area-inset-top));
    bottom: auto;
  }
}

/* 2. Alto de pantalla real: con svh la barra del navegador no corta el contenido */
.auth { min-height: 100vh; min-height: 100svh; }
.app { min-height: 100vh; min-height: 100svh; }
@media (min-width: 861px) { .app__side { height: 100vh; height: 100svh; } }

/* 3. Areas tactiles de 44 px en los caminos de salida y de ayuda */
.auth__back { display: inline-flex; align-items: center; min-height: 44px; }
.app__avatar--head { width: 44px; height: 44px; font-size: 15px; }
.addr summary, .address-card summary, .app details > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0;
}
.addr summary::-webkit-details-marker { display: none; }

/* 4. Barra inferior: etiquetas legibles y version apaisada compacta */
.app__mobnav a, .app__mobnav button { font-size: 11px; letter-spacing: 0.04em; }
@media (max-width: 860px) and (orientation: landscape) and (max-height: 480px) {
  .app__mobnav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .app__mobnav a, .app__mobnav button { font-size: 10px; gap: 2px; min-height: 40px; }
  .app__mobnav svg { width: 18px; height: 18px; }
}

/* 5. Tablet vertical (620-860): el panel de marca deja de ser una franja vacia */
@media (min-width: 620px) and (max-width: 860px) {
  .auth { grid-template-rows: auto 1fr; }
  .auth__brand {
    flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 26px clamp(20px, 4vw, 36px) 0;
  }
  .auth__brand-mid { display: block; }
  .auth__brand-mid h2 { font-size: clamp(24px, 4.4vw, 34px); }
  .auth__brand-mid p { max-width: 46ch; }
  .auth__points { display: grid; gap: 8px; }
  .auth__brand-img.boxy { height: 150px; align-self: flex-end; margin: -8px 0 0; }
}

/* 6. Telefono: Boxy con presencia (antes 82 px) */
@media (max-width: 619px) {
  .auth__brand-img.boxy { height: 112px; margin-left: auto; }
}

/* 7. Inicio del casillero: en tablet una columna con los datos en tira de 3 */
@media (max-width: 1180px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
}
@media (max-width: 700px) { .home-side { grid-template-columns: 1fr; } }

/* 8. Mis envios: la tablet vertical conserva las dos columnas */
@media (min-width: 701px) and (max-width: 860px) {
  .envios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 9. El matasellos de la direccion entra completo en telefono */
@media (max-width: 620px) {
  .addr__postmark, .address-card__postmark { top: 10px; right: 10px; --postmark-size: 60px; }
  .addr__head, .address-card__label { padding-right: 74px; }
}

/* 10. La pila de cajas del aside no se esconde bajo el contenido */
.app__side-boxy { right: 6px; }

/* 11. (El contraste del subtítulo de cabecera ya lo da --ink-mute en su
   regla de arriba: 5.45:1 sobre --cream. Aquí había una segunda copia.) */

/* ── RESPONSIVE v10 · ronda 2 ── */
.badge-status { font-size: 11.5px; }
.addr__k { font-size: 11px; }
@media (hover: none) {
  .app__mobnav a, .app__mobnav button { min-width: 46px; }
  .app__brand { min-height: 44px; }
  #logoutBtn, .app__side-link, .start__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CASILLERO EN TRÁMITE · v11                                           ║
   ║  El registro ya no reparte suites: el equipo la pide al almacén de     ║
   ║  Doral y la escribe en el panel. Mientras tanto esta tarjeta ocupa el  ║
   ║  lugar de la dirección — con el trámite a la vista, no un vacío.       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.suitewait { grid-column: 1 / -1; display: grid; gap: clamp(14px, 1.8vw, 20px); position: relative; }
.suitewait[hidden] { display: none; }
.suitewait__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.suitewait__intro { min-width: 0; }
.suitewait__kicker { margin-bottom: 10px; }
.suitewait__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(20px, 2.4vw, 27px); color: var(--brand-navy); margin: 0 0 6px;
}
.suitewait__lede { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.suitewait__boxy { width: clamp(92px, 11vw, 128px); height: auto; flex: none; align-self: flex-end; margin: -8px -4px -10px 0; }

/* Riel del trámite: tres paradas unidas por una línea de puntos */
.suitewait__rail { list-style: none; margin: 0; padding: 0; display: grid; }
.suitewait__step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 9px 0; }
.suitewait__step::before {
  content: ''; position: absolute; left: 16px; top: 40px; bottom: -6px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(8,29,76,0.28) 0 4px, transparent 4px 9px);
}
.suitewait__step:last-child::before { display: none; }
.suitewait__dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 2px solid rgba(8,29,76,0.32); background: var(--cream-2); color: var(--brand-navy);
}
.suitewait__dot svg { width: 16px; height: 16px; display: none; }
/* El check es solo de los pasos cumplidos; el que esta en curso lleva el pulso */
.suitewait__step.is-done .suitewait__dot svg { display: block; }
.suitewait__step.is-done .suitewait__pulse { display: none; }
.suitewait__step.is-done .suitewait__dot { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--cream); }
.suitewait__step.is-now .suitewait__dot { border-color: var(--brand-red); background: var(--white); }
.suitewait__pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-red); position: relative; display: block; }
.suitewait__pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-red);
  opacity: 0; animation: sw-pulse 1.9s var(--ease) infinite;
}
@keyframes sw-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.8); opacity: 0; } }
.suitewait__stxt { min-width: 0; padding-top: 2px; }
.suitewait__stxt b { display: block; font-size: 15px; font-weight: 600; color: var(--brand-navy); line-height: 1.3; }
/* Sobre --kraft-2 (.kraft-card--light): --ink-mute da 5.20:1; el 0.62 de
   antes, 4.34:1. */
.suitewait__stxt small { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
/* El paso que todavía no toca se apaga con el color y no con opacity: al
   0.55 de antes el título quedaba en 3.54:1 y la línea de debajo en 2.23:1,
   y eso también es texto que hay que poder leer. Ahora el título va en
   --ink-mute (5.20:1) y se distingue de los pasos vivos, que van en navy. */
.suitewait__step:not(.is-done):not(.is-now) .suitewait__stxt b { color: var(--ink-mute); }
/* La cinta que corre bajo el paso en curso: se ve que algo está pasando */
.suitewait__step.is-now .suitewait__stxt::after {
  content: ''; display: block; height: 4px; width: min(240px, 70%); margin-top: 9px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tape-red) 0 38%, rgba(213,25,27,0.16) 38% 100%);
  background-size: 260% 100%; animation: sw-run 2s linear infinite;
}
@keyframes sw-run { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* El mensaje que el equipo le deja mientras gestiona su casillero. Es lo
   único escrito a mano para él en esta tarjeta, así que va como pegatina:
   borde navy entero y sombra dura, en vez del borde izquierdo rojo de antes
   (DESIGN.md §9). Navy sobre blanco, 16.27:1. */
.suitewait__note {
  margin: 0; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: var(--brand-navy);
  background: var(--white); border: 1.5px solid var(--brand-navy); border-radius: var(--r-sm);
  box-shadow: var(--shadow-hard-sm);
}
.suitewait__eta { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-mute); }
.suitewait__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.suitewait__acts .btn svg { width: 16px; height: 16px; }
.suitewait__mientras { margin: 0; font-size: 13px; color: var(--ink-mute); }
.suitewait.is-flash { animation: sw-flash 1.5s var(--ease); }
@keyframes sw-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,26,24,0); } 30% { box-shadow: 0 0 0 5px rgba(245,26,24,0.22); } }
.suitewait--reg { margin: 0 0 16px; }

/* «En trámite» donde antes iba la suite */
.suite-pend { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--brand-navy); }
/* Sobre kraft hasta el rojo de texto se queda en 3.8:1, así que la palabra va
   en navy y el punto rojo hace de señal de «en curso». */
.suite-pend::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); margin-right: 6px; vertical-align: 1px; }

/* Pre-alertar sin dirección no lleva a ninguna parte: se atenúa, pero sigue
   respondiendo para poder explicar por qué (nunca un botón mudo). */
[data-open-prealert].is-locked { opacity: 0.5; }
[data-open-prealert].is-locked:hover { opacity: 0.62; }

/* ── Llegó el casillero mientras el cliente miraba: se estampa ── */
.addr.is-suite-new { animation: addr-land 0.7s var(--ease) both; }
.addr.is-suite-new .addr__postmark { animation: stamp-slam 0.5s 0.16s var(--ease) both; }
.addr.is-suite-new .addr__suite .sticker { animation: sticker-pop 0.5s 0.34s var(--ease) both; }
@keyframes addr-land { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes stamp-slam { 0% { opacity: 0; transform: scale(2.4); } 62% { opacity: 1; transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes sticker-pop { 0% { transform: scale(0.6); opacity: 0; } 62% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ANIMACIONES v11 · área de cliente                                    ║
   ║  Nada decorativo porque sí: cada movimiento dice qué pasó o dónde      ║
   ║  mirar. Todo se apaga con prefers-reduced-motion.                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · Las tarjetas del casillero entran escalonadas, como hojas que caen */
  .view.is-active > .kraft-card,
  .view.is-active > .card,
  .view.is-active > .grid-cards > * { animation: cardIn 0.52s var(--ease) both; }
  .view.is-active > .grid-cards > *:nth-child(2) { animation-delay: 0.07s; }
  .view.is-active > .grid-cards > *:nth-child(3) { animation-delay: 0.14s; }
  .view.is-active > .grid-cards > *:nth-child(4) { animation-delay: 0.21s; }

  /* 2 · El matasellos de la dirección gira al pasar por encima */
  .addr__postmark { transition: transform 0.55s var(--ease); }
  .addr:hover .addr__postmark { transform: rotate(-7deg) scale(1.05); }

  /* 3 · Copiar: el botón da el golpe de sello */
  .addr__copy.is-copied { animation: copy-pop 0.45s var(--ease); }

  /* 4 · El check de «Empieza aquí» se estampa cuando el paso se cumple */
  .start__step.is-done .start__num svg { animation: check-in 0.42s var(--ease) both; }

  /* 5 · Filas de paquetes: se levantan al tocarlas */
  .prow { transition: transform 0.22s var(--ease), background 0.22s var(--ease); border-radius: var(--r-sm); }

  /* 6 · La caja en tránsito respira: es el único estado que sigue cambiando */
  .badge-status--transit::before { animation: bs-blink 1.7s var(--ease) infinite; }

  /* 7 · El icono activo de la barra inferior salta al cambiar de vista */
  .app__mobnav a.is-active svg { animation: nav-pop 0.42s var(--ease); }

  /* 8 · Tu inicial en la cabecera saluda */
  .app__avatar--head { transition: transform 0.35s var(--ease); }
  .app__avatar--head:hover { transform: rotate(-7deg) scale(1.07); }
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) rotate(-0.3deg); } to { opacity: 1; transform: none; } }
@keyframes copy-pop { 0% { transform: scale(1); } 42% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes check-in { from { opacity: 0; transform: scale(0.4) rotate(-28deg); } to { opacity: 1; transform: none; } }
@keyframes bs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes nav-pop { 0% { transform: scale(0.72); } 58% { transform: scale(1.16); } 100% { transform: scale(1); } }

.addr__row { border-radius: 8px; transition: background 0.2s var(--ease); }
@media (hover: hover) {
  .addr__row:hover { background: rgba(8,29,76,0.05); }
  .prow:hover { background: rgba(8,29,76,0.035); transform: translateX(3px); }
}

@media (max-width: 760px) {
  .suitewait__head { gap: 10px; }
  .suitewait__boxy { width: 84px; }
  .suitewait__acts .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .suitewait__pulse::after, .suitewait__step.is-now .suitewait__stxt::after { animation: none; }
  .addr.is-suite-new, .addr.is-suite-new .addr__postmark, .addr.is-suite-new .addr__suite .sticker { animation: none; }
}

/* ── Ficha del cliente: lo que falta, dicho con nombre y apellido ── */
.suitewait__falta { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.suitewait__falta li {
  position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--brand-navy);
}
.suitewait__falta li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 2px;
  border: 1.5px solid var(--brand-red); background: var(--white);
}
.suitewait__go { margin-top: 12px; }
.suitewait__step.is-done .suitewait__falta,
.suitewait__step.is-done .suitewait__go { display: none; }

/* Lo que falta de la ficha, en la nota de cartón de la casa (.whatsnext) y
   no con un borde izquierdo rojo (DESIGN.md §9). El rojo sigue en los puntos
   de la lista. Sobre --kraft-2: el título navy 12.46:1, la lista 6.98:1. */
.pf-ficha {
  margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--kraft-2); border: 1.5px dashed var(--kraft-line);
}
.pf-ficha[hidden] { display: none; }
.pf-ficha b { display: block; font-size: 14px; color: var(--brand-navy); margin-bottom: 6px; }
.pf-ficha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pf-ficha li { position: relative; padding-left: 16px; font-size: 13px; color: var(--ink-soft); }
.pf-ficha li::before { content: '·'; position: absolute; left: 5px; color: var(--brand-red); font-weight: 700; }

/* ── Barra inferior del casillero: cinco columnas iguales ──────────────
   Era flex + space-around, así que el ancho de cada botón dependía del
   largo de su palabra («Casillero» 81 px contra «Más» 46 px): la fila se
   corría a la derecha y el botón rojo quedaba 24 px fuera del centro.
   Encima el círculo, más alto que el resto, estiraba la barra a 104 px y
   dejaba su etiqueta 16 px por debajo de las demás.
   Ahora cada destino ocupa exactamente 1/5 y el círculo sobresale con un
   margen negativo, sin alterar el alto de la fila. */
@media (max-width: 860px) {
  .app__mobnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .app__mobnav a, .app__mobnav button {
    width: 100%; min-width: 0;
    justify-content: flex-end;
    gap: 3px; padding: 4px 2px;
    text-align: center;
  }
  .app__mobnav a > span:not(.app__mobnav__ctaBtn),
  .app__mobnav button > span {
    display: block; width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .app__mobnav__cta { top: 0; }
  .app__mobnav__ctaBtn { margin-top: -22px; flex: none; }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 480px) {
  .app__mobnav__ctaBtn { width: 44px; height: 44px; margin-top: -16px; }
}
/* «Pre-alertar» no cabe en 1/5 de un teléfono chico: esa etiqueta va un
   punto más pequeña en vez de cortarse con puntos suspensivos. */
@media (max-width: 860px) {
  .app__mobnav__cta > span:last-child { font-size: 8.8px; letter-spacing: 0.02em; }
}

/* ── «USPS dice entregado y no aparece»: el paso que falta, explicado ── */
/* Nota en cartón, como .whatsnext: explica un paso, no es una alarma. Antes
   llevaba un borde izquierdo rojo de 3 px (DESIGN.md §9 los prohíbe) sobre
   un rosa. Contraste sobre --kraft-2: navy 12.46:1, --ink-soft 6.98:1,
   --ink-mute 5.20:1. */
.usnote {
  display: grid; gap: 6px; margin: 14px 0 0; padding: 13px 15px;
  background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); border-radius: var(--r-sm);
}
.usnote b { font-size: 14px; color: var(--brand-navy); }
.usnote p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
/* Con dos clases gana a `.usnote p` sin el !important de antes. */
.usnote .usnote__wait { font-size: 12.5px; color: var(--ink-mute); }

/* ── Ficha a medias con casillero ya asignado ──────────────────────────
   No es un adorno: sin esos datos la caja no pasa aduana ni se puede
   entregar, así que el aviso va arriba del todo y no se puede ignorar. */
.fichaviso {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap;
  margin: 0 0 clamp(16px, 2vw, 22px); padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
  background: var(--white); border: 2px solid var(--brand-red);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--brand-red);
}
.fichaviso[hidden] { display: none; }
.fichaviso__txt { flex: 1 1 280px; min-width: 0; }
.fichaviso__txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.9vw, 19px); color: var(--brand-navy); }
.fichaviso__txt p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.fichaviso ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fichaviso li { position: relative; padding-left: 16px; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.fichaviso li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 2px;
  border: 1.5px solid var(--brand-red); background: var(--white);
}
.fichaviso .btn { flex: 0 0 auto; }
@media (max-width: 620px) { .fichaviso .btn { flex: 1 1 100%; justify-content: center; } }

/* ── Interruptor de avisos (correo) ── */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  width: 50px; height: 28px; border-radius: 999px; flex: none; position: relative;
  background: rgba(8,29,76,0.22); border: 2px solid var(--brand-navy);
  transition: background 0.22s var(--ease);
}
.switch__dot {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream-2); box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 0.22s var(--ease);
}
.switch input:checked + .switch__track { background: var(--ok-fill); }
.switch input:checked + .switch__track .switch__dot { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.switch__lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) { .switch__track, .switch__dot { transition: none; } }

/* ╔════════ VISTAS DEL PANEL · dos columnas ════════╗
   Medido en 1.500 px: Rastrear era una tarjeta de 680 px arriba a la
   izquierda con el 70 % de la pantalla en blanco, y Mi perfil una columna
   estrecha con un formulario de 900 px de alto. Al lado de lo principal va
   algo que sirve en ESA vista — no relleno. */
.vista { display: grid; gap: clamp(16px, 2vw, 26px); align-items: start; }
.vista__main, .vista__lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .vista { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr); }
  .vista__lado { position: sticky; top: 24px; }
}

/* ── Nota de ayuda al margen ── */
.nota__t { font-family: var(--font-display); font-weight: 700; font-size: 16px;
           line-height: 1.28; letter-spacing: -.015em; margin: 0 0 8px; color: var(--brand-navy); }
.nota p { margin: 0 0 9px; font-size: 14px; line-height: 1.58; color: var(--ink-soft); }
.nota p:last-of-type { margin-bottom: 12px; }
/* El consejo que se destaca dentro de la nota: la nota de cartón de la casa
   (.whatsnext), no una raya a la izquierda (DESIGN.md §9). La nota es una
   .card sobre --cream-2; dentro, --ink-soft sobre --kraft-2 da 6.98:1. */
.nota__p { background: var(--kraft-2); border: 1.5px dashed var(--kraft-line); border-radius: var(--r-sm); padding: 9px 12px; }
/* «prealerta@tucajadeusa.com» es una sola palabra más ancha que la columna:
   se salía de la tarjeta y la «m» quedaba cortada («….con»). Se parte. */
.nota__p b { overflow-wrap: anywhere; }

/* ── Resumen de cajas ── */
.resumen__t { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 10px; color: var(--brand-navy); }
.resumen__l { margin: 0; display: grid; gap: 0; }
.resumen__f { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
              padding: 9px 0; border-top: 1px dashed rgba(8, 29, 76, 0.18); }
.resumen__f:first-child { border-top: 0; }
.resumen__k { font-size: 13.5px; color: var(--ink-mute); }
.resumen__v { font-family: var(--font-display); font-weight: 700; font-size: 16px;
              color: var(--brand-navy); font-variant-numeric: tabular-nums; text-align: right; }
.resumen__v small { display: block; font-family: var(--font-mono); font-size: 10px;
                    font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ── Rastrear: tus propios envíos, sin escribir nada ── */
.tuyos { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(8, 29, 76, 0.2); }
.tuyos[hidden] { display: none !important; }
.tuyos__lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.tuyos__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.tuyo {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: 999px; border: 1.5px solid var(--brand-navy); background: var(--cream-2);
  font: inherit; font-size: 13.5px; color: var(--brand-navy); cursor: pointer;
  transition: background .14s ease;
}
.tuyo:hover { background: var(--kraft); }
.tuyo:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; }
.tuyo b { font-weight: 700; }
.tuyo span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }

/* ── Mi perfil: el formulario en dos columnas ──
   En una sola medía 900 px de alto y había que bajar hasta el final para
   llegar al botón de guardar. */
@media (min-width: 1100px) {
  /* La columna de al lado casi siempre está vacía (la tarjeta de contraseña
     solo sale con sesión de correo), así que el formulario se queda con el
     ancho que necesita en vez de con la mitad exacta. */
  .pf-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr); }
  .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
  /* Lo que no se parte en dos: el selector de entrega son dos botones anchos,
     el aviso de ficha ocupa línea entera y el botón de guardar no se esconde
     en media columna. */
  .pf-fields > .field:has(.segmented),
  .pf-fields > .field:has(#pfCity),
  .pf-fields > .pf-acts,
  .pf-fields > .form-help,
  .pf-fields > .field--full { grid-column: 1 / -1; }
  .pf-fields > button[type="submit"], .pf-fields > .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── Compra asistida: el texto no corre 1.200 px ──
   La tarjeta llena el ancho, que está bien, pero una línea de 1.200 px no se
   lee: el ojo pierde el renglón al volver. El formulario sí aprovecha el
   ancho; el texto se queda en su medida. */
.view[data-view="compra"] .card > p,
.view[data-view="compra"] .card__title + p { max-width: 68ch; }

/* ── El campo del código de 6 dígitos ──────────────────────────────────────
   Un solo input, no seis cajitas: seis cajitas se ven mejor pero rompen el
   autorrelleno del código en iOS y en Android, que es justo lo que le ahorra
   el trabajo al cliente. Así que es un input normal vestido de seis dígitos. */
.otp-code {
  font-family: var(--font-mono);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;   /* compensa el espacio que letter-spacing mete detrás del último dígito */
  text-align: center;
  padding-block: 16px;
  font-variant-numeric: tabular-nums;
}
.otp-code::placeholder { letter-spacing: 0.3em; opacity: 0.35; }

/* ── La pantalla del segundo factor ────────────────────────────────────────
   Tapa el casillero entero hasta que el cliente ponga el código. No es un
   diálogo que se pueda cerrar: la única salida sin el código es cerrar sesión,
   y está abajo, en pequeño, porque no es lo que se quiere que haga. */
.dosf {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 21, 58, 0.96);
  background-image: radial-gradient(circle 1px at 22% 28%, rgba(245,238,225,0.2) 50%, transparent 51%),
                    radial-gradient(circle 1.4px at 72% 64%, rgba(245,238,225,0.15) 50%, transparent 51%);
  background-size: 92px 92px, 128px 128px;
  overflow-y: auto;
}
.dosf__caja {
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 4vw, 34px);
  background: var(--cream-2);
  border: 2.5px solid var(--brand-navy);
  border-radius: var(--r-md);
  box-shadow: 10px 10px 0 var(--brand-red);
}
.dosf__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); line-height: 1.08; letter-spacing: -0.025em; color: var(--brand-navy); }
.dosf__l { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.dosf__l b { color: var(--brand-navy); font-family: var(--font-mono); font-size: 13.5px; }
.dosf__err:empty { display: none; }
.dosf__err { margin: -4px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--red-text); }
.dosf__rec { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.dosf__rec input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand-navy); }
.dosf__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.dosf__salir { color: var(--ink-mute); }
.dosf__salir:hover { color: var(--red-text); }

/* ── «Dónde has entrado»: los navegadores de confianza ── */
.disp { list-style: none; display: flex; flex-direction: column; margin: 14px 0 12px; padding: 0; }
.disp__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--paper-line-2); }
.disp__item:last-child { border-bottom: 0; }
.disp__txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.disp__txt b { font-size: 15px; color: var(--brand-navy); }
.disp__este { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); background: var(--brand-navy); padding: 2px 7px; border-radius: 999px; }
.disp__cuando { flex-basis: 100%; font-size: 13px; color: var(--ink-mute); }
.disp__quitar { flex: none; color: var(--red-text); }
.disp__vacio { padding: 12px 0; font-size: 14px; color: var(--ink-mute); }

/* ══════════════════════════════════════════════════════════════════════════
   LÍNEA DE TIEMPO DEL RASTREO · v10 «el precinto que baja»
   ══════════════════════════════════════════════════════════════════════════
   Marc, sobre la versión anterior: «No puedes mejorar la animacion?».

   No es que la animación fuera mala: no había ninguna. El conector era UNA
   cinta absoluta (.ribbon--rail-v, 14 px de ancho) con «TCDU · MIAMI →
   VENEZUELA ·» escrito en vertical a 8.5 px, y los matasellos de 48 px, con
   fondo crema y border-radius 50 %, se le montaban encima. Medido en el
   navegador: de 217 px de riel solo se veían trozos de 22 a 29 px entre
   círculo y círculo, y `getComputedStyle(.ribbon__track).animation` daba
   'none'. La pieza gastaba su elemento más visible en ruido rojo.

   Ahora el conector lo dibuja cada paso y cuenta tres cosas sin leer una
   letra: dónde estuvo la caja (cinta roja sólida), dónde está (donde la cinta
   se corta, junto al único sello navy) y qué le falta (línea fina).

   Y el movimiento no decora: es la cinta pegándose hasta donde llegó la caja,
   que es literalmente el dato. Lo que «viaja por el riel» es el extremo de la
   cinta; por eso no hace falta ponerle un muñeco encima.

   NO toca .ribbon--rail-v, así que la portada (.how__rail en #como) y el
   tracker público de rastrear.html (.postmark-row--stack) se quedan igual.
   Todo esto cuelga de .track-time / .track-step, que solo los genera
   stepsEl() en app-dash.js. */

.track-time{
  --mark: 48px;                        /* diámetro del matasellos; la rejilla del paso ya es 48px 1fr */
  --rail-w: calc(var(--mark) * 0.21);  /* 10.1 px con sello de 48, 8.4 px con sello de 40: escala sola */
  --rail-cx: calc(var(--mark) / 2);    /* eje del riel = centro del sello. Nombre propio a posta:
                                          --rail-x es el token global de .ribbon--rail-v y no se pisa */
  --tape-run: .30s;                    /* lo que tarda un tramo de cinta en pegarse */
  --tape-step: .11s;                   /* retraso entre un tramo y el siguiente */
  /* El corte de la cinta: recta hasta 7 px del final y ahí un tajo en diagonal */
  --tape-cut:
    linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat,
    linear-gradient(118deg, #000 44%, transparent 45%) bottom / 100% 7px no-repeat;
}
.track-time.ship__tracker{ --mark: 40px; }   /* envíos a Venezuela: 5 pasos, sello de 40 px */

/* El riel viejo se esconde en vez de confiar en que el JS ya no lo monte: así
   la hoja arregla la pieza aunque el navegador sirva app-dash.js cacheado. */

/* El matasellos tapa la cinta. Hoy lo haría igual por accidente, porque
   .postmark lleva `rotate` y eso le crea contexto de apilado; queda dicho en
   voz alta para que no dependa de ese detalle. */
.track-step .postmark{ position: relative; z-index: 1; }

/* ── El conector: un tramo por paso ──────────────────────────────────────
   Arranca en el centro de su propio sello (mark/2) y termina mark/2 POR DEBAJO
   del borde del paso, que es justo el centro del sello siguiente. El largo lo
   pone la caja del paso, así que cae clavado aunque el subtítulo crezca a tres
   líneas, cambie la fuente o gire el teléfono. Un riel único relleno por
   porcentaje no aguanta eso. */
.track-step::before{
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: var(--rail-cx); translate: -50% 0;
  top: calc(var(--mark) / 2);
  bottom: calc(var(--mark) / -2);
  width: 3px; border-radius: 2px;
  background-color: rgba(8, 29, 76, 0.30);   /* lo que falta */
}
.track-step:last-child::before{ display: none; }   /* el último no lleva a ningún lado */

/* ── Lo cumplido: cinta roja de verdad, con su pliegue duro ───────────── */
.track-step.is-done::before{
  width: var(--rail-w); border-radius: 0;
  background-color: var(--tape-red);
  box-shadow: 2px 0 0 var(--brand-red-2);    /* el pliegue: sombra dura, como el resto del sitio */
  transform-origin: 50% 0;
  animation: tcdu-tape var(--tape-run) var(--ease) both;
  animation-delay: calc(var(--i, 0) * var(--tape-step));
}
@keyframes tcdu-tape{ from{ scale: 1 0; } to{ scale: 1 1; } }

/* ── Dónde se paró: el último tramo cumplido se corta 5 px antes del sello
   vivo, con el tajo en diagonal de una cinta arrancada a mano. ─────────── */
.track-step.is-done.is-edge::before{
  bottom: 5px;
  -webkit-mask: var(--tape-cut);
          mask: var(--tape-cut);
}
/* Lo mismo sin depender del JS nuevo. En regla APARTE a posta: si un navegador
   no entiende :has(), tira la regla entera, y si estuviera en la lista de
   arriba se llevaría por delante también la de .is-edge. */
.track-step.is-done:has(+ .track-step.is-active)::before{
  bottom: 5px;
  -webkit-mask: var(--tape-cut);
          mask: var(--tape-cut);
}

/* ── La llegada: el sello vivo da un golpe justo cuando la cinta lo alcanza.
   El tramo de arriba (i-1) acaba en (i-1)*0.11 + 0.30 = i*0.11 + 0.19, así que
   el retraso no está puesto a ojo: es esa cuenta. ────────────────────────── */
.track-step.is-active .postmark{
  animation: tcdu-thump .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * var(--tape-step) + .19s);
}
@keyframes tcdu-thump{ 0%{ scale: 1; } 40%{ scale: 1.08; } 100%{ scale: 1; } }

/* ── El único bucle de toda la pieza: el anillo de puntos del sello vivo gira
   despacio, 18 s por vuelta. Dice «esto está pasando ahora» sin parpadear, sin
   cambiar de tamaño y sin pedir la vista. Los demás sellos no se mueven. ─── */
.track-step.is-active .postmark__ring--in{
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: tcdu-seal 18s linear infinite;
  animation-delay: calc(var(--i, 0) * var(--tape-step) + .6s);
}
@keyframes tcdu-seal{ to{ rotate: 360deg; } }

/* ── Movimiento reducido: todo quieto y no se pierde ni un dato, porque el
   estado final de las tres animaciones ES el valor por defecto de cada
   propiedad. La cinta aparece ya pegada entera, el corte en diagonal sigue
   ahí y el sello vivo sigue siendo el único navy. ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .track-step.is-done::before,
  .track-step.is-active .postmark,
  .track-step.is-active .postmark__ring--in{ animation: none; }
}

/* ── Y un fallo de contraste que salió al medir esto, y que ya estaba en
   producción: «02», «03» y «04» se pintan con --postmark-color, que en el paso
   pendiente es rgba(8,29,76,0.3). A 13.6 px eso son 1.89:1 sobre el papel del
   detalle, y el texto normal necesita 4.5:1. El ANILLO puede seguir apagado
   —es dibujo, le basta 3:1—, pero el número es texto. Esto lo deja en 5.44:1
   sin tocar nada del dibujo. ────────────────────────────────────────────── */
.track-step .postmark__center{ fill: var(--ink-mute); }
.track-step.is-done .postmark__center,
.track-step.is-active .postmark__center{ fill: currentColor; }

/* ══════════════════════════════════════════════════════════════════════════
   EL BOXY DEL ESTADO · va encima de la línea de tiempo
   Lo monta stepsEl() en app-dash.js, que es el mismo sitio donde se deciden
   los pasos. El dibujo sale de boxyDeEstado(): avión si va por aire, barco si
   va por mar, moto si está en reparto, sentado si está retenida. No es un
   adorno fijo, es el dato en dibujo.
   ══════════════════════════════════════════════════════════════════════════ */

.track-block{ position: relative; }

/* A la derecha y pisando un poco la línea de tiempo, para que se lea como
   parte de ella y no como una figura suelta encima. No recibe puntero: es un
   dibujo, no un control, y no debe robar un clic ni un foco. */
.track-estado{
  display: flex; justify-content: flex-end; align-items: flex-end;
  margin: 2px 2px -12px 0;
  pointer-events: none;
}

/* El tamaño lo manda la ALTURA, no el ancho. Los tres nuevos tienen formatos
   muy distintos (380x732 el sentado, 380x370 la moto), y fijando el ancho el
   sentado saldría el doble de alto que los demás. Por altura, todos ocupan
   lo mismo pase lo que pase con el dibujo. */
.track-estado__boxy.boxyanim{ width: auto; height: clamp(58px, 9vw, 78px); }
.boxyanim.track-estado__boxy > img,
.boxyanim.track-estado__boxy > video{ width: auto; height: 100%; }

/* En pantalla estrecha se encoge, que es donde compite con el texto del paso. */
@media (max-width: 420px){
  .track-estado{ margin-bottom: -8px; }
  .track-estado__boxy.boxyanim{ height: 52px; }
}

/* ══════════════════════════════════════════════════════════════════════
   TRAMO ESTADOS UNIDOS · las tres preguntas, dentro de su sello   (.usq)
   ══════════════════════════════════════════════════════════════════════
   Va al final de assets/app-auth.css, junto a .usnote.

   Y HAY QUE BORRAR el bloque viejo, que NO está en app-auth.css: .usloge*
   vive en assets/app.css:2377-2389, con su espejo en
   odoo/tucajadeusa/static/site/assets/app.css. Esas trece líneas quedan
   muertas al borrar historialUS(). (En tucajaenusa-cpanel/assets/app.css no
   existe: esa copia ya está desfasada y allí no hay nada que borrar.)

   FONDO REAL sobre el que está medido todo: .prow__detail pinta
   rgba(8,29,76,0.035) sobre --cream-2 #FBF6EC, o sea #F2EEE6 compuesto (el
   mismo valor que app-auth.css:255 ya escribe a mano).

   Contraste calculado con la fórmula WCAG 2.x, no a ojo:
     navy #081D4C sobre #F2EEE6 ............. 14,06:1   titulares y estados
     --ink-mute rgba(8,29,76,.68) ...........  5,44:1   kickers, horas, lugares,
                                                        pies y el texto del vacío
     --ink-soft sobre el fondo de la costura   7,41:1
     --red-text #C41311 sobre #F2EEE6 .......  5,26:1   sumario del historial
     --cream #F5EEE1 sobre --brand-navy ..... 14,10:1   el sello
     cream .82 sobre navy ...................  9,76:1   «viaje 1 de 2»
     navy sobre blanco ...................... 16,27:1   dentro del aviso
     --red-text sobre blanco ................  6,09:1   kicker del aviso
   Gráficos (1.4.11 pide 3:1):
     borde del aviso y de la tarjeta, navy .. 14,06:1
     línea del encabezado de día, navy .5 ...  3,16:1
   Del riel viejo no queda nada: ordenaba la lista con una línea de 1,38:1 y
   puntos de 1,89:1, por debajo del mínimo. Ahora lo que ordena la lista son
   encabezados de día, que son texto.

   Sin degradados, sin píldoras, sin emojis, sin border-left de color como
   acento (DESIGN.md §9): el aviso es un sticker con borde entero y sombra
   dura, que es el lenguaje de la casa. */

.usq {
  margin-top: 18px;
  border: 2px solid var(--brand-navy);
  border-radius: var(--r-md);
  background: var(--cream-2);
  box-shadow: 3px 3px 0 var(--brand-navy);
  overflow: hidden;
}

/* ── El sello: de quién es todo lo que viene y de qué viaje habla ── */
.usq__head {
  background: var(--brand-navy); color: var(--cream);
  padding: 9px 13px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
}
.usq__quien {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.usq__viaje {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245, 238, 225, 0.82);
}

/* El cuerpo: cada respuesta separada por aire, no por rayas. */
.usq > .usq__a,
.usq > .usq__aviso,
.usq > .usq__hist,
.usq > .usq__none { margin: 14px 13px; }
.usq > .usq__a + .usq__a { margin-top: 16px; }

/* ── Una respuesta: pregunta pequeña arriba, respuesta grande debajo ── */
.usq__a { display: flex; flex-direction: column; gap: 4px; }
.usq__k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.usq__big {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 4.4vw, 18px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--brand-navy); max-width: 30ch;
}
.usq__txt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.usq__txt b { font-weight: 700; color: var(--brand-navy); }
.usq__pie { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-mute); max-width: 46ch; }
.usq__fuente {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ── El aviso: sticker blanco con borde navy y sombra dura ──
   La sombra dice si corre; el borde no cambia de color, porque un recuadro
   rojo entero a las tres de la mañana asusta más de lo que informa. */
.usq__aviso {
  background: var(--white); border: 2px solid var(--brand-navy);
  border-radius: var(--r-sm); box-shadow: 3px 3px 0 rgba(8, 29, 76, 0.22);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.usq__aviso--urge { box-shadow: 3px 3px 0 var(--brand-red-2); }
.usq__aviso .usq__k { color: var(--red-text); }
.usq__wa { align-self: flex-start; margin-top: 2px; }

/* ── El historial, plegado ──
   El mismo patrón de <details> que ya usan .track-hist y .addr__example.
   OJO CON LA ESPECIFICIDAD: app-auth.css:763 tiene `.app details > summary`
   (0-1-2) con display:flex, gap, min-height y padding. Una regla
   `.usq__hist > summary` (0-1-1) PIERDE contra ella y el gap declarado no se
   aplicaría nunca. Por eso aquí va con `.app` delante (0-2-1). */
.usq__hist { border-top: 1px dashed rgba(8, 29, 76, 0.22); padding-top: 2px; }
.app .usq__hist > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-text);
}
/* El triangulito nativo se apaga porque display:flex ya lo descoloca; en su
   lugar va un + / − que se ve igual en todos los navegadores. */
.usq__hist > summary::-webkit-details-marker { display: none; }
.usq__hist > summary::after { content: '+'; font-size: 17px; line-height: 1; flex: none; }
.usq__hist[open] > summary::after { content: '\2212'; }
.usq__hist > summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 6px; }

.usq__dias { padding-bottom: 4px; }
.usq__dia { margin-top: 12px; }
/* El encabezado de día es lo único gráfico que agrupa la lista: por eso su
   línea va a rgba(8,29,76,.5) = 3,16:1, por encima del 3:1 de 1.4.11. */
.usq__fecha {
  margin: 0 0 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid rgba(8, 29, 76, 0.5); padding-bottom: 4px;
}
.usq__ev { list-style: none; margin: 0; padding: 0; }
/* La hora va en su propia columna porque la fecha ya la dice el encabezado:
   así cada renglón deja de gastar media pantalla repitiendo «10 sep». */
.usq__it {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 1px 10px;
  padding: 7px 0; border-bottom: 1px solid rgba(8, 29, 76, 0.08);
}
.usq__it:last-child { border-bottom: 0; }
.usq__h {
  grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); padding-top: 2px; white-space: nowrap;
}
/* El texto del transportista viene en inglés y puede traer una palabra de
   treinta caracteres: que rompa donde sea antes que abrir scroll horizontal. */
.usq__s { font-size: 14px; line-height: 1.4; color: var(--brand-navy); overflow-wrap: anywhere; }
.usq__loc { font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); overflow-wrap: anywhere; }
.usq__nota { margin: 12px 0 2px; font-size: 12px; line-height: 1.45; color: var(--ink-mute); max-width: 46ch; }

.usq__none { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-mute); max-width: 62ch; }
.usq__none b { color: var(--brand-navy); }

/* ── La costura: dónde termina el trabajo del transportista ── */
.usq__cut {
  margin: 0; padding: 11px 13px 13px;
  background: rgba(8, 29, 76, 0.05);
  border-top: 2px dashed rgba(8, 29, 76, 0.5);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}
.usq__cut b { color: var(--brand-navy); font-weight: 700; }

/* 375 px es el caso normal, no el raro: se aprieta el acolchado, nunca el
   tamaño del texto, y el botón de WhatsApp pasa a ancho completo. */
@media (max-width: 400px) {
  .usq > .usq__a, .usq > .usq__aviso, .usq > .usq__hist, .usq > .usq__none { margin-left: 11px; margin-right: 11px; }
  .usq__head, .usq__cut { padding-left: 11px; padding-right: 11px; }
  .usq__aviso { padding: 11px 12px; }
  .usq__wa { align-self: stretch; width: 100%; justify-content: center; text-align: center; }
}

/* En pantalla ancha el lugar se va a una tercera columna en vez de a otro
   renglón. .usloge no tiene ni una media query: a 1280 px se ve igual que en
   un teléfono y cada movimiento sigue ocupando tres líneas. */
@media (min-width: 720px) {
  .usq > .usq__a, .usq > .usq__aviso, .usq > .usq__hist, .usq > .usq__none { margin-left: 16px; margin-right: 16px; }
  .usq__head, .usq__cut { padding-left: 16px; padding-right: 16px; }
  .usq__it { grid-template-columns: 64px minmax(0, 1fr) 210px; }
  .usq__h { grid-row: auto; }
  .usq__loc { grid-column: 3; grid-row: 1; text-align: right; }
}

/* Sin bloque de prefers-reduced-motion: aquí no se anima nada. El <details>
   abre y cierra con el comportamiento nativo del navegador. */

/* ══════════════════════════════════════════════════════════════════════
   VISTA «MIS PAGOS»
   Antes la deuda era un total al margen de «Mis envíos». Aquí tiene sitio
   propio: arriba cuánto se debe, debajo cada cobro con su envío, su plazo
   y en qué va, y al lado los datos para pagar.
   ══════════════════════════════════════════════════════════════════════ */
.pagos-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.pagos-main, .pagos-side { display: flex; flex-direction: column; gap: 16px; }

/* ── Cuánto debes, de una ── */
.deuda {
  background-color: var(--brand-navy); color: var(--cream);
  border: 2px solid var(--brand-navy); border-radius: var(--r-lg);
  box-shadow: 4px 4px 0 var(--brand-red); padding: 24px;
}
.deuda__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(245,238,225,0.72);
}
.deuda__amount {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(38px, 7vw, 54px); line-height: 1.02; color: var(--orange-hot);
  margin: 6px 0 0; font-variant-numeric: tabular-nums;
}
.deuda__bs { font-family: var(--font-mono); font-size: 12px; color: rgba(245,238,225,0.6); }
.deuda__bs:empty { display: none; }
.deuda__meta { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(245,238,225,0.82); }

/* ── Cada cobro ── */
#cobrosList { display: flex; flex-direction: column; gap: 12px; }
.cobro {
  border: 1px solid var(--paper-line); border-radius: var(--r-md); background: var(--white);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
/* El estado lo dice la pegatina de arriba a la derecha (.badge-status), con
   palabra y color. Aquí había además un borde izquierdo de 4 px por estado:
   un acento lateral de los que prohíbe DESIGN.md §9, y un segundo código de
   color que decía lo mismo. El vencido conserva su fondo apagado. */
.cobro--vencido    { background: var(--cream-2); }

.cobro__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cobro__que { min-width: 0; }
.cobro__concepto {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3;
}
.cobro__ref {
  margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.cobro__ref:empty { display: none; }
.cobro__top .badge-status { flex: none; }

.cobro__cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cobro__cifra b {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cobro__bs { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); }
.cobro__plazo {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red-text); margin-left: auto;
}
.cobro__pagar { align-self: flex-start; }

.cobro__nota {
  border-top: 1px dashed var(--paper-line); padding-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.cobro__nota b { font-size: 13.5px; color: var(--ink); }
.cobro__nota p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.cobro__falta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--red-text); }

/* El comprobante ya guardado. Sin href todavía no es enlace: mientras la
   dirección se firma, un toque no puede mandar al cliente a ningún sitio. */
.cobro__comp {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--red-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.cobro__comp svg { width: 16px; height: 16px; flex: none; }
.cobro__comp.is-cargando { color: var(--ink-mute); text-decoration: none; cursor: progress; }

.cobro__none { text-align: center; padding: 22px 8px; }
.cobro__none b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.cobro__none p { margin: 6px auto 0; max-width: 40ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); }

/* ── El recordatorio que queda en «Mis envíos» ── */
.paymini {
  display: grid; gap: 2px; text-decoration: none;
  background-color: var(--brand-navy); color: var(--cream);
  border: 2px solid var(--brand-navy); box-shadow: 4px 4px 0 var(--brand-red);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.paymini[hidden] { display: none; }
.paymini:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--brand-red); }
.paymini:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.paymini__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(245,238,225,0.72);
}
.paymini__amount {
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  letter-spacing: -0.03em; color: var(--orange-hot); font-variant-numeric: tabular-nums;
}
.paymini__meta { font-size: 13px; color: rgba(245,238,225,0.82); }
.paymini__go {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream);
}
.paymini__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.paymini:hover .paymini__go svg { transform: translateX(3px); transition: transform 0.18s var(--ease); }

/* ── El número de cobros por pagar, junto a «Mis pagos» en el menú ── */
/* El rojo de la marca deja el blanco en 4.16:1 y esto es texto de 10,5 px:
   --brand-red-2 lo sube a 5.56:1 sin salirse de la paleta. */
.app__nav-tag {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--r-sm);
  background: var(--brand-red-2); color: var(--white);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  line-height: 18px; text-align: center;
}
.app__nav-tag[hidden] { display: none; }

/* ── Qué cobro se está reportando ── */
/* Va en la tarjeta navy (.pay): el mismo recuadro de puntos crema que
   .pay__pending, en vez de una raya roja a la izquierda (DESIGN.md §9).
   Crema al 82 % sobre navy, 9.76:1. */
.pay__deque {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(245,238,225,0.82);
  border: 1px dashed rgba(245,238,225,0.35); border-radius: var(--r-sm); padding: 8px 12px; line-height: 1.5;
}
.pay__deque:empty { display: none; }

/* Teléfono y cédula van en una fila de dos; con Zelle o Binance el teléfono
   se esconde y la cédula se quedaba sola a media fila, con su «opcional»
   partido en dos líneas. Sola, ocupa la fila entera. */
.pay__form .field-row:has(> .field[hidden]) > .field:not([hidden]) { grid-column: 1 / -1; }

/* ── Lo opcional del reporte ──
   El comprobante siempre; la cédula cuando no se paga con bolívares
   (ajustarFormulario, app-dash.js). La misma marca para los dos, en vez de
   un «(opcional)» escrito dentro de la etiqueta. */
.pay__opt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(245,238,225,0.6); margin-left: 6px;
}

/* ── Subir el comprobante ── */
.payfile__input {
  width: 100%; font-size: 12.5px; color: rgba(245,238,225,0.82);
  background: transparent; border: 1px dashed rgba(245,238,225,0.4);
  border-radius: var(--r-sm); padding: 10px;
}
.payfile__input::file-selector-button {
  margin-right: 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--cream); color: var(--brand-navy);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 7px 12px;
}
.payfile__input::file-selector-button:hover { background: var(--white); }
.payfile__input:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.field--error .payfile__input { border-color: var(--orange-hot); border-style: solid; }

.payfile__previa {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: rgba(245,238,225,0.08); border: 1px solid rgba(245,238,225,0.18);
  border-radius: var(--r-sm); padding: 8px;
}
.payfile__previa[hidden] { display: none; }
.payfile__img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.payfile__doc {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 6px; background: var(--cream); color: var(--brand-navy);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.payfile__meta { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.payfile__nom {
  font-size: 12.5px; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payfile__peso { font-family: var(--font-mono); font-size: 10.5px; color: rgba(245,238,225,0.6); }
.payfile__quitar {
  flex: none; border: 1px solid rgba(245,238,225,0.4); background: transparent;
  color: var(--cream); border-radius: 8px; cursor: pointer; padding: 6px 12px; min-height: 44px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.payfile__quitar:hover { background: rgba(245,238,225,0.12); }
.payfile__quitar:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
/* El aviso solo aparece cuando el archivo no sirve. */
.payfile .field__err { display: none; color: var(--orange-soft); }   /* el mismo rojo claro que el resto de avisos de .pay */
.payfile.field--error .field__err { display: block; }

@media (max-width: 860px) {
  .pagos-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .paymini, .paymini__go svg { transition: none; }
  .paymini:hover { transform: none; box-shadow: 4px 4px 0 var(--brand-red); }
  .paymini:hover .paymini__go svg { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   «¿ESTA COMPRA VA PARA MIAMI?»
   Los botones de una compra sacada del correo que el cliente aún no
   confirmó («Sí, va para Miami», «No va», «Corregir datos»). Viven en su
   fila de Mis paquetes y en su detalle (decisionDeCompra en app-dash.js);
   la tarjeta del inicio que los llevaba antes ya no existe. En el móvil,
   uno debajo de otro y a todo el ancho.
   ══════════════════════════════════════════════════════════════════════ */
.detectados { display: grid; gap: 10px; margin: 10px 0 4px; }
.detectados[hidden] { display: none; }
.detectados__item { padding: 12px 14px; background: var(--kraft-2); border: 1px solid var(--kraft-line); border-radius: var(--r-md); }
.detectados__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--brand-navy); }
.detectados__s { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.apr__acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
/* La guía de una compra que ya confirmó (marcarHermanas): la frase va en su
   propia línea, encima de los botones, y cambia a lo que pierde con «No va». */
.apr__hermana { flex: 1 0 100%; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 560px) {
  .apr__acciones .btn { width: 100%; }
}

/* ── De cuándo es la copia del almacén del aliado ─────────────────────
   Va DEBAJO de la rejilla .pd y no como una fila más de ella, y eso es la
   diferencia entre las dos cosas: las filas de arriba son datos, esto es
   una advertencia sobre todos ellos. Puesta dentro de la rejilla se leería
   como un dato más y nadie la leería como lo que es.

   Sin borde lateral de color: DESIGN.md sección 9 los prohíbe como acento
   (el de .nota__p, que era la excepción, ya tampoco está). */
/* Pegada a la rejilla: el `gap` de 14 px de .prow__detail más un margin-top
   de 10 la dejaban a 24 px, más lejos que cualquier otro bloque, y se leía
   como algo suelto y no como el aviso sobre los datos de encima. Con -6 px
   queda a 8. Y sin cursiva: no hay Poppins itálica cargada, así que era una
   inclinación sintética que deformaba las letras. */
.pd__nota {
  margin-top: -6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  font-style: normal;
}

/* ── «¿Va para Miami?» dentro del detalle de la caja ──
   Los mismos botones que en la fila. El «Listo: …» o el error no van aquí:
   van a #aprobarPkgMsg, fuera de la lista, porque la fila se quita al
   decidir y se llevaría el mensaje con ella. */
.pd__decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }

/* La zona que falta en Despachar: pegada a los botones que la piden. */
.dispatch .dispatch__zona-aviso { margin: -4px 0 12px; }

/* El aspa del modal de pre-alerta: 42 px en app.css (una regla de todo el
   sitio que no es de este frente), 44 aquí, que es el mínimo de la app. */
#prealertModal .modal__close { width: 44px; height: 44px; }

/* ── Mis solicitudes (compra asistida) ──────────────────────────────────
   Una lista corta debajo del formulario: qué pidió y en qué va. La pinta
   cargarSolicitudes() en app-dash.js. Va en una .card (--cream-2): el
   título navy da 15.11:1 y la línea de datos, --ink-mute, 5.65:1. El
   estado es la misma pegatina .badge-status de Mis paquetes, y el enlace
   a la tienda es un .link-btn: 44 px de alto para el dedo. */
.solicitudes { margin-top: 16px; }
.solicitudes__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.solicitud { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 8px; border-top: 1px solid var(--paper-line); }
.solicitud:first-child { border-top: 0; padding-top: 2px; }
.solicitud__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.solicitud__t {
  min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--brand-navy); overflow-wrap: anywhere;
}
.solicitud__top .badge-status { flex: none; }
.solicitud__pie { display: flex; align-items: center; justify-content: space-between; gap: 0 12px; flex-wrap: wrap; }
.solicitud__m { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-mute); }
.solicitud__ir { font-size: 13px; }
.solicitud__nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-mute); max-width: 62ch; }

/* -- Revision movil (26-oct): casillero y acceso -----------------------------
   La barra inferior del casillero tenía celdas de ~38 px (padding 4+2).
   El panel de marca del login no respetaba el notch. */
@media (max-width: 860px) {
  .app__mobnav a, .app__mobnav button { min-height: 48px; }
  .auth__brand { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .consent { min-height: 44px; padding: 8px 0; }
  .consent a { display: inline-flex; align-items: center; min-height: 44px; }
  .auth__foot-link a { display: inline-flex; align-items: center; min-height: 44px; }
}