/* Cotizaciones · la ficha de un proveedor (solo lectura). Resumen primero y el detalle plegado. Sin tablas anchas: listas y tarjetas que se acomodan solas
   (el celular primero). Variables de estilos.css; nada de colores sueltos; el estado siempre lleva texto. */
.pv { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.pv > * { min-width: 0; }
.pv .encabezado-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.pv-volver-nota { max-width: 28ch; }

/* Resumen: estado y cuatro datos */
.pv-chips { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.pv-chips .chip { white-space: normal; overflow-wrap: anywhere; }
.pv-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e3); margin: 0; }
.pv-datos > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; }
.pv-datos dt { font-size: 0.75rem; font-weight: 700; color: var(--tx-2); }
.pv-datos dd { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pv-datos strong { font-size: var(--paso-1); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pv-datos .pequeno { line-height: 1.35; overflow-wrap: anywhere; }
.pv-aviso { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; max-width: 70ch; }
.pv-aviso > .icono { flex: none; margin-top: 0.15em; }

/* Secciones plegables */
.pv-sec > summary { gap: var(--e2); }
.pv-sec > summary h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; font-size: var(--paso-1); font-weight: 300; line-height: 1.25; }
.pv-sec > summary h2 b { font-weight: 800; }
.pv-cuerpo { padding-top: var(--e3); }
.pv-cuerpo h3 { margin: 0; font-size: var(--paso-0); }
.pv-cuerpo p { max-width: 72ch; margin: 0; }

/* Datos: lista de pares */
.pv-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e3) var(--e5); margin: 0; }
.pv-dl > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pv-dl dt { font-size: 0.75rem; font-weight: 700; color: var(--tx-2); }
.pv-dl dd { margin: 0; font-size: var(--paso--1); font-weight: 600; overflow-wrap: anywhere; }

/* Listas */
.pv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.pv-lista > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem var(--e3); min-width: 0; overflow-wrap: anywhere; font-size: var(--paso--1); line-height: 1.45; }
.pv-etiqueta { flex: 0 0 9rem; font-weight: 700; color: var(--tx-2); }
.pv-filas > li { justify-content: space-between; padding-bottom: var(--e2); border-bottom: 1px solid var(--ln); }
.pv-filas > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pv-filas > li > span:first-child { flex: 1 1 18rem; min-width: 0; }
.pv-cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--e2) var(--e4); }
.pv-lista a:not(.boton), .pv-dl a:not(.boton) { min-height: 1.5rem; display: inline-block; line-height: 1.5rem; }

/* Historial: una tarjeta compacta por ronda */
.pv-rondas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.pv-ronda { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.pv-ronda-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-width: 0; overflow-wrap: anywhere; }
.pv-ronda-cab .chip { white-space: normal; text-align: left; }
.pv-ronda-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; overflow-wrap: anywhere; }
.pv-ronda p { margin: 0; overflow-wrap: anywhere; }
.pv-versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--paso--1); }
.pv-versiones > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem var(--e2); min-width: 0; overflow-wrap: anywhere; }
.pv-versiones .chip { white-space: normal; text-align: left; }
.pv-acciones { margin-top: var(--e1, 0.25rem); }
.pv-cambios .pequeno { white-space: normal; }

@media (max-width: 520px) {
  .pv-etiqueta { flex-basis: 100%; }
  .pv-ronda { padding: var(--e3); }
  .pv-datos strong { font-size: var(--paso-0); }
  .pv-volver-nota { max-width: none; }
}

/* Canales: qué funciona hoy (Seguimiento, Qué falta y el paso 5 del asistente de la ronda) */
.cot-canales-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--e3); }
.cot-canales-lista > li { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.cot-canales-lista p { margin: 0; overflow-wrap: anywhere; }
.cot-canales-lista .chip { white-space: normal; text-align: left; }
.cot-canales-falta { margin: var(--e2) 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--paso--1); line-height: 1.45; overflow-wrap: anywhere; }
.cot-canales-nota { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; max-width: 72ch; }
.cot-canales-nota > .icono { flex: none; margin-top: 0.15em; }
.cot-previa-envio { margin: var(--e2) 0 var(--e3); }

/* El nombre del proveedor en la cabecera de la matriz es un enlace a su ficha: con su subrayado y de 24 px de alto como mínimo */
a.rn-th-nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; line-height: 1.5rem; min-height: 1.5rem; }
a.rn-th-nombre:hover { text-decoration-thickness: 2px; }

/* «Volver a R-2026-001 · Matriz» puede ser largo: a 320 px se parte en dos líneas en vez de salirse de la pantalla */
.pv .encabezado-acciones .boton { white-space: normal; text-align: left; max-width: 100%; height: auto; }

/* En el área angosta la matriz es una lista de tarjetas y su encabezado queda recortado: el enlace de ahí no debe poder enfocarse sin verse (el de «Ver la ficha» del detalle sí queda) */
@container principal (max-width: 599px) {
  .rn-tabla thead a[data-ficha-proveedor] { display: none; }
}