/* Bescala · portal del cliente en dos niveles (RF-147): barra de la cuenta a la izquierda (menú que se desliza en celular)
   y, dentro de cada producto, sus pestañas (abajo en celular, arriba en computadora). El panel del equipo es la referencia. */
html { scroll-padding-top: 24px; }
body.portal { margin: 0; font-family: var(--font-sans); background: var(--superficie); color: var(--texto); font-size: 16px; line-height: 24px; }
img, svg { max-width: 100%; }
a { color: var(--enlace); }
h1, h2 { text-wrap: balance; }
[hidden] { display: none !important; }
.salto { position: absolute; left: 16px; top: -60px; z-index: 40; }
.salto:focus { top: 12px; }
.logo { display: inline-flex; line-height: 0; border-radius: var(--radio-sm); }
.logo svg { width: 157px; height: 30px; }
.logo:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.dato-mono { font-family: var(--font-mono); }

.bs-ruta--compacta { max-width: 560px; display: block !important; }
.bs-ruta--compacta .bs-ruta__pasos { margin-top: var(--espacio-2); }
.bs-ruta--compacta .bs-ruta__nombre { font-size: 12px; line-height: 16px; font-weight: 600; }
.bs-ruta--compacta .bs-ruta__estado { font-size: 10px; line-height: 14px; min-height: 14px; }
.bs-ruta--compacta .bs-ruta__paso { padding-right: 4px; }


/* Cuerpo */
.p-cuerpo { box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: var(--espacio-5) max(var(--espacio-4), env(safe-area-inset-right, 0px)) var(--espacio-7) max(var(--espacio-4), env(safe-area-inset-left, 0px)); display: grid; gap: var(--espacio-5); }
.p-principal { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.p-saludo { margin: 0; font: 800 28px/34px var(--font-sans); letter-spacing: -.02em; }
.p-titulo h1 { margin: 0; font: 800 26px/32px var(--font-sans); letter-spacing: -.015em; }
.p-titulo__nota { margin: 4px 0 0; font: 500 13px/18px var(--font-mono); color: var(--texto-tenue); }
.p-acciones { display: flex; flex-direction: column; gap: var(--espacio-2); align-items: stretch; }
.p-acciones .bs-btn--texto { align-self: center; }

/* «Lo que te toca ahora» */
.toca { display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-5); border-radius: var(--radio-lg); background: var(--superficie-elevada); border: 2px solid var(--borde-destacado); }
.toca__ante { font: 700 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--marca-texto); }
.toca h2 { margin: 0; font: 800 24px/30px var(--font-sans); }
.toca p { margin: 0; color: var(--texto-suave); }
.toca__monto { font: 700 32px/36px var(--font-mono); font-variant-numeric: tabular-nums; }

/* Tarjetas del portal */
.tarjeta-p { gap: var(--espacio-3); }
.tarjeta-p p { margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.tarjeta-p__t { margin: 0; font: 700 17px/24px var(--font-sans); color: var(--texto); }
.tarjeta-p__nota { font-size: 14px !important; line-height: 20px !important; color: var(--texto-tenue) !important; }
.tarjeta-p .bs-btn { align-self: flex-start; }
.tarjeta-p--monto .bs-precio { font-size: 36px; line-height: 40px; }
.lista-num { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--espacio-2); font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.beneficios li { display: grid; grid-template-columns: 12px 1fr; column-gap: var(--espacio-3); }
.beneficios li::before { content: ""; width: 12px; height: 12px; margin-top: 5px; border-radius: 4px; background: var(--escalon-listo); grid-row: span 2; }
.beneficios strong { font-size: 15px; line-height: 22px; }
.beneficios span { font-size: 14px; line-height: 20px; color: var(--texto-tenue); }

/* Recorrido dentro de la tarjeta */
.recorrido-det summary { display: inline-flex; align-items: center; min-height: var(--tactil-min); font-weight: 600; color: var(--enlace); cursor: pointer; list-style: none; border-radius: var(--radio-sm); }
.recorrido-det summary::-webkit-details-marker { display: none; }
.recorrido-det summary::after { content: "+"; margin-left: 8px; font-family: var(--font-mono); }
.recorrido-det[open] summary::after { content: "−"; }
.recorrido-det summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.recorrido-v { display: grid !important; margin-top: var(--espacio-3); }

/* Pago */
.persona-p { display: flex; gap: var(--espacio-3); align-items: center; }
.persona-p__foto { width: 52px; height: 52px; flex: none; border-radius: var(--radio-full); border: 2px dashed var(--borde-control); display: grid; place-items: center; font: 500 10px/1 var(--font-mono); color: var(--texto-tenue); }
.persona-p strong { display: block; }
.persona-p > span > span { font-size: 14px; color: var(--texto-tenue); }
.dato-copiar { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); }
.dato-copiar__k { display: block; font-size: 13px; color: var(--texto-tenue); }
.dato-copiar__v { display: block; font: 700 15px/22px var(--font-mono); overflow-wrap: anywhere; }

/* Subir comprobante */
.subir { display: flex; flex-direction: column; gap: var(--espacio-4); }
.archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.archivos__vacio { padding: var(--espacio-5); border: 1px dashed var(--borde-control); border-radius: var(--radio-md); text-align: center; color: var(--texto-tenue); font-size: 15px; }
.archivo-item { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie-elevada); }
.archivo-item__tipo { width: 44px; height: 44px; flex: none; border-radius: var(--radio-sm); background: var(--estado-pendiente-fondo); display: grid; place-items: center; font: 700 11px/1 var(--font-mono); color: var(--estado-pendiente-texto); }
.archivo-item__datos { flex: 1; min-width: 0; }
.archivo-item__datos strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.archivo-item__datos span { font-size: 13px; color: var(--texto-tenue); }
.zona-archivo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--espacio-6) var(--espacio-4); border: 2px dashed var(--borde-control); border-radius: var(--radio-lg); text-align: center; cursor: pointer; }
.zona-archivo:hover { background: var(--superficie-hover); }
.zona-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-archivo:focus-within { box-shadow: var(--anillo-foco); }
.zona-archivo strong { font-size: 16px; }
.zona-archivo span { font-size: 13px; color: var(--texto-tenue); }

/* Pantallas centradas */
.p-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--espacio-4); padding-block: var(--espacio-7); max-width: 520px; margin: 0 auto; }
.p-centro h1 { margin: 0; font: 800 28px/34px var(--font-sans); }
.p-centro .entrada { margin: 0; font-size: 17px; line-height: 26px; color: var(--texto-suave); }
.p-centro__ok { width: 64px; height: 64px; border-radius: 20px; background: var(--escalon-listo); color: var(--sobre-accion); display: grid; place-items: center; }
.p-centro__ok svg { width: 34px; height: 34px; stroke-width: 3; }
.portal--solo .p-cuerpo { min-height: 100vh; align-content: center; }
.portal--solo .logo svg { width: 210px; height: 40px; margin-bottom: var(--espacio-5); }

/* Contrato y firma */
.firma { gap: var(--espacio-4); }
.firma__pedir, .firma__codigo { display: flex; flex-direction: column; gap: var(--espacio-3); }
.codigo { font: 700 28px/36px var(--font-mono); letter-spacing: .4em; text-align: center; max-width: 280px; }
.nota-maquetado { margin: 0; font: 500 12px/16px var(--font-mono); color: var(--texto-tenue); border: 1px dashed var(--borde-control); border-radius: var(--radio-sm); padding: 6px 10px; }

/* Pagos */
.resumen-pagos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.resumen-pagos div { padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-md); background: var(--superficie-elevada); border: 1px solid var(--linea); }
.resumen-pagos span { display: block; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.resumen-pagos strong { font: 700 18px/26px var(--font-mono); font-variant-numeric: tabular-nums; }
.cuotas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.cuota { gap: var(--espacio-2); }
.cuota__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.cuota__cab h2 { margin: 0; font: 700 17px/24px var(--font-sans); }
.cuota__cuando { margin: 0; font-size: 14px; color: var(--texto-tenue); }
.cuota__monto { font: 700 24px/30px var(--font-mono); font-variant-numeric: tabular-nums; }
.cuota--despues { opacity: .8; }


/* ===== Grupo 2: producción y postventa ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.volver { align-self: flex-start; padding-inline: 0; }
.sub-p { margin: var(--espacio-2) 0 0; font: 700 18px/26px var(--font-sans); }
.fila-tit { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espacio-3); }
.fila-tit > :first-child { min-width: 0; }
.fila-tit .bs-insignia { flex: none; }
.fila-btn { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.pausa__btn { margin-top: var(--espacio-3); }
.kv { margin: 0; display: flex; flex-direction: column; }
.kv div { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: var(--espacio-3); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); }
.kv div:last-child { border-bottom: 0; }
.kv dt { font-size: 14px; color: var(--texto-tenue); }
.kv dd { margin: 0; font-weight: 600; font-size: 15px; line-height: 22px; }
.hitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hitos li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--espacio-3); align-items: center; padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.hitos li:last-child { border-bottom: 0; }
.hito__marca { width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--escalon-pendiente); }
.hitos li.hecho .hito__marca { background: var(--escalon-listo); border-color: var(--escalon-listo); }
.hitos li:not(.hecho) { color: var(--texto-suave); }
.hitos .dato-mono { font-size: 14px; }
/* Vista previa protegida del prototipo */
.vista-previa { position: relative; overflow: hidden; border-radius: var(--radio-lg); border: 1px solid var(--linea); background: var(--superficie-elevada); padding: var(--espacio-4); user-select: none; }
.vista-previa__web { display: flex; flex-direction: column; gap: 10px; background: #FBF7F0; border-radius: var(--radio-md); padding: 12px; min-height: 300px; }
.vp-barra { display: flex; gap: 5px; } .vp-barra span { width: 8px; height: 8px; border-radius: 50%; background: #D9CFC0; }
.vp-cab { display: flex; align-items: center; gap: 8px; } .vp-logo { width: 54px; height: 18px; border-radius: 4px; background: #8A5A2B; margin-right: auto; }
.vp-cab i { width: 34px; height: 6px; border-radius: 3px; background: #D9CFC0; }
.vp-foto { display: grid; place-items: center; min-height: 120px; border-radius: 10px; background: linear-gradient(135deg, #E9C99B, #C98E52); color: #3B2611; font: 600 13px/18px var(--font-sans); text-align: center; padding: 12px; }
.vp-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vp-tres b { height: 54px; border-radius: 8px; background: #EFE3D1; }
.vp-l { height: 8px; border-radius: 4px; background: #D9CFC0; } .vp-l--corta { width: 60%; }
.vp-boton { width: 120px; height: 28px; border-radius: 14px; background: #8A5A2B; }
.vista-previa__marca { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px/1 var(--font-mono); letter-spacing: .14em; color: rgba(15,22,38,.28); transform: rotate(-24deg); pointer-events: none; white-space: nowrap; }
/* Archivos finales */
.archivos-finales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.archivo-final { gap: var(--espacio-3); }
.archivo-final__cab { display: flex; align-items: center; gap: var(--espacio-3); }
.archivo-final .bs-btn { align-self: flex-start; }
.contenido-zip summary { cursor: pointer; color: var(--enlace); font-weight: 600; min-height: var(--tactil-min); display: inline-flex; align-items: center; }
.contenido-zip ul { margin: 0; padding-left: var(--espacio-5); font: 500 13px/22px var(--font-mono); color: var(--texto-suave); }
/* Ayuda */
.ayuda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.ayuda-item { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-4); border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie-elevada); color: var(--texto); text-decoration: none; min-height: var(--tactil-min); }
.ayuda-item:hover { background: var(--superficie-hover); }
.ayuda-item:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.ayuda-item strong { display: block; font-size: 16px; }
.ayuda-item span span { font-size: 14px; color: var(--texto-tenue); }
.ayuda-item > span:last-child { color: var(--marca-texto); font-weight: 700; }
/* Soporte */
.solicitudes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.solicitud { gap: var(--espacio-1); }
/* Opciones */
.opciones-p { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.opciones-p legend { font-weight: 600; margin-bottom: var(--espacio-2); padding: 0; }
.opciones-p label { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--tactil-min); padding: 0 var(--espacio-3); border: 1px solid var(--borde-control); border-radius: var(--radio-md); cursor: pointer; }
.opciones-p label:has(input:checked) { border-color: var(--borde-destacado); background: var(--superficie-hover); }
.opciones-p input { width: 20px; height: 20px; accent-color: var(--accion); }
.opciones-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.opcion-c { gap: var(--espacio-2); }
.opcion-c .bs-btn { align-self: flex-start; }
section[data-paso-c] { display: flex; flex-direction: column; gap: var(--espacio-4); }

/* ===== 25/10/2026: cuenta, productos, publicación y acceso ===== */
/* Aviso fijo «Crea tu cuenta» (C-119) */
.p-cuenta-aviso { display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-4); border: 1px solid var(--borde-destacado); border-radius: var(--radio-lg); background: var(--superficie-elevada); }
.p-cuenta-aviso h2 { margin: 0; font: 700 16px/22px var(--font-sans); }
.p-cuenta-aviso p { margin: var(--espacio-1) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.p-cuenta-aviso__acc { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }
@media (min-width: 900px) { .p-cuenta-aviso { flex-direction: row; align-items: center; justify-content: space-between; } .p-cuenta-aviso__acc { flex: none; } }
/* Mis productos (RF-141) */
.productos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.producto-item { display: flex; gap: var(--espacio-3); align-items: center; justify-content: space-between; padding: var(--espacio-4); border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--superficie-elevada); color: inherit; text-decoration: none; min-height: var(--tactil-min); }
.producto-item:hover { border-color: var(--borde-control); }
.producto-item:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.producto-item__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.producto-item__txt span { font-size: 14px; color: var(--texto-suave); }
.producto-item__nota { font-family: var(--font-mono); font-size: 12px !important; color: var(--texto-tenue) !important; }
/* Descuento por portafolio (RF-142) */
.desc-portafolio { display: flex; flex-direction: column; gap: var(--espacio-2); padding-top: var(--espacio-2); border-top: 1px dashed var(--linea); }
.bs-dato--total span { font-weight: 700; }
/* Acceso a pantalla partida (login del cliente, C-119): el mismo esquema que el ingreso del panel */
body.portal--acceso { background: #0F1626; }
body.portal--acceso .p-cuerpo { padding: 0; max-width: none; display: block; min-height: 100vh; }
.p-acceso { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
.p-acceso__marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espacio-3); padding: var(--espacio-6) var(--espacio-4); background: var(--superficie); color: var(--texto); }
.p-acceso__marca svg { width: 240px; height: auto; }
.p-acceso__marca p { margin: 0; font: 500 13px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.p-acceso__lado { display: grid; place-items: center; padding: var(--espacio-5) var(--espacio-4) var(--espacio-7); background: var(--superficie); color: var(--texto); }
.p-acceso__caja { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--espacio-4); }
.p-acceso__logo { display: none; }
.p-acceso__caja section[data-paso-cu] { display: flex; flex-direction: column; gap: var(--espacio-4); }
.p-acceso__caja section[hidden] { display: none; }
.p-acceso__caja .p-centro { align-items: flex-start; text-align: left; padding-block: 0; max-width: none; margin: 0; }
.p-acceso__caja .p-titulo h1, .p-acceso__caja .p-centro h1 { font: 800 26px/32px var(--font-sans); letter-spacing: 0; }
.p-acceso__caja .p-titulo__nota, .p-acceso__caja .p-centro .entrada { margin-top: var(--espacio-2); font: 400 15px/22px var(--font-sans); color: var(--texto-suave); }
.p-acceso__caja .bs-tarjeta { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.p-acceso__caja .tarjeta-p { gap: var(--espacio-4); }
.p-acceso__caja .bs-btn--texto { align-self: center; }
.p-acceso__caja .volver { align-self: flex-start; }
.p-acceso__caja > .tarjeta-p__nota { margin: var(--espacio-2) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-tenue); }
@media (min-width: 900px) {
  .p-acceso { grid-template-columns: 1fr 1fr; }
  .p-acceso__marca svg { width: 340px; }
  .p-acceso__lado { padding: var(--espacio-7) var(--espacio-6); }
}

/* Varios productos (RF-141) */
.p-entrada { margin: 0; font-size: 16px; line-height: 24px; color: var(--texto-suave); }
.productos-grupo { display: flex; flex-direction: column; gap: var(--espacio-3); }
.productos-grupo__t { margin: 0; font: 700 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.mini-av { display: flex; align-items: center; gap: var(--espacio-2); font-size: 13px; line-height: 18px; color: var(--texto-suave); }
.mini-av__esc { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mini-av__esc i { width: 6px; border-radius: 2px; background: var(--escalon-pendiente); }
.mini-av__esc i:nth-child(1) { height: 6px; } .mini-av__esc i:nth-child(2) { height: 8px; } .mini-av__esc i:nth-child(3) { height: 10px; } .mini-av__esc i:nth-child(4) { height: 12px; } .mini-av__esc i:nth-child(5) { height: 14px; }
.mini-av__esc i.si { background: var(--escalon-listo); }
.mini-av__esc i.ahora { background: var(--escalon-ahora); }
.producto-item .bs-insignia { flex: none; }
.nota-maquetado .bs-btn--texto { min-height: 0; padding: 0; font-size: 12px; }

/* Recorrido compacto (filas de 56 px, igual que el trazo) */
.recorrido-v .bs-ruta__pasos { grid-auto-rows: 56px; }
.recorrido-v .bs-ruta__paso { padding-top: 6px; }
.recorrido-v .bs-ruta__nombre { font-size: 15px; line-height: 20px; }
.recorrido-ahora { display: flex; flex-direction: column; gap: 2px; padding: var(--espacio-3); border-radius: var(--radio-md); background: var(--superficie-hover); }
.recorrido-ahora span { font: 700 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--escalon-ahora); }
.recorrido-ahora strong { color: var(--texto); font-size: 16px; line-height: 22px; }
h1[tabindex="-1"]:focus { outline: none; }
.producto-item__nota { line-height: 18px; }
@media (max-width: 599px) { .producto-item { flex-direction: column; align-items: flex-start; } .producto-item .bs-insignia { order: -1; } }

.bs-dato span:last-child { white-space: nowrap; }

/* ===== Portal en dos niveles (RF-147, C-121 a C-123) ===== */
.p-app { min-height: 100vh; }
.p-icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radio-md); background: transparent; color: var(--texto); cursor: pointer; }
.p-icono svg { width: 22px; height: 22px; }
.p-icono:hover { background: var(--superficie-hover); }
.p-icono:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
/* Barra de la cuenta: en celular se desliza desde la izquierda */
.p-lado { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(280px, 86vw); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-5) var(--espacio-3) var(--espacio-4); background: #0B111D; border-right: 1px solid var(--linea); overflow-y: auto; transform: translateX(-102%); transition: transform .2s ease; }
.p-lado.es-abierto { transform: none; box-shadow: var(--sombra-flotante); }
.p-velo { position: fixed; inset: 0; z-index: 35; background: var(--velo); }
.p-lado__logo { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--espacio-2); }
.p-lado__logo .logo svg { width: 157px; height: 30px; }
.p-lado__hola { margin: 0; padding: 0 var(--espacio-3); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); }
.p-lado__nav { display: flex; flex-direction: column; gap: 2px; }
.p-lado__item { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--tactil-min); padding: 0 var(--espacio-3); border-radius: var(--radio-md); color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: 15px; }
.p-lado__item svg { width: 20px; height: 20px; flex: none; }
.p-lado__item:hover, .p-lado__prods a:hover { background: var(--superficie-hover); color: var(--texto); }
.p-lado__item[aria-current="page"] { background: var(--superficie-elevada); color: var(--texto); box-shadow: inset 3px 0 0 var(--marca-texto); }
.p-lado__item[aria-current="page"] svg { color: var(--marca-texto); }
.p-lado__prods { list-style: none; margin: 0 0 var(--espacio-2); padding: 0 0 0 calc(var(--espacio-3) + 20px + var(--espacio-3) - var(--espacio-3)); display: flex; flex-direction: column; gap: 2px; }
.p-lado__prods a { display: flex; align-items: center; min-height: 36px; padding: 4px var(--espacio-3); border-radius: var(--radio-sm); color: var(--texto-tenue); text-decoration: none; font-size: 14px; line-height: 18px; }
.p-lado__prods a[aria-current="page"] { color: var(--texto); background: var(--superficie-elevada); font-weight: 600; }
.p-lado__item:focus-visible, .p-lado__prods a:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.p-lado__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--espacio-1); padding: var(--espacio-3); border-top: 1px solid var(--linea); font-size: 13px; line-height: 18px; color: var(--texto-tenue); }
.p-lado__pie strong { color: var(--texto); font-size: 15px; }
.p-lado__pie .bs-btn { margin-top: var(--espacio-2); align-self: stretch; white-space: nowrap; padding-inline: var(--espacio-3); }
/* Barra superior (solo celular y tablet) */
.p-barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--espacio-2); min-height: 60px; padding: var(--espacio-2) max(var(--espacio-3), env(safe-area-inset-right, 0px)) var(--espacio-2) max(var(--espacio-3), env(safe-area-inset-left, 0px)); background: var(--superficie); border-bottom: 1px solid var(--linea); }
.p-barra .logo svg { width: 136px; height: 26px; }
/* Zona de contenido */
.p-main { box-sizing: border-box; max-width: 1160px; padding: var(--espacio-5) max(var(--espacio-4), env(safe-area-inset-right, 0px)) var(--espacio-7) max(var(--espacio-4), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--espacio-5); }
.p-contenido { display: grid; gap: var(--espacio-5); align-items: start; }
/* Cabecera del producto y sus pestañas */
.p-prod { display: flex; flex-direction: column; gap: 2px; }
.p-prod__nombre { margin: 0; font: 800 20px/26px var(--font-sans); letter-spacing: -.01em; }
.p-prod__sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-tenue); }
.p-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--superficie-elevada); border-top: 1px solid var(--linea); padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); }
.p-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border-radius: var(--radio-md); color: var(--texto-tenue); text-decoration: none; font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; }
.p-tabs a svg { width: 22px; height: 22px; }
.p-tabs a[aria-current="page"] { color: var(--texto); }
.p-tabs a[aria-current="page"] svg { color: var(--marca-texto); }
.p-tabs a:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
body.con-pestanas { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
/* Recorrido: solo en el Inicio del producto (C-122) */
.p-rec { display: flex; flex-direction: column; gap: var(--espacio-3); order: -1; min-width: 0; }
.p-rec__h .bs-ruta--compacta { max-width: 360px; display: block !important; }
.bs-ruta--compacta .bs-ruta__pasos { margin-top: var(--espacio-2); }
.bs-ruta--compacta .bs-ruta__nombre { font-size: 12px; line-height: 16px; font-weight: 600; }
.bs-ruta--compacta .bs-ruta__estado { font-size: 10px; line-height: 14px; min-height: 14px; }
.bs-ruta--compacta .bs-ruta__paso { padding-right: 4px; }
/* Celular: el avance horizontal arriba y la tarjeta del recorrido al final, plegada */
@media (max-width: 719px) { .p-rec { display: contents; } .p-rec__h { order: -1; } .p-rec > section { order: 1; } }
@media (min-width: 720px) { .p-rec__h { display: none; } }
@media (min-width: 1024px) {
  .p-app { display: grid; grid-template-columns: 288px minmax(0, 1fr); }
  .p-lado { position: sticky; top: 0; height: 100vh; width: auto; transform: none; transition: none; }
  .p-velo, .p-barra, .p-lado__cerrar { display: none !important; }
  .p-main { padding: var(--espacio-6) var(--espacio-7) var(--espacio-7); }
  .p-tabs { position: static; display: flex; gap: var(--espacio-1); background: transparent; border: 0; border-bottom: 1px solid var(--linea); padding: 0; margin-top: calc(var(--espacio-2) * -1); }
  .p-tabs a { flex-direction: row; gap: var(--espacio-2); min-height: var(--tactil-min); padding: 0 var(--espacio-4); font-size: 14px; border-radius: var(--radio-md) var(--radio-md) 0 0; }
  .p-tabs a svg { width: 18px; height: 18px; }
  .p-tabs a[aria-current="page"] { background: var(--superficie-elevada); box-shadow: inset 0 -2px 0 var(--marca-texto); }
  body.con-pestanas { padding-bottom: 0; }
  .p-acciones { align-items: flex-start; }
  .p-acciones .bs-btn--bloque { width: auto; }
}
/* Pantalla ancha: recorrido a la derecha, vertical y abierto */
@media (min-width: 1280px) {
  .p-contenido--rec { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--espacio-6); }
  .p-rec { order: 0; }
  .recorrido-det > summary { display: none; }
  .recorrido-v { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .p-lado { transition: none; } }
/* Todos mis pagos */
.pago-fila { gap: var(--espacio-2); }
.pago-fila__cab, .pago-fila__cuerpo { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.pago-fila__cuerpo > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pago-fila__cuerpo > span:first-child span { font-size: 14px; color: var(--texto-tenue); }
.pago-fila__monto { font: 700 18px/24px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pago-fila .bs-btn--texto { align-self: flex-start; padding-inline: 0; }

/* Mapa del sitio tras la auditoría (C-131) */
.mapa-lista { margin: 0; padding: 0 0 0 var(--espacio-5); display: flex; flex-direction: column; gap: var(--espacio-3); }
.mapa-lista li { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; }
.mapa-lista li span { color: var(--texto-suave); }
.mapa-lista--simple { list-style: none; padding-left: 0; }
.paleta { list-style: none; margin: 0 0 var(--espacio-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--espacio-3); }
.paleta li { display: flex; align-items: center; gap: var(--espacio-3); font-size: 14px; line-height: 20px; }
.paleta li > span:last-child { display: flex; flex-direction: column; }
.paleta li .dato-mono { font-size: 12px; color: var(--texto-tenue); }
.paleta__color { width: 40px; height: 40px; flex: none; border-radius: var(--radio-md); border: 1px solid var(--linea); }

/* Trabajo adicional: elegir funciones (C-128) */
.func-lista { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.func-lista legend { font-weight: 600; padding: 0 0 var(--espacio-2); }
.func-op { display: flex; gap: var(--espacio-3); align-items: flex-start; min-height: 44px; padding: var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-md); cursor: pointer; }
.func-op input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.func-op > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; }
.func-op > span span { color: var(--texto-suave); font-size: 14px; }
.func-op:has(input:checked) { border-color: var(--borde-destacado); background: var(--superficie-elevada); }

/* Editor de comentarios del prototipo (CU-27, C-130) */
.p-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie-campo); }
.p-seg button { min-height: 40px; padding: 0 var(--espacio-4); border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--texto-suave); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.p-seg button[aria-pressed="true"] { background: var(--secundario); color: var(--sobre-secundario); }
.p-seg button:focus-visible { outline: 2px solid transparent; box-shadow: var(--anillo-foco); }
.proto { display: flex; flex-direction: column; gap: var(--espacio-4); }
.proto-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.proto-ayuda { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.proto-leyenda { display: inline-flex; align-items: center; gap: var(--espacio-2); font-size: 14px; color: var(--texto-suave); }
.proto-leyenda i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: var(--espacio-2); }
.proto-marco { border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; background: #FBF7F0; }
.proto-marco iframe { display: block; width: 100%; height: min(72vh, 760px); min-height: 420px; border: 0; }
.proto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-3); }
.proto-item { display: flex; gap: var(--espacio-3); align-items: flex-start; padding-bottom: var(--espacio-3); border-bottom: 1px solid var(--linea); }
.proto-item:last-child { border-bottom: 0; padding-bottom: 0; }
.proto-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.proto-item p { margin: 0; font-size: 15px; line-height: 22px; }
.proto-item__n { width: 32px; height: 32px; flex: none; border-radius: 50% 50% 50% 4px; display: grid; place-items: center; color: #fff; font: 800 14px/1 var(--font-sans); }
.proto-item__n--borrador { background: #0F1626; box-shadow: inset 0 0 0 2px var(--linea); } .proto-item__n--enviado { background: #6C8CFF; }
.proto-item__n--resuelto { background: #1E8E4E; } .proto-item__n--no_resuelto { background: #C2410C; }
.proto-item__acc { display: flex; gap: var(--espacio-2); flex-wrap: wrap; }
.proto-ref { font-size: 13px; color: var(--texto-suave); overflow-wrap: anywhere; }
.proto-pie { position: sticky; bottom: var(--espacio-3); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-4); border-radius: var(--radio-lg); background: var(--superficie-elevada); border: 2px solid var(--borde-destacado); box-shadow: var(--sombra-flotante); }
.proto-pie p { margin: 0; }
.proto-pie__acc { display: flex; gap: var(--espacio-2); flex-wrap: wrap; }
.proto-pie > .tarjeta-p__nota { flex-basis: 100%; }
dialog.p-dialogo { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); padding: var(--espacio-5); border: 1px solid var(--linea); border-radius: var(--radio-lg); background: var(--superficie-elevada); color: var(--texto); box-shadow: var(--sombra-flotante); }
dialog.p-dialogo::backdrop { background: rgba(15, 22, 38, .55); }
.p-dialogo h2 { margin: 0 0 var(--espacio-2); font-size: 20px; line-height: 28px; }
.p-dialogo form { display: flex; flex-direction: column; gap: var(--espacio-3); }
.p-dialogo__acc { display: flex; gap: var(--espacio-2); flex-wrap: wrap; }
@media (max-width: 1023px) { .con-pestanas .proto-pie { bottom: calc(76px + env(safe-area-inset-bottom)); } }
/* Editor en pestaña nueva (RF-154) */
.proto-barra__der { margin-left: auto; }
.proto-sug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-lg); background: var(--superficie-elevada); border: 1px solid var(--linea); border-left: 4px solid #6C8CFF; }
.proto-sug p { flex: 1 1 280px; margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.proto-sug p strong { color: var(--texto); }
.proto-sug .p-icono { margin-left: auto; }
@media (max-width: 1023px), (hover: none) { [data-solo-pc] { display: none !important; } }
body.portal--completo { min-height: 100vh; }
.p-completo-cab { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--espacio-4); padding: var(--espacio-2) var(--espacio-4); background: #0F1626; color: #E8ECF3; }
.p-completo-cab .logo svg { width: 136px; height: 26px; display: block; }
.p-completo-cab__t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 20px; }
.p-completo-cab__t span { color: #A9B3C7; font-size: 13px; }
.p-completo-cab .bs-btn--secundario { color: #E8ECF3; border-color: rgba(232,236,243,.4); background: transparent; }
.p-completo { padding: var(--espacio-3) var(--espacio-4) var(--espacio-4); }
.proto--completo { gap: var(--espacio-3); }
.proto-cuerpo { display: grid; gap: var(--espacio-4); }
.proto-lado { display: flex; flex-direction: column; gap: var(--espacio-3); min-width: 0; }
@media (min-width: 1024px) {
  .proto-cuerpo { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .proto--completo .proto-marco iframe { height: calc(100vh - 140px); max-height: none; }
  .proto-lado { position: sticky; top: 72px; max-height: calc(100vh - 140px); overflow: auto; }
  .proto-lado .proto-pie { position: static; box-shadow: none; }
  .proto--sin-lado .proto-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .proto--sin-lado .proto-lado { display: none; }
}
@media (max-width: 640px) { .p-completo-cab { gap: var(--espacio-3); } .p-completo-cab .logo { display: none; } .p-completo-cab__t span { display: none; } }
/* Detalle de la retención en el pago (C-139) */
.detalle-p { margin: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.detalle-p > div { display: flex; justify-content: space-between; gap: var(--espacio-3); padding-bottom: var(--espacio-2); border-bottom: 1px solid var(--linea); }
.detalle-p > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detalle-p dt { color: var(--texto-suave); }
.detalle-p dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }