/* Kit de la aplicación: copia literal del CSS del boceto aprobado (design/explorations/co-pilot-ai-boceto.html, v14;
   FD-001 kit de UI anfitrión, FD-002 letra del sistema). Lo propio de la aplicación va en app.css. */
:root {
  /* paleta base del kit */
  --green-95: #ECF5F4; --green-80: #B4E5DD; --green-50: #009B86; --green-40: #078272; --green-30: #085D52;
  --red-95: #FAF0F0; --red-80: #F3CCCD; --red-30: #9B1F20;
  --yellow-95: #FAF4E8; --yellow-80: #F5E4BA; --yellow-30: #B98300; --ambar-a11y: #8A6200;
  --blue-95: #EBF1FA; --blue-50: #518DF7; --blue-40: #1E437B;
  --white: #FFFFFF; --gray-95: #F3F3F3; --gray-90: #E5E5E5; --gray-80: #D4D4D4; --gray-40: #626467; --gray-30: #484A51; --gray-10: #202124;
  --stone-50: #F0EEEE;
  /* papeles que usa esta página */
  --bg: var(--stone-50); --panel: var(--white); --surface: var(--gray-95); --fg: var(--gray-10); --muted: var(--gray-40);
  --line: var(--gray-90); --line-2: var(--gray-80);
  --accion: var(--green-40); --accion-pulsada: var(--green-30); --enlace: var(--green-30); --resalte: var(--green-50); --resalte-fill: var(--green-95);
  --ok: var(--green-30); --ok-fill: var(--green-95);
  --atencion: var(--ambar-a11y); --atencion-fill: var(--yellow-95); --atencion-line: var(--yellow-80); --uso-alto: var(--yellow-30);
  --activo: var(--blue-40); --activo-icono: var(--blue-50); --activo-fill: var(--blue-95);
  --error: var(--red-30); --error-fill: var(--red-95);
  --sombra: 0 8px 24px rgba(32, 33, 36, .16);
  /* Letra: la del sistema (SF Pro en Apple, como pide la HIG) por decisión del propietario, que no quiere Inter; Inter queda
     como alternativa en el selector de la cabecera de la página. Es una desviación del kit (Inter en el cuerpo). */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-card: 12px; --r-msg: 8px; --r-pill: 999px;
  color-scheme: light;
}

* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font: 14px/20px var(--sans); padding-inline: 16px; padding-block: 20px 40px; -webkit-font-smoothing: antialiased }
.wrap { max-width: 1360px; margin: 0 auto; display: grid; gap: 16px }
h1 { font: 600 24px/28px var(--display); margin: 0 }
h2 { font: 600 14px/20px var(--sans); margin: 0; color: var(--fg) }
p { margin: 0 }
.intro { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center }
.intro p { color: var(--muted); max-width: 90ch; flex-basis: 100% }
.letra { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--line) }
.letra button { all: unset; cursor: pointer; font: 500 12px/16px var(--sans); padding: 4px 10px; min-height: 24px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: var(--r-pill); color: var(--muted) }
.letra button[aria-pressed="true"] { background: var(--panel); color: var(--fg) }
.letra button:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }
.tag-ej { font: 600 12px/16px var(--sans); color: var(--atencion); background: var(--atencion-fill); padding: 4px 10px; border-radius: var(--r-pill) }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }

/* botones: cápsula, Inter 500, la pulsación cambia el color (no la opacidad) */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 500 14px/20px var(--sans); white-space: nowrap }
.btn:hover { background: var(--surface) }
.btn:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }
.btn.borde { border-color: var(--resalte); color: var(--enlace) }
.btn.borde:hover { background: var(--resalte-fill) }
.btn.prim { background: var(--accion); border-color: var(--accion); color: var(--white) }
.btn.prim:hover { background: var(--accion-pulsada); border-color: var(--accion-pulsada) }
.ico { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 18px }
.ico:hover { background: var(--surface); color: var(--fg) }
.ico:focus-visible { outline: 2px solid var(--accion) }
.ico svg { width: 16px; height: 16px }
.ico:disabled { color: var(--line-2); cursor: default; background: none }
.ico-grupo { display: flex; gap: 2px }

/* ---------------- aplicación ---------------- */
.app { display: grid; grid-template-columns: minmax(220px, 2fr) 10fr; height: 820px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--bg) }

/* barra lateral */
.lateral { background: var(--panel); border-right: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0 }
.lat-cab { padding: 16px 12px 8px; display: grid; gap: 8px }
.marca { font: 600 17px/24px var(--display); display: flex; align-items: center; gap: 8px; padding-left: 4px }
.marca i { width: 20px; height: 20px; border-radius: 6px; background: var(--accion); display: block }
.todo { all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-msg); font: 500 14px/20px var(--sans) }
.todo:hover { background: var(--surface) }
.todo[aria-current="true"] { background: var(--resalte-fill); color: var(--ok); font-weight: 600 }
.cuenta, .ses .n { background: var(--atencion-fill); color: var(--atencion); border-radius: var(--r-pill); font: 600 12px/16px var(--sans); padding: 2px 8px; font-variant-numeric: tabular-nums }
.lista { overflow: auto; padding: 4px 8px 8px; display: grid; gap: 16px; align-content: start }
.grupo { display: grid; gap: 2px }
.grupo-n { font: 600 12px/16px var(--sans); color: var(--muted); padding: 4px 8px }
.ses { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 8px; border-radius: var(--r-msg) }
.ses:hover { background: var(--surface) }
.ses[aria-current="true"] { background: var(--resalte-fill) }
.ses .sim { grid-column: 1; grid-row: 1 / span 2 }
.ses .nom { grid-column: 2; grid-row: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ses .n { grid-column: 3; grid-row: 1 }
.ses .meta { grid-column: 2 / span 2; grid-row: 2; font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ses.espera .nom { font-weight: 600 }
.leyenda { border-top: 1px solid var(--line); padding: 10px 12px; font-size: 12px; line-height: 16px; color: var(--muted) }
.leyenda summary { cursor: pointer; min-height: 24px; display: flex; align-items: center }
.leyenda > div { display: grid; gap: 6px; padding-top: 6px }
.leyenda span { display: flex; gap: 8px; align-items: center }

/* símbolos de estado: forma + color + texto (el color nunca va solo). Lenguaje de estado del kit:
   activo = azul, atención = ámbar, error = rojo, hecho = verde, parado = gris */
.sim { width: 20px; height: 20px; display: grid; place-items: center }
.sim svg { width: 16px; height: 16px; display: block }
.s-trabaja { color: var(--activo-icono) } .s-trabaja svg { animation: gira 1.4s linear infinite }
.s-espera { color: var(--atencion) } .s-espera svg { animation: late 1.6s ease-in-out infinite }
.s-parada { color: var(--muted) } .s-off { color: var(--error) } .s-fin { color: var(--accion) }
@keyframes gira { to { transform: rotate(360deg) } }
@keyframes late { 50% { transform: scale(1.15) } }
@media (prefers-reduced-motion: reduce) { .sim svg { animation: none !important } }
.estado-pill { display: inline-flex; gap: 6px; align-items: center; font: 600 12px/16px var(--sans); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap }
.ep-espera { background: var(--atencion-fill); color: var(--atencion) } .ep-trabaja { background: var(--activo-fill); color: var(--activo) }
.ep-parada { background: var(--surface); color: var(--gray-30) } .ep-off { background: var(--error-fill); color: var(--error) } .ep-fin { background: var(--ok-fill); color: var(--ok) }

/* zona de la sesión */
/* Sistema de marcos (HIG de Apple, con las medidas del kit): un solo lienzo de piedra; encima, tarjetas blancas de un solo
   tipo (radio 12, trazo de 1 px, sin sombra), separadas siempre por el mismo hueco de 12 px, también del borde; las tarjetas
   de una misma fila tienen la misma altura y sus bordes superior e inferior alineados; dentro de una tarjeta, un grupo
   interior lleva radio concéntrico (8) y fondo gris, sin segundo trazo; los controles de una barra van en una sola línea. */
.trabajo { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--bg) }
.franja { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; padding: 12px 12px 0; align-items: stretch; min-width: 0; position: relative; z-index: 3 }
.tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; min-width: 0 }
.cabecera { display: grid; grid-template-columns: fit-content(340px) minmax(0, 1fr); gap: 12px; align-items: stretch }
.cab-izq { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding: 0 2px }
.cab-izq .cab-fila:first-child { flex-wrap: wrap; row-gap: 4px }
.franja .estado-pill { padding: 2px 8px }
.cab-fila { display: flex; gap: 8px; align-items: center; min-width: 0 }
.cab-fila.meta-fila { flex-wrap: wrap; row-gap: 4px }
.cab-fila b { font: 600 17px/22px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cab-meta { font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.cab-sub { display: flex; gap: 8px; font-size: 12px; color: var(--muted) }
.acciones { display: flex; gap: 6px; flex-wrap: nowrap }
.acciones .btn { min-height: 24px; padding: 2px 10px; font-size: 12px; line-height: 16px }
.celda-btn { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0 }
.celda-btn:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }
.celda-btn.tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px }

/* fases: grupo interior de la cabecera (fase y paso · barra · avance y «ver fases») */
.estado-ancho { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-msg); background: var(--surface); box-shadow: inset 0 0 0 1px transparent }
.estado-ancho:hover { box-shadow: inset 0 0 0 1px var(--resalte) }
.estado-ancho[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--resalte); background: var(--resalte-fill) }
.e-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums }
.e-fila { flex-wrap: wrap; row-gap: 4px }
.e-fila > span:first-child { min-width: 0 }
.e-fila b { font-size: 14px; line-height: 20px; color: var(--fg) }
.e-ver { font-weight: 500; color: var(--enlace); white-space: nowrap }
.pasos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px }
.paso { height: 6px; border-radius: var(--r-pill); background: var(--gray-90) }
.estado-ancho .paso:not(.hecho):not(.actual) { background: var(--line-2) }
.paso.hecho { background: var(--resalte) } .paso.actual { background: var(--fg) }

/* recursos: la tarjeta es el widget (un solo marco); anillos con su nombre debajo, como los widgets de Apple */
.rec-celda { display: block }
.rec-celda:hover, .rec-celda[aria-expanded="true"] { border-color: var(--resalte) }
.widget { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; height: 100% }
/* cifras: anillo pequeño sin texto + valor y nombre al lado (patrón compacto de los widgets de Apple) */
.anillos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: center }
.anillo-it { display: flex; align-items: center; gap: 6px; min-width: 0 }
.a-txt { display: grid; min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted) }
.a-txt b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
.a-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.w-det { color: var(--enlace); font-size: 17px; line-height: 1 }
.anillo { --c: var(--resalte); flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--panel) 68%, transparent 69% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--gray-90) 0) }
.anillo.alto { --c: var(--uso-alto) }
/* entre 1001 y 1199 px el tercio de recursos no da para anillo + texto: queda la cifra, que es lo que se lee */
@media (max-width: 1199px) { .anillo { display: none } .cabecera { grid-template-columns: max-content minmax(0, 1fr) } .cab-izq .cab-fila:first-child { max-width: 250px } }
/* ordenadores: nombre a la izquierda; cifras alineadas a la derecha, con la etiqueta en gris y el valor en tinta;
   el rojo solo en el problema, no en toda la línea */
.maq-pts { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: baseline; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); padding-top: 6px }
.mq { display: contents }
.mq-n { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.mq-n::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accion); margin-right: 8px; vertical-align: 1px }
.mq.off .mq-n::before { background: none; box-shadow: inset 0 0 0 1.5px var(--error) }
.mq-v { text-align: right; white-space: nowrap; color: var(--fg); font-weight: 500 }
.mq-v span { color: var(--muted); font-weight: 400; margin-right: 4px }
.mq-v.ancho { grid-column: 2 / -1; color: var(--error) }

.desplegable { position: absolute; top: 100%; right: 12px; margin-top: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sombra); padding: 16px; display: grid; gap: 12px; width: min(420px, 100%); z-index: 5 }
.desplegable h3 { margin: 0; font: 600 17px/24px var(--display) }
.med { display: grid; gap: 4px }
.med .l { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums }
.med .l span { color: var(--muted); font-size: 12px }
.pista { height: 8px; background: var(--gray-90); border-radius: var(--r-pill); overflow: hidden }
.pista i { display: block; height: 100%; background: var(--resalte); border-radius: var(--r-pill) }
.pista i.alto { background: var(--uso-alto) }
.datos { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted) }
.datos b { color: var(--fg); font-weight: 600 }
.maqs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.maq { display: grid; gap: 4px; font-size: 12px; line-height: 16px }
.maq .mn { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; line-height: 20px }
.maq .mn span { font-weight: 400; color: var(--muted); font-size: 12px }
.maq .fila { display: grid; grid-template-columns: 60px 1fr 36px; gap: 8px; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums }
.maq.off .mn span { color: var(--error) }

/* fases: panel de detalle y navegación (flota: lleva sombra) */
.fases { position: absolute; inset: 12px; z-index: 4; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sombra); display: grid; grid-template-rows: auto auto minmax(0, 1fr) }
.fases-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 0 12px 12px; border-bottom: 1px solid var(--line) }
.fases-pasos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px }
.fp { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; justify-items: center; padding: 8px 2px; border-radius: var(--r-msg); font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; min-width: 0 }
.fp:hover { background: var(--surface) }
.fp:focus-visible { outline: 2px solid var(--accion) }
.fp[aria-current="true"] { background: var(--resalte-fill); color: var(--fg); font-weight: 600 }
.fp .marca-f { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); border: 2px solid var(--line-2); color: var(--muted); background: var(--panel) }
.fp.hecha .marca-f { background: var(--accion); border-color: var(--accion); color: var(--white) }
.fp.actual .marca-f { border-color: var(--fg); color: var(--fg) }
.fp > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.fase-det { overflow: auto; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 32px; align-content: start }
.fase-det .titulo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center }
.fase-det .titulo h3 { margin: 0; font: 600 20px/28px var(--display) }
.fase-det .titulo .fw { font-size: 12px; color: var(--muted) }
.bloque-f { display: grid; gap: 6px; align-content: start }
.bloque-f h4 { margin: 0; font: 600 12px/16px var(--sans); color: var(--muted) }
.bloque-f ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px }
.chk::before { content: "○"; color: var(--muted); margin-right: 8px }
.chk.si::before { content: "✓"; color: var(--ok); font-weight: 600 }
.gate-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.vacio-f { color: var(--muted) }
.enlaces-doc { display: flex; flex-wrap: wrap; gap: 4px 12px }
.enlace { all: unset; cursor: pointer; color: var(--enlace); font-weight: 500 }
.enlace:hover { text-decoration: underline; text-underline-offset: 2px }
.enlace:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }

/* cuerpo: tarjetas blancas sobre piedra */
.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 0; position: relative }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0 }
.sec-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; min-height: 48px }
.sec-cab .n { font-size: 12px; color: var(--muted) }
.sec-cuerpo { padding: 0 16px 14px; overflow: auto; min-height: 0 }

/* 1 · conversación */
.conv { grid-template-rows: auto minmax(0, 1fr) auto }
.chat { display: grid; gap: 12px; align-content: start }
.m { display: grid; gap: 4px; max-width: 88% }
.m .q { font: 600 12px/16px var(--sans); color: var(--muted) }
.m .t { padding: 10px 12px; border-radius: var(--r-card); background: var(--surface) }
.m.yo { justify-self: end } .m.yo .t { background: var(--resalte-fill) }
.m.app .t { box-shadow: inset 0 0 0 1px var(--resalte) }
.m .t .enlace { font-family: var(--mono); font-size: 13px }
.tool { font: 12px/16px var(--mono); color: var(--muted); display: flex; gap: 6px; padding-left: 4px }
.tool b { color: var(--ok) }
.tabla-res { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 16px; margin-top: 8px }
.tabla-res td { border-top: 1px solid var(--line-2); padding: 6px 6px; vertical-align: top }
.tabla-res td:first-child { font-weight: 600; white-space: nowrap }
.escribe { padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--muted) }
.escribe div { border: 1px dashed var(--line-2); border-radius: var(--r-msg); padding: 8px 12px }

/* 2 · te toca a ti + visor */
.der { display: grid; gap: 12px; min-height: 0; min-width: 0 }
.der.v-abierto { grid-template-rows: auto minmax(0, 1fr) }
.der.v-abierto .compacta .sec-cuerpo { max-height: 260px }
.der.v-min { grid-template-rows: minmax(0, 1fr) auto }
.der.v-cerrado, .der.v-ampliado { grid-template-rows: minmax(0, 1fr) }
.fichas { display: grid; gap: 8px; align-content: start }
.ficha { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 10px; background: var(--panel) }
.ficha.primera { border-color: var(--atencion-line) }
.f-cab { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center }
.f-cab .p { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums }
.primera .f-cab .p { background: var(--atencion-fill); color: var(--atencion) }
.f-cab .q { font-weight: 600 }
.f-que { color: var(--muted) }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chips span { font: 600 12px/16px var(--sans); background: var(--surface); color: var(--gray-30); padding: 4px 10px; border-radius: var(--r-pill) }
.chips span.urg { background: var(--atencion-fill); color: var(--atencion) }
.ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px }
.op { all: unset; box-sizing: border-box; cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 10px 12px; display: grid; gap: 4px; align-content: start; font-weight: 600; background: var(--panel) }
.op:hover { background: var(--surface) }
.op:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }
.op.rec-op { border-color: var(--resalte); background: var(--resalte-fill) }
.op.rec-op:hover { background: var(--green-80) }
.op small { font-weight: 400; color: var(--muted); font-size: 12px; line-height: 16px }
.op .rec { font: 600 12px/16px var(--sans); color: var(--ok) }
.libre { display: flex; gap: 8px }
.libre input { flex: 1; min-width: 0; font: 14px/20px var(--sans); color: var(--fg); padding: 6px 14px; min-height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--panel) }
.libre input:focus { border-color: var(--resalte); outline: 1px solid var(--resalte) }
.hechas { font-size: 12px; line-height: 16px; color: var(--muted); display: grid; gap: 4px; padding-top: 4px }
.hechas div::before { content: "✓ "; color: var(--ok); font-weight: 600 }
.vacio { color: var(--ok); font-weight: 600 }
/* «Te toca a ti» compacta cuando el visor está abierto: una línea por ficha, se despliega al pulsar */
.compacta .ficha { padding: 8px 12px; gap: 8px }
.compacta .ficha:not(.abierta) .f-que, .compacta .ficha:not(.abierta) .chips, .compacta .ficha:not(.abierta) .ops, .compacta .ficha:not(.abierta) .libre { display: none }
.compacta .f-cab { cursor: pointer }

/* visor de documentos */
.visor { grid-template-rows: auto auto minmax(0, 1fr) }
.der.v-ampliado .visor { position: absolute; inset: 12px; z-index: 2; box-shadow: var(--sombra) }
.pestanas { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); overflow-x: auto }
.pest { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid transparent; font: 500 14px/20px var(--sans); color: var(--muted); white-space: nowrap }
.pest:hover { background: var(--surface) }
.pest:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px }
.pest[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); color: var(--fg); font-weight: 600 }
.doc { padding: 16px 20px; max-width: 72ch; display: grid; gap: 10px; line-height: 22px }
.doc h3 { margin: 4px 0 0; font: 600 20px/28px var(--display) } .doc h4 { margin: 4px 0 0; font: 600 14px/20px var(--sans) }
.doc ul { margin: 0; padding-left: 20px }
.doc code { font-family: var(--mono); font-size: 12px; background: var(--surface); padding: 1px 5px; border-radius: 4px }
.doc .nota-doc { font-size: 12px; color: var(--muted) }
.visor-min { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 16px; font-weight: 600 }
.visor-min span { color: var(--muted); font-weight: 400; font-size: 12px }

/* inicio: todas las sesiones */
.inicio { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; overflow: auto }
.tabla { border-collapse: collapse; width: 100%; background: var(--panel) }
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line) }
.tabla th { font: 600 12px/16px var(--sans); color: var(--muted) }
.tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card) }

/* Ancho intermedio (760–1099 px: ventana partida, panel lateral del visor): se mantiene la disposición de escritorio.
   Barra lateral más estrecha; la franja pasa a dos filas (cabecera con fases, y recursos en una línea);
   la conversación y la columna derecha siguen lado a lado. */
@media (min-width: 760px) and (max-width: 1099px) {
  .app { grid-template-columns: 196px minmax(0, 1fr) }
  .franja { grid-template-columns: 1fr }
  .rec-celda .widget { flex-direction: row; align-items: center; gap: 16px }
  .rec-celda .anillos { flex: 1 1 0; min-width: 0 }
  .rec-celda .maq-pts { flex: 1.4 1 0; min-width: 0; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 12px }
  .fases-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .fase-det { grid-template-columns: 1fr }
}
/* Teléfono: todo en una columna */
@media (max-width: 759px) {
  .app { grid-template-columns: 1fr; height: auto }
  .lateral { border-right: 0; border-bottom: 1px solid var(--line) }
  .lista { max-height: 240px }
  .trabajo { grid-template-rows: auto auto }
  .franja { grid-template-columns: 1fr }
  .anillo { display: inline-block }
  .cabecera { grid-template-columns: 1fr }
  .acciones { flex-wrap: wrap }
  .cab-fila { flex-wrap: wrap }
  .cuerpo { grid-template-columns: 1fr }
  .conv .sec-cuerpo { max-height: 380px }
  .der.v-abierto, .der.v-min, .der.v-cerrado, .der.v-ampliado { grid-template-rows: auto }
  .der .sec-cuerpo { max-height: 420px }
  .der.v-ampliado .visor { position: static; box-shadow: none }
  .desplegable { position: static; width: auto; margin: 0 12px 12px; box-shadow: none }
  .fases { position: static; grid-column: 1 / -1; order: -1 }
  .fases-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .fase-det { grid-template-columns: 1fr }
  .maqs { grid-template-columns: 1fr }
}