/* =====================================================================================
   Panel del cliente · diseño 2026-11 (v2)
   - Computadora: menú en una columna fija a la izquierda (Inicio · Mi garaje · Billetera · Perfil) y el contenido a la derecha.
   - Celular: el menú sigue abajo como una app (cuenta.css).
   - Inicio abre con UNA tarjeta "Lo que sigue" con un solo botón.
   - Documentos (bóveda) en cada carro y en Perfil; tarjeta para instalar la app.
   Se carga DESPUÉS de cuenta.css y solo afecta a .app.v2.
   ===================================================================================== */

/* ---------- Columna de menú (computadora) ---------- */
@media (min-width:961px){
  html body .app.v2{display:grid;grid-template-columns:216px minmax(0,1fr);gap:36px;align-items:start}
  html body .app.v2.solo{display:block}
  html body .app.v2 .tabbar{position:sticky!important;top:88px;display:grid!important;gap:4px;margin:0!important;padding:8px!important;background:var(--bp-panel)!important;width:auto;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
  html body .app.v2 .tb{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px!important;font-size:14px!important;background:transparent;color:var(--bp-mute)}
  html body .app.v2 .tb .tb-i{display:inline-grid!important;place-items:center}
  html body .app.v2 .tb .tb-i .ic,html body .app.v2 .tb .tb-i svg{width:19px;height:19px}
  html body .app.v2 .tb:hover{background:var(--bp-paper);color:var(--bp-ink)}
  html body .app.v2 .tb.on{background:var(--c);color:#fff}
  html[data-theme=dark] body .app.v2 .tb.on{color:#04181e}
  html body .app.v2 .tb em{position:static;margin-left:auto}
  .app.v2 .app-col{min-width:0}
}
.app.v2 .tb .ic svg,.app.v2 .ahora .ic svg,.app.v2 .docs .ic svg,.app.v2 .docs-n .ic svg,.app.v2 .app-inst .ic svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- "Lo que sigue": la tarjeta principal de Inicio ---------- */
.app.v2 .hero.ahora{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 22px;padding:24px 26px;margin:0 0 24px;justify-items:stretch}
.app.v2 .ahora-i{width:54px;height:54px;display:grid;place-items:center;background:#ffffff26;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.app.v2 .ahora-i .ic,.app.v2 .ahora-i svg{width:26px;height:26px;color:#fff}
.app.v2 .ahora-x{display:grid;gap:4px;min-width:0}
.app.v2 .ahora-x small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#ffffffb3}
.app.v2 .ahora-x h2{margin:0;font:400 clamp(19px,2.4vw,24px)/1.25 Michroma,Poppins,sans-serif;color:#fff}
.app.v2 .ahora-x p{margin:0;color:#ffffffd9;font-size:14.5px}
.app.v2 .ahora-x .ahora-nota{font-size:12.5px;color:#ffffffb8;margin-top:4px}
.app.v2 .hero.ahora .hero-b{background:#fff!important;color:var(--deep)!important;padding:13px 26px;font-weight:600;white-space:nowrap}
.app.v2 .hero.ahora .hero-b:hover{filter:brightness(.95)}
@media (max-width:720px){
  .app.v2 .hero.ahora{grid-template-columns:auto minmax(0,1fr);padding:20px 18px;gap:14px}
  .app.v2 .hero.ahora .hero-b{grid-column:1/-1;width:100%}
  .app.v2 .ahora-i{width:44px;height:44px}
}

/* ---------- Documentos (bóveda) ---------- */
.docs{margin:18px 0 6px}
.docs .det-t{display:flex;align-items:center;gap:8px}
.docs-l{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.docs .doc{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;background:var(--bp-panel);color:var(--bp-ink);text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.docs .doc:hover{background:var(--bp-soft)}
.docs .doc:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.doc-k{display:grid;place-items:center;width:48px;height:48px;font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--bp-soft);color:var(--bp-deep);clip-path:var(--bp-cut)}
.doc-t{display:grid;min-width:0}.doc-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-t small{font-size:12px;color:var(--bp-mute)}
.doc-d{width:36px;height:36px;display:grid;place-items:center;color:var(--c)}
.doc-d .ic,.doc-d svg{width:20px;height:20px}
.docs-n{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--bp-mute)}
.docs-n .ic,.docs-n svg{width:14px;height:14px}

/* ---------- Instalar la app ---------- */
.app-inst{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px!important}
.app-inst-i img{width:56px;height:56px;display:block;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.app-inst b{font-size:15px}.app-inst p{margin:4px 0 0}
.app-inst .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.app-inst .btn .ic,.app-inst .btn svg{width:17px;height:17px}
@media (max-width:560px){.app-inst{grid-template-columns:48px minmax(0,1fr)}.app-inst .btn{grid-column:1/-1;width:100%;justify-content:center}.app-inst-i img{width:48px;height:48px}}

/* Nada se sale de la pantalla: las columnas pueden encogerse (la barra de 7 etapas empujaba la página hacia la derecha) */
.app.v2 .app-col,.app.v2 .app-main,.app.v2 .home>*{min-width:0}
.app.v2 .home{grid-template-columns:minmax(0,1fr)}
.app.v2 .fases li{min-width:0}
.app.v2 .ahora-nota.corta{display:none}

/* ---------- CELULAR SENCILLO (≤ 720 px): lo que sigue arriba, poco texto y nada repetido ---------- */
@media (max-width:720px){
  .app.v2 .pane{grid-template-columns:minmax(0,1fr)!important}
  /* Inicio: la tarjeta "Lo que sigue" ya dice cuánto y cuándo; las cifras, "Próximo pago" y la actividad se repiten → fuera */
  .app.v2 .home>.kpis,.app.v2 .home .pane-side{display:none!important}
  .app.v2 .greet p{display:none}
  .app.v2 .greet{margin-bottom:14px!important}
  .app.v2 .greet .hola{font-size:22px!important}
  .app.v2 .greet .btn{padding:9px 14px;font-size:13px}
  /* Aviso del plazo: versión corta (la completa sale al pagar) */
  .app.v2 .ahora-nota:not(.corta){display:none}
  .app.v2 .ahora-nota.corta{display:block}
  /* Etapas compactas: solo la actual con su nombre */
  .app.v2 .fases small{display:none}
  .app.v2 .fases li.now small{display:block;position:absolute;top:34px;white-space:nowrap;max-width:none}
  .app.v2 .stepper-box{padding-bottom:34px!important}
  /* Tarjeta de seguimiento: foto chica a la izquierda y el texto baja de línea (nada cortado) */
  .app.v2 .track .vh{flex-direction:row!important;align-items:center!important;gap:12px;padding:14px!important}
  .app.v2 .track .vthumb{width:84px!important;flex:none}
  .app.v2 .vh-x{min-width:0}.app.v2 .vh-t{font-size:15px!important}
  .app.v2 .track .specs{white-space:normal;overflow-wrap:anywhere}
  .app.v2 .track .tags .pill,.app.v2 .pill{white-space:normal;max-width:100%}
  /* Billetera: primero lo que falta pagar, después lo pagado; los nombres bajan de línea en vez de cortarse */
  .app.v2 .pg-cols{display:flex!important;flex-direction:column;gap:14px}
  .app.v2 .pg-cols>.pg-col:last-child{order:-1}
  .app.v2 .mov-t b,.app.v2 .mov-t small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  /* Barra superior: solo el nombre (sin cortar a media palabra) */
  .me-chip .nm b{max-width:46vw}
}

/* Etapas: los nombres largos ("Nacionalización y matriculación") parten en sílabas en vez de pisarse */
.app.v2 .fases small,.sheet .fases small{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;font-size:11px;max-width:10ch}

/* La app instalada abre sin la barra del navegador: se respeta la zona segura del iPhone */
@media (display-mode:standalone){body.en-app .top{padding-top:max(14px,env(safe-area-inset-top))}}
@media (prefers-reduced-motion:reduce){.docs .doc{transition:none}}