/* =====================================================================
   mesa.css — la mesa de la red: efectividad comparada. [D-193 · v9.22.0]
   ---------------------------------------------------------------------
   REGLA DE ESTA HOJA: ni un hex. Todo sale de psf-tokens.css — es la
   condición para que el modo de alto contraste [D-108] y el tema oscuro
   alcancen también a esta página. Prefijo .psf-mesa, y solo .psf-mesa.

   LOS COLORES COMUNICAN, NO DECORAN [diseño §3.4]:
     · --pf-ok    barra que mejora respecto a placebo, con significación.
     · --pf-warn  barra que empeora respecto a placebo, con significación.
     · sin relleno, borde --pf-ink-faint: el intervalo cruza el nulo.
     · --pf-accent  únicamente el estado «fijado», que es interacción.
   ===================================================================== */

/* ---------------- mandos: elegir desenlace ---------------- */
.psf-mesa__mandos{
	display:grid; gap:var(--pf-s-6);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
	margin:0 0 var(--pf-s-8);
}
.psf-mesa__familia{ min-width:0; }
.psf-mesa__familia-t{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-label); text-transform:uppercase;
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-1);
}
.psf-mesa__familia-s{
	margin:0 0 var(--pf-s-3);
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
}
.psf-mesa__chips{ display:flex; flex-wrap:wrap; gap:var(--pf-s-2); }
.psf-mesa__chip{
	border:1px solid var(--pf-line); border-radius:var(--pf-r-pill);
	background:var(--pf-surface); color:var(--pf-ink);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	padding:8px 14px; min-height:var(--pf-tap); cursor:pointer;
}
.psf-mesa__chip:hover{ background:var(--pf-brand-tint); border-color:var(--pf-brand-line); }
.psf-mesa__chip:focus-visible{ outline:2px solid var(--pf-accent); outline-offset:2px; }
.psf-mesa__chip[aria-pressed="true"]{
	background:var(--pf-brand); border-color:var(--pf-brand);
	color:var(--pf-surface); font-weight:600;
}

/* ---------------- fármacos fijados ---------------- */
.psf-mesa__fijados{
	border-top:1px solid var(--pf-line); border-bottom:1px solid var(--pf-line);
	padding:var(--pf-s-3) 0; margin:0 0 var(--pf-s-6);
}
.psf-mesa__fijados-lbl{
	margin:0; font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
}
.psf-mesa__cuenta{ font-family:var(--pf-mono); color:var(--pf-ink); font-weight:600; }
.psf-mesa__fijados-ayuda{ color:var(--pf-ink-faint-tx); }
.psf-mesa__pins{
	display:flex; flex-wrap:wrap; gap:var(--pf-s-2);
	list-style:none; margin:var(--pf-s-2) 0 0; padding:0;
}
.psf-mesa__pin{
	display:inline-flex; align-items:center; gap:var(--pf-s-2);
	border:1px solid var(--pf-accent); border-radius:var(--pf-r-pill);
	background:var(--pf-accent-tint); color:var(--pf-accent-tx);
	font-size:var(--pf-fs-small); padding:6px 6px 6px 14px;
}
.psf-mesa__pin-x{
	border:0; background:transparent; cursor:pointer; line-height:1;
	color:var(--pf-accent-tx); font-size:var(--pf-fs-body);
	width:32px; height:32px; border-radius:var(--pf-r-pill);
}
.psf-mesa__pin-x:hover{ background:var(--pf-surface); }
.psf-mesa__pin-x:focus-visible{ outline:2px solid var(--pf-accent); outline-offset:1px; }

/* ---------------- el gráfico ---------------- */
.psf-mesa__t{
	font-family:var(--pf-sans); font-size:var(--pf-fs-h3);
	color:var(--pf-ink); margin:0 0 var(--pf-s-1);
}
.psf-mesa__sub{
	margin:0 0 var(--pf-s-4);
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft); max-width:62ch;
}
.psf-mesa__grafico{ margin:0 0 var(--pf-s-4); }
.psf-mesa__eje{
	display:grid; align-items:end; gap:var(--pf-s-2);
	grid-template-columns:2.4rem minmax(7rem,10.5rem) minmax(0,1fr) 5.6rem;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
	border-bottom:1px solid var(--pf-line);
	padding:0 var(--pf-s-2) var(--pf-s-1); margin:0 0 var(--pf-s-2);
}
.psf-mesa__eje-m{ text-align:right; }
.psf-mesa__eje-lbl{ text-align:right; }
.psf-mesa__eje-c{ position:relative; display:block; height:1.2em; min-width:0; }
.psf-mesa__eje-lo{ position:absolute; left:0; }
.psf-mesa__eje-hi{ position:absolute; right:0; }
.psf-mesa__eje-nulo{
	position:absolute; transform:translateX(-50%);
	color:var(--pf-ink-soft); white-space:nowrap;
}

.psf-mesa__fila{
	display:grid; align-items:center; gap:var(--pf-s-2);
	grid-template-columns:2.4rem minmax(7rem,10.5rem) minmax(0,1fr) 5.6rem;
	width:100%; text-align:left; cursor:pointer;
	border:0; border-radius:var(--pf-r-sm); background:transparent;
	padding:5px var(--pf-s-2); min-height:38px;
	font-family:var(--pf-sans); color:var(--pf-ink);
}
.psf-mesa__fila:hover{ background:var(--pf-paper-alt); }
.psf-mesa__fila:focus-visible{ outline:2px solid var(--pf-accent); outline-offset:-2px; }
.psf-mesa__fila[aria-pressed="true"]{
	background:var(--pf-accent-tint);
	box-shadow:inset 3px 0 0 var(--pf-accent);
}
.psf-mesa__puesto{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); text-align:right;
}
.psf-mesa__nombre{
	font-size:var(--pf-fs-small); overflow-wrap:anywhere;
}
.psf-mesa__fila[aria-pressed="true"] .psf-mesa__nombre{ font-weight:600; }

/* El carril, con la línea del nulo dentro */
.psf-mesa__carril{
	position:relative; height:20px; min-width:0;
	background:var(--pf-paper-alt); border-radius:var(--pf-r-sm);
}
.psf-mesa__nulo{
	position:absolute; top:-3px; bottom:-3px; width:1px;
	background:var(--pf-ink-faint);
}
.psf-mesa__ic{
	position:absolute; top:9px; height:2px;
	background:var(--pf-ink-faint);
}
.psf-mesa__ic::before,.psf-mesa__ic::after{
	content:""; position:absolute; top:-4px; width:1px; height:10px;
	background:var(--pf-ink-faint);
}
.psf-mesa__ic::before{ left:0; }
.psf-mesa__ic::after{ right:0; }
/* Extremo que se sale del eje: sin tope. La barra llega al borde y sigue. */
.psf-mesa__ic--abre-i::before{ display:none; }
.psf-mesa__ic--abre-d::after{ display:none; }
.psf-mesa__pt{
	position:absolute; top:4px; width:12px; height:12px; margin-left:-6px;
	border-radius:var(--pf-r-pill); border:2px solid var(--pf-ink-faint);
	background:var(--pf-surface);
}
.psf-mesa__fila--mejor .psf-mesa__pt{ border-color:var(--pf-ok); background:var(--pf-ok); }
.psf-mesa__fila--peor  .psf-mesa__pt{ border-color:var(--pf-warn); background:var(--pf-warn); }
.psf-mesa__fila--mejor .psf-mesa__ic,
.psf-mesa__fila--mejor .psf-mesa__ic::before,
.psf-mesa__fila--mejor .psf-mesa__ic::after{ background:var(--pf-ok); }
.psf-mesa__fila--peor .psf-mesa__ic,
.psf-mesa__fila--peor .psf-mesa__ic::before,
.psf-mesa__fila--peor .psf-mesa__ic::after{ background:var(--pf-warn); }
/* Sin significación: punto hueco. Es la señal de que el orden no manda. */
.psf-mesa__fila--nula .psf-mesa__pt{ background:var(--pf-surface); border-style:dashed; }

.psf-mesa__cifra{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink); text-align:right; white-space:nowrap;
}
.psf-mesa__detalle{
	grid-column:1/-1;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); padding:0 0 0 2.6rem;
}
.psf-mesa__flag{
	display:inline-block; margin-left:var(--pf-s-2);
	font-family:var(--pf-sans); color:var(--pf-ink-faint-tx);
}

.psf-mesa__falta, .psf-mesa__fuente{
	margin:0 0 var(--pf-s-2);
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); max-width:74ch;
}

/* ---------------- el trueque ---------------- */
.psf-mesa__trueque{
	margin:var(--pf-s-12) 0 0; padding:var(--pf-s-6) 0 0;
	border-top:1px solid var(--pf-line);
}
.psf-mesa__trueque-caja{ overflow-x:auto; margin:0 0 var(--pf-s-6); }
.psf-mesa__tabla{
	border-collapse:collapse; width:100%; min-width:44rem;
	font-size:var(--pf-fs-small);
}
.psf-mesa__tabla th, .psf-mesa__tabla td{
	border:1px solid var(--pf-line); padding:var(--pf-s-2);
	text-align:center; vertical-align:middle;
}
.psf-mesa__tabla thead th{
	background:var(--pf-paper-alt); font-family:var(--pf-sans);
	font-size:var(--pf-fs-micro); font-weight:600; color:var(--pf-ink-soft);
	line-height:1.2;
}
/* La columna del fármaco se queda quieta al desplazar la tabla a lo ancho:
   trece columnas no caben y sin esto no se sabe de quién es la fila. */
.psf-mesa__tabla tbody th{
	position:sticky; left:0; z-index:1;
	text-align:left; background:var(--pf-paper-alt); white-space:nowrap;
	font-weight:600; color:var(--pf-ink);
	box-shadow:1px 0 0 var(--pf-line);
}
.psf-mesa__tabla thead th:first-child{
	position:sticky; left:0; z-index:2;
	box-shadow:1px 0 0 var(--pf-line);
}
.psf-mesa__celda-p{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); display:block; white-space:nowrap; }
.psf-mesa__celda-v{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); display:block; }
.psf-mesa__celda--alto{ background:var(--pf-ok-tint); }
.psf-mesa__celda--medio{ background:var(--pf-surface); }
.psf-mesa__celda--bajo{ background:var(--pf-warn-tint); }
.psf-mesa__celda--nula .psf-mesa__celda-p{ color:var(--pf-ink-faint-tx); font-style:italic; }
.psf-mesa__celda--sin{ color:var(--pf-ink-faint-tx); }

.psf-mesa__lecturas{ display:grid; gap:var(--pf-s-3); }
.psf-mesa__lectura{
	border-left:3px solid var(--pf-accent);
	background:var(--pf-brand-tint);
	padding:var(--pf-s-3) var(--pf-s-4);
	border-radius:0 var(--pf-r-sm) var(--pf-r-sm) 0;
	font-size:var(--pf-fs-small); color:var(--pf-ink);
}

/* ---------------- cómo se lee ---------------- */
.psf-mesa__leer{ margin:var(--pf-s-12) 0 var(--pf-s-8); }
.psf-mesa__leer-l{
	margin:0; padding:0 0 0 var(--pf-s-4);
	display:grid; gap:var(--pf-s-3);
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft); max-width:74ch;
}

/* ---------------- teléfono ---------------- */
@media (max-width:760px){
	/* Tres filas por fármaco: rótulo y cifra arriba, carril debajo, detalle al
	   pie. Sin colocar cada celda a mano, la cifra caía en la fila del carril
	   y quedaba a la izquierda, lejos de su barra. */
	.psf-mesa__fila, .psf-mesa__eje{
		grid-template-columns:2rem minmax(0,1fr) 5.4rem;
		row-gap:2px;
	}
	.psf-mesa__puesto{ grid-row:1; grid-column:1; }
	.psf-mesa__nombre{ grid-row:1; grid-column:2; }
	.psf-mesa__cifra{  grid-row:1; grid-column:3; }
	.psf-mesa__carril{ grid-row:2; grid-column:1/-1; }
	.psf-mesa__detalle{ grid-row:3; grid-column:1/-1; padding-left:0; white-space:normal; }
	.psf-mesa__eje-m{ grid-row:1; grid-column:1/3; text-align:left; }
	.psf-mesa__eje-lbl{ grid-row:1; grid-column:3; }
	.psf-mesa__eje-c{ grid-row:2; grid-column:1/-1; }
	.psf-mesa__tabla{ min-width:34rem; }
}