/* ChatAnalytica · web 06 «La elegida» en producción (8-oct-2026) · páginas de producto: Planes, Desktop, Método, Estado y Archivo.
   Se carga además de web.css (sus tokens, tipografía, botones, barra y pie). Mismo sistema que la portada: una idea por pantalla,
   el texto a un lado y la Vault al otro (producto-comun.js pone cada estación), sin velos ni tarjetas con sombra; el naranja,
   solo en la acción principal. La última sección comparte la pantalla con el pie (como el cierre de la 06). */

/* ---------- Común ---------- */
.pr-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 640px; }
.pr-heroe .pr-col { max-width: 720px; }
.pr-heroe .entradilla { max-width: min(42ch, calc(50vw - var(--margen))); }
/* a un lado de la Vault: el texto no pasa de la mitad de la pantalla */
.dk-capacidades .entradilla { max-width: min(42ch, calc(50vw - var(--margen))); }
/* la última sección y el pie, en la última pantalla (--alto-pie lo pone base.js) */
.pr-final { position: relative; min-height: calc(100vh - var(--alto-pie, 0px)); min-height: calc(100svh - var(--alto-pie, 0px)); display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--barra-h) + 3vh) 0 4vh; }
.pr-final > .contenedor { width: 100%; }
.pr-nw { white-space: nowrap; }
.pr-lista { display: flex; flex-direction: column; gap: 8px; }
.pr-lista li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--t-apoyo); }
.pr-lista li::before { content: ''; position: absolute; left: 0; top: .74em; width: 9px; height: 1px; background: var(--t2); }

/* ---------- Planes: la beta (la acción principal) y Pro, que comparte la última pantalla con el pie ---------- */
.pr-planes .pr-col { gap: clamp(32px, 6vh, 60px); }
.pr-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pr-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; max-width: min(560px, calc(50vw - var(--margen))); padding-top: 22px; border-top: 1px solid rgba(237, 237, 237, .22); }
.pr-plan-nombre { font-size: .9375rem; font-weight: 500; color: var(--t-apoyo); }
.pr-plan-nombre span { font-weight: 400; color: var(--t2); }
.pr-plan-titulo { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 560; letter-spacing: -.03em; line-height: 1.05; }
.pr-plan-desc { font-size: 1.0625rem; line-height: 1.55; color: var(--t-apoyo); max-width: 44ch; }
.pr-plan .pr-lista { margin: 2px 0 6px; }
.pr-plan .acciones { margin-top: 4px; }
.pr-plan-pro { border-top-color: var(--filete-2); }
.pr-plan-pro .meta { margin-top: 4px; }
.pr-planes-pro .pr-final-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.pr-planes-pro .pr-plan { grid-column: 2; }

/* ---------- Estado y Archivo: el titular y el contenido, uno al lado del otro, con el pie en la misma pantalla ----------
   Son dos secciones (en el móvil, una parada cada una); en escritorio, dos columnas de <main> con la misma altura. */
main.pr-par { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 120px); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.pr-par > section { min-height: calc(100vh - var(--alto-pie, 0px)); min-height: calc(100svh - var(--alto-pie, 0px)); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--barra-h) + 4vh) 0 5vh; }
.pr-par-a .pr-col { gap: 20px; }
.pr-par-b .pr-col { width: 100%; max-width: 600px; }
.pr-estado { gap: 22px; }
.pr-comps { width: 100%; border-top: 1px solid rgba(237, 237, 237, .18); }
.pr-comp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filete); }
.pr-comp-nombre { font-size: 1.0625rem; font-weight: 500; color: var(--t1); }
.pr-comp-estado { display: inline-flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--t-apoyo); text-align: right; }
.pr-comp-estado i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sube); }
.pr-pausa .pr-comp-estado i { background: var(--estimado); }
.pr-comprobado { max-width: 52ch; }
.pr-comprobado time { color: var(--t-apoyo); font-variant-numeric: tabular-nums; }
/* el registro del archivo: sus columnas y, mientras no hay publicaciones, el aviso de antes */
.pr-registro { width: 100%; }
.pr-registro-cab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(237, 237, 237, .18); font-size: .875rem; font-weight: 500; color: var(--t2); }
.pr-registro-nada { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.pr-registro-nada h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 560; letter-spacing: -.025em; line-height: 1.15; }
.pr-registro-nada p { font-size: 1rem; line-height: 1.6; color: var(--t-apoyo); max-width: 50ch; }
.pr-tabla-archivo td { color: var(--t-apoyo); }
.pr-tabla-archivo td:first-child { color: var(--t1); width: 50%; }

/* ---------- Método: un documento sobrio por paradas ---------- */
.pr-doc > .contenedor, .pr-componentes > .contenedor { width: 100%; }
.pr-texto { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 56px); max-width: min(680px, calc(54vw - var(--margen))); }
.pr-texto-ancho { max-width: min(760px, calc(62vw - var(--margen))); }
.pr-bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pr-h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 560; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.pr-p { font-size: 1.0625rem; line-height: 1.65; color: var(--t-apoyo); max-width: 62ch; text-wrap: pretty; }
.pr-bloque .enlace-flecha { margin-top: 4px; }
.pr-modos { width: 100%; max-width: 560px; margin-top: 4px; }
.pr-modos dd { font-size: 1rem; }
/* el alcance de la nota, solo en su pantalla: más grande, como una entradilla */
.pr-alcance { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.5; letter-spacing: -.012em; color: var(--t1); max-width: 36em; }
.pr-reglas { display: flex; flex-direction: column; gap: 18px; }
.pr-reglas + .pr-reglas { margin-top: 18px; }
.pr-texto-ancho .pr-reglas + .pr-reglas { margin-top: 0; }
.pr-texto-ancho { gap: 18px; }
.pr-reglas li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.6; color: var(--t-apoyo); text-wrap: pretty; }
.pr-reglas li::before { content: ''; position: absolute; left: 0; top: .8em; width: 9px; height: 1px; background: var(--t2); }

/* La tabla de componentes (como la de Por qué la Vault): sin caja; filas que llegan una a una y los pesos dibujados en barras */
.pr-tabla-caja { width: 100%; }
.pr-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.pr-tabla caption { caption-side: top; text-align: left; padding: 0 0 clamp(20px, 3.5vh, 36px); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 560; letter-spacing: -.025em; line-height: 1.12; color: var(--t1); }
.pr-tabla th, .pr-tabla td { text-align: left; padding: 13px 24px 13px 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.pr-tabla thead th { font-size: .875rem; font-weight: 500; color: var(--t2); padding-top: 0; padding-bottom: 12px; border-bottom-color: rgba(237, 237, 237, .18); white-space: nowrap; }
.pr-tabla tbody th { width: 19%; font-weight: 560; color: var(--t1); }
.pr-tabla .pr-peso { width: 9%; }
.pr-tabla td.pr-peso span { display: block; color: var(--t1); white-space: nowrap; }
.pr-tabla td.pr-sin span { color: var(--t3); }
.pr-tabla td.pr-peso i { display: block; height: 2px; margin-top: 9px; width: calc(var(--v) * 60px); border-radius: 1px; background: rgba(237, 237, 237, .55); transform-origin: left; transform: scaleX(0);
  transition: transform 1s var(--e-quint); transition-delay: calc(var(--i, 0) * 90ms + var(--j, 0) * 70ms + .35s); }
.pr-tabla td.pr-mide { color: var(--t-apoyo); }
.pr-tabla-nota tbody tr { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .5s, transform .6s var(--e-quint); transition-delay: calc(var(--i, 0) * 90ms + .15s); }
.pr-tabla-caja.visto tbody tr { opacity: 1; transform: none; }
.pr-tabla-caja.visto td.pr-peso i { transform: scaleX(1); }
.pr-tabla-archivo tbody tr { opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i, 0) * 70ms + .1s); }
.pr-registro.visto .pr-tabla-archivo tbody tr { opacity: 1; }

/* ---------- Desktop ---------- */
/* La ventana conceptual (como la del Chat de la portada): marco limpio, entra inclinada y se endereza al llegar */
.dk-vista > .contenedor { width: 100%; }
.dk-escena { display: flex; flex-direction: column; align-items: center; perspective: 1800px; perspective-origin: 50% 30%; }
.dk-ventana { width: min(100%, 1180px, calc((100svh - var(--barra-h) - 190px) * 1.6)); max-width: none; transform-origin: 50% 70%; }
.js:not(.rm) .dk-ventana { opacity: 0; transform: translate3d(0, 6vh, 0) rotateX(18deg) scale(.95); transition: opacity .9s var(--e-sal), transform 1.4s var(--e-quint); }
.js:not(.rm) .dk-ventana.dentro { opacity: 1; transform: none; }
/* el marco, sin fondo: cada zona de la app lleva el suyo y el panel de Lytica v-1 deja ver la Vault del fondo en su hueco */
.dk-marco { background: transparent; border-color: rgba(237, 237, 237, .12); container: dk / inline-size; }
.dk-pie { margin-top: 14px; font-size: .875rem; line-height: 1.45; color: var(--t2); text-align: right; }
.dk-app { position: absolute; inset: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr); color: var(--t1); font: 400 12px/1.45 var(--sans); letter-spacing: 0; text-align: left; }
.dk-app b, .dk-app strong { font-weight: 600; }
.dk-ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dk-barra { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--filete); white-space: nowrap; }
.dk-luces { display: inline-flex; gap: 6px; flex: none; }
.dk-luces i { width: 9px; height: 9px; border-radius: 50%; background: var(--filete-2); }
.dk-nombre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.dk-barra-der { margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--t2); }
.dk-cuerpo { position: relative; display: grid; grid-template-columns: 184px minmax(0, 1fr) 236px; min-height: 0; }
.dk-lado { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px 14px; background: var(--panel); border-right: 1px solid var(--filete); min-width: 0; }
.dk-lado > strong { padding: 0 8px 8px; font-size: 11px; font-weight: 500; color: var(--t3); }
.dk-lado ul { display: flex; flex-direction: column; gap: 2px; }
.dk-lado li { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12px; color: var(--t2); white-space: nowrap; }
.dk-lado li.dk-sel { background: var(--sup2); color: var(--t1); font-weight: 600; }
.dk-lado small { margin-top: auto; padding: 0 8px; font-size: 11px; line-height: 1.35; color: var(--t3); }
.dk-centro { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; padding: 18px 20px; background: var(--lienzo); }
.dk-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dk-etq { display: block; margin-bottom: 5px; font-size: 11px; color: var(--t2); }
.dk-tit { display: block; font: 600 20px/1.15 var(--sans); letter-spacing: -.02em; }
.dk-marca { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--filete-2); font-size: 11px; color: var(--t2); white-space: nowrap; flex: none; }
.dk-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--filete); border-radius: 10px; }
.dk-metricas > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--filete); }
.dk-metricas > div:last-child { border-right: 0; }
.dk-metricas span { display: block; font-size: 11px; color: var(--t2); }
.dk-metricas b { display: block; margin-top: 4px; font-size: 14px; line-height: 1.2; letter-spacing: -.01em; }
.dk-grafico { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 12px 14px 9px; border: 1px solid var(--filete); border-radius: 10px; }
.dk-g-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dk-g-cab b { font-size: 12px; }
.dk-g-cab span { font-size: 11px; color: var(--t3); }
.dk-g-area { position: relative; flex: 1 1 auto; min-height: 40px; overflow: hidden; }
.dk-g-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dk-g-area path { fill: none; vector-effect: non-scaling-stroke; }
.dk-g-rejilla { stroke: var(--filete); stroke-width: 1; }
.dk-g-tend { stroke: var(--t3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.dk-g-linea { stroke: var(--t1); stroke-width: 1.6; stroke-linejoin: round; }
/* el gráfico se dibuja: una cortina del color del fondo se retira hacia la derecha (solo transform) */
.dk-cortina { position: absolute; inset: -2px; background: var(--lienzo); transform-origin: right; transition: transform 1.6s var(--e-quint) .55s; }
.dentro .dk-cortina { transform: scaleX(0); }
.dk-eje { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--t3); }
.dk-bajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dk-bajo > div { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 12px 14px; border: 1px solid var(--filete); border-radius: 10px; }
.dk-bajo b { font-size: 12px; }
.dk-bajo ul { display: flex; flex-direction: column; gap: 5px; }
.dk-bajo li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--t2); }
.dk-ok { width: 12px; height: 12px; color: var(--sube); }
.dk-bajo p { font-size: 11px; line-height: 1.45; color: var(--t2); }
.dk-chat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 14px 14px; border-left: 1px solid var(--filete); background: transparent; }
.dk-hueco { position: relative; flex: none; width: 100%; aspect-ratio: 1; margin-bottom: 4px; }
.dk-constelacion { display: none; position: absolute; inset: 6%; width: 88%; height: 88%; overflow: visible; }
.dk-c-aristas line { stroke: rgba(237, 237, 237, .24); stroke-width: .25; }
.dk-c-nodos circle { fill: var(--t1); }
.dk-chat > b { font-size: 13px; }
.dk-chat > p { font-size: 12px; line-height: 1.45; color: var(--t2); }
.dk-burbuja { align-self: flex-end; max-width: 92%; padding: 8px 10px; border-radius: 10px 10px 3px 10px; background: var(--sup2); font-size: 12px; line-height: 1.35; color: var(--t1); }
.dk-chat small { margin-top: auto; font-size: 10px; color: var(--t3); }
/* con movimiento reducido o sin WebGL la cámara no lleva la Vault al hueco: el dibujo quieto, y el panel con su fondo */
.rm .dk-constelacion, .sin-webgl .dk-constelacion, html:not(.js) .dk-constelacion { display: block; }
.rm .dk-chat, .sin-webgl .dk-chat, html:not(.js) .dk-chat { background: var(--lienzo); }
/* la ventana se adapta a su ancho (consultas de contenedor) */
@container dk (max-width: 1000px) { .dk-cuerpo { grid-template-columns: 156px minmax(0, 1fr) 204px; } .dk-centro { padding: 14px 16px; gap: 11px; } .dk-tit { font-size: 18px; } .dk-bajo > div { padding: 10px 12px; gap: 5px; } }
@container dk (max-width: 860px) { .dk-cuerpo { grid-template-columns: 136px minmax(0, 1fr) 180px; } .dk-metricas > div { padding: 8px 10px; } .dk-metricas b { font-size: 13px; } .dk-bajo p { display: none; } .dk-lado small { display: none; } }
@container dk (max-width: 720px) { .dk-cuerpo { grid-template-columns: 116px minmax(0, 1fr) 160px; } .dk-barra-der { display: none; } .dk-bajo { display: none; } }

/* Más perspectiva, más control: el titular y los seis rasgos, tres por pantalla, en lista, a un lado y otro de la Vault */
.dk-rasgos > .contenedor { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.dk-rasgos-der .dk-lista { grid-column: 2; }
.dk-lista { display: flex; flex-direction: column; gap: clamp(28px, 5vh, 44px); max-width: 560px; }
.dk-lista li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.dk-lista li::before, .dk-lista li::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.dk-lista li::before { background: var(--filete-2); }
.dk-lista li::after { background: var(--t2); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--e-mov); }
.dk-lista.visto li::after { transform: scaleX(1); }
.dk-lista.visto li:nth-child(2)::after { transition-delay: .25s; }
.dk-lista.visto li:nth-child(3)::after { transition-delay: .5s; }
.dk-lista h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.2; }
.dk-lista p { font-size: 1rem; line-height: 1.6; color: var(--t-apoyo); max-width: 48ch; }

/* ---------- Tema claro ---------- */
[data-tema="claro"] .pr-plan { border-top-color: rgba(15, 15, 15, .22); }
[data-tema="claro"] .pr-plan-pro { border-top-color: var(--filete-2); }
[data-tema="claro"] .pr-comps, [data-tema="claro"] .pr-registro-cab, [data-tema="claro"] .pr-tabla thead th { border-color: rgba(15, 15, 15, .18); }
[data-tema="claro"] .pr-tabla td.pr-peso i { background: rgba(15, 15, 15, .45); }
[data-tema="claro"] .dk-marco { border-color: rgba(15, 15, 15, .14); }
[data-tema="claro"] .dk-centro { background: var(--panel); }
[data-tema="claro"] .dk-cortina { background: var(--panel); }
[data-tema="claro"] .dk-c-aristas line { stroke: rgba(15, 15, 15, .2); }
[data-tema="claro"].rm .dk-chat, [data-tema="claro"].sin-webgl .dk-chat, [data-tema="claro"]:not(.js) .dk-chat { background: var(--panel); }

/* ---------- Pantallas bajas y tableta: lo que comparte pantalla con el pie (≈ 390 px de alto) cabe con él; la tabla, entera ---------- */
@media (min-width: 761px) and (max-height: 820px) {
  .pr-final, .pr-par > section { padding: calc(var(--barra-h) + 12px) 0 16px; }
  .pr-plan { gap: 10px; padding-top: 16px; }
  .pr-plan-titulo { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
  .pr-plan .pr-lista { gap: 6px; margin: 0 0 2px; }
  .pr-par-a .pr-col { gap: 16px; }
  .pr-estado { gap: 16px; }
  .pr-comp { padding: 12px 0; }
  .pr-estado .boton-grande { height: 44px; padding: 0 20px; font-size: .9375rem; }
  .pr-registro-nada { padding-top: 22px; }
  body[data-pagina="desktop"] .cierre { padding: calc(var(--barra-h) + 2vh) 0 3vh; }
  body[data-pagina="desktop"] .cierre-in { gap: 18px; }
  body[data-pagina="desktop"] .cierre .titular-xl { font-size: clamp(2.125rem, 4.1vw, 3.75rem); }
}
@media (min-width: 761px) and (max-width: 1180px), (min-width: 761px) and (max-height: 820px) {
  .pr-componentes.pantalla { padding-top: calc(var(--barra-h) + 20px); padding-bottom: 20px; }
  .pr-tabla caption { padding-bottom: 18px; }
  .pr-tabla th, .pr-tabla td { padding-top: 10px; padding-bottom: 10px; padding-right: 18px; }
  .pr-tabla tbody th { width: 19%; }
  .pr-tabla .pr-peso { width: 9%; }
  .pr-tabla td.pr-mide { font-size: .875rem; line-height: 1.45; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  /* a todo el ancho (en escritorio, el texto no pasa de su mitad de la pantalla) */
  .pr-heroe .entradilla, .dk-capacidades .entradilla, .pr-plan, .pr-texto, .pr-texto-ancho { max-width: none; }
  /* héroes: el texto abajo y la Vault en el hueco de arriba (producto-comun.js · data-hueco) */
  .pr-heroe[data-hueco] { justify-content: flex-end; padding-bottom: max(28px, 5svh); }
  .pr-heroe .pr-col { gap: 20px; }
  .pr-final { padding: calc(var(--barra-h) + 16px) 0 24px; }

  .pr-planes .pr-col { gap: 28px; }
  .pr-cab { gap: 14px; }
  .pr-plan { gap: 12px; padding-top: 18px; }
  .pr-planes-pro .pr-final-in { display: block; }

  main.pr-par { display: block; padding: 0 var(--margen); }
  .pr-par > .pr-par-a { min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding: calc(var(--barra-h) + 16px) 0 max(36px, 8svh); }
  .pr-par > .pr-par-b { padding: calc(var(--barra-h) + 16px) 0 24px; }
  .pr-comp { flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px 0; }
  .pr-comp-estado { text-align: left; }
  .pr-registro-cab { gap: 10px; }

  .pr-texto { gap: 32px; }
  .pr-h2 { font-size: 1.5rem; }
  .pr-p { font-size: 1rem; line-height: 1.6; }
  .pr-modos div { grid-template-columns: 64px minmax(0, 1fr); }
  .pr-alcance { font-size: 1.125rem; }

  /* secciones que en el móvil no caben en una pantalla: dos paradas de una pantalla cada una (sus bloques [data-parada]).
     La primera mide la pantalla menos la barra y 24 px; la segunda, hasta el borde (base.js pone la parada 16 px bajo la barra) */
  .pantalla.pr-partida { min-height: 0; justify-content: flex-start; padding: calc(var(--barra-h) + 16px) 0 0; }
  .pr-partida .pr-texto { gap: 0; }
  .pr-reglas.pr-g1 { min-height: calc(100svh - var(--barra-h) - 24px); justify-content: center; }
  .pr-reglas.pr-g2 { min-height: calc(100svh - var(--barra-h) - 16px); justify-content: center; padding-top: 12px; }
  .pr-reglas + .pr-reglas { margin-top: 0; }
  .pr-reglas li { font-size: 1rem; }

  /* la tabla, en fichas: el componente, sus tres pesos en una línea y lo que mide */
  .pr-tabla thead { display: none; }
  .pr-tabla, .pr-tabla caption, .pr-tabla tbody { display: block; width: auto; }
  .pr-tabla caption { height: 52px; padding: 0; font-size: 1.5rem; }
  .pr-tabla tbody { display: flex; flex-direction: column; justify-content: center; }
  .pr-tabla .pr-g1 { min-height: calc(100svh - var(--barra-h) - 24px - 52px); }
  .pr-tabla .pr-g2 { min-height: calc(100svh - var(--barra-h) - 16px); padding-top: 12px; }
  .pr-tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; padding: 13px 0; border-bottom: 1px solid var(--filete); }
  .pr-tabla tbody th, .pr-tabla td { padding: 0; border: 0; width: auto; }
  .pr-tabla tbody th { grid-column: 1 / -1; font-size: 1.0625rem; }
  .pr-tabla td.pr-peso { font-size: .875rem; white-space: nowrap; }
  .pr-tabla td.pr-peso::before { content: attr(data-c); color: var(--t2); margin-right: 5px; }
  .pr-tabla td.pr-peso span { display: inline; }
  .pr-tabla td.pr-peso i { margin-top: 6px; width: calc(var(--v) * 48px); }
  .pr-tabla td.pr-mide { grid-column: 1 / -1; font-size: .875rem; line-height: 1.45; }
  .pr-tabla-archivo tr { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-tabla-archivo td:first-child { grid-column: 1 / -1; width: auto; }
  .pr-tabla-archivo td:last-child { text-align: right; }

  /* Desktop: la ventana a lo alto de su contenido; la barra lateral y los bloques de abajo se quedan fuera */
  .dk-marco { aspect-ratio: auto; border-radius: 14px; }
  .dk-app { position: relative; inset: auto; grid-template-rows: auto auto; }
  .dk-ventana { width: 100%; }
  .dk-pie { text-align: left; }
  .dk-rasgos > .contenedor { grid-template-columns: minmax(0, 1fr); }
  .dk-rasgos-der .dk-lista { grid-column: 1; }
  .dk-lista { gap: 26px; }
  .dk-lista h3 { font-size: 1.25rem; }
}
@container dk (max-width: 600px) {
  .dk-barra { height: 40px; }
  .dk-nombre { font-size: 14px; }
  .dk-barra-der, .dk-lado, .dk-bajo { display: none; }
  .dk-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .dk-centro { padding: 14px; gap: 12px; }
  .dk-etq { font-size: 12px; }
  .dk-tit { font-size: 18px; }
  .dk-marca { font-size: 12px; }
  .dk-metricas > div { padding: 9px 10px; }
  .dk-metricas span { font-size: 12px; }
  .dk-metricas b { font-size: 13px; }
  .dk-grafico { flex: none; height: 150px; }
  .dk-g-cab b { font-size: 13px; }
  .dk-g-cab span { font-size: 12px; }
  .dk-chat { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; padding: 14px; border-left: 0; border-top: 1px solid var(--filete); }
  .dk-hueco { grid-row: 1 / span 4; width: 124px; margin: 0; }
  .dk-chat > b { font-size: 14px; }
  .dk-chat > p, .dk-burbuja { font-size: 13px; }
  .dk-burbuja { justify-self: start; }
  .dk-chat small { font-size: 12px; }
}

/* ---------- Movimiento reducido: todo quieto, a la vista ---------- */
.rm .pr-tabla tbody tr, .rm .pr-registro .pr-tabla-archivo tbody tr { opacity: 1; transform: none; }
.rm .pr-tabla td.pr-peso i { transform: none; }
.rm .dk-cortina { display: none; }
.rm .dk-lista li::after { transform: none; }