/* Dos columnas: árbol | contexto y notas. El histórico es un panel lateral aparte (historico.css). */
.site-shell { max-width: 2300px; }
.topbar { padding-left: clamp(16px, 2vw, 38px); padding-right: clamp(16px, 2vw, 38px); }
main { padding-left: clamp(12px, 1.3vw, 28px); padding-right: clamp(12px, 1.3vw, 28px); }
main { padding-top: 24px; }
/* Proporción 2/3 | 1/3 en todos los anchos de escritorio; la columna de contexto y notas no baja de 300 px. */
.workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.workspace > * { min-width: 0; }
/* Sin caso abierto, la columna de contexto y notas está oculta y la bienvenida ocupa todo el ancho. */
.workspace:has(> .sidebar.hidden) { grid-template-columns: minmax(0, 1fr); }
.flow-column { min-width: 0; }
/* «Protocolo activo» y «Contexto» miden 80 px como mínimo y cada una crece según su propio
   contenido (tamaño del texto, muchas acciones globales, pantallas estrechas o los datos del contexto desplegados). */
.flow-toolbar { min-height: 80px; padding: 12px 15px; flex-wrap: wrap; }
.toolbar-buttons { justify-content: flex-start; }
/* Columna de contexto y notas: fija al desplazar; si no cabe en la pantalla, se desplaza por dentro. */
.sidebar { position: sticky; top: 15px; min-width: 0; max-height: calc(100vh - 30px); overflow-y: auto; }
.summary-card { min-height: 80px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
/* La cabecera ocupa todo el interior de la tarjeta minimizada (80 px menos 24 de relleno y 2 de borde) y centra en él
   título y botón: así no se mueven al desplegar o minimizar los datos (la tarjeta solo centra cuando le sobra alto). */
.summary-head { min-height: 54px; align-items: center; }
/* La columna es flex y de alto limitado: por defecto la tarjeta no se encoge y, si no cabe todo, se desplaza la columna.
   En escritorio, con el registro plegado, sí se encoge (ver más abajo). */
.sidebar .summary-card { flex-shrink: 0; }
.summary-empty { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.notes-sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
/* Título «Añadir nota», pegado a su casilla (el hueco lo da el bloque). */
.notes-title { font-size: 1.1875rem; font-weight: 700; margin: 0; letter-spacing: -.3px; color: var(--ink); }
.notes-title label { font: inherit; color: inherit; }
.case-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; min-height: 80px; padding: 2px; }
.case-item { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-width: 0; }
.case-item:hover { background: var(--tint); border-color: var(--deep); }
.case-item.selected { background: var(--surface-2); border-color: var(--deep); box-shadow: inset 3px 0 var(--brand); }
.case-item-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px; font-size: 0.875rem; }
.case-date { color: var(--muted); font-family: var(--f-mono); font-size: 0.78125rem; }
.case-info { color: var(--muted); font-size: 0.78125rem; overflow-wrap: anywhere; }
.case-status { color: var(--warn-fg); background: var(--warn-bg); border-radius: 6px; padding: 2px 5px; font-weight: 750; font-size: 0.78125rem; }
.case-status.finalizada { background: var(--ok-bg); color: var(--ok); }
.cases-footnote, .empty-case-list { font-size: 0.78125rem; line-height: 1.55; color: var(--muted); margin-top: 15px; }
.empty-case-list { margin: 10px; }
.notes-sidebar { display: flex; flex-direction: column; gap: 18px; }
/* Registro del caso (solo lectura): desplegable plegado al cargar, separado por una línea fina. Desplegado, una caja
   de 400 px con barra vertical siempre visible, verde suave (--surface-2); con el caso finalizado, gris (--closed). */
.notes-log { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
/* Chromium envuelve el contenido del desplegable en ::details-content: también en columna, para que la casilla ocupe
   todo el ancho y, en escritorio, el alto libre. */
.notes-log::details-content { display: flex; flex-direction: column; }
.notes-log summary { cursor: pointer; font-size: 0.90625rem; font-weight: 700; color: var(--ink-2); border-radius: 6px; }
.notes-log summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#case-notes { width: 100%; height: 400px; max-height: 400px; resize: none; overflow-y: scroll; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--surface-2); color: var(--ink-2); font: 0.875rem/1.6 var(--f-body); }
#case-notes::placeholder { color: var(--muted); opacity: 1; }
#case-notes:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.notes-sidebar[data-estado="finalizada"] #case-notes { background: var(--closed); color: var(--closed-ink); }
.notes-sidebar[data-estado="finalizada"] #case-notes::placeholder { color: var(--closed-muted); }
/* Añadir nota: casilla de texto y botón «Añadir» bajo el histórico de notas (de solo lectura). */
.note-add { display: flex; flex-direction: column; gap: 6px; }
#note-input { width: 100%; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; }
#note-input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
#note-input:disabled { background: var(--surface-2); }
#btn-add-note { align-self: flex-end; border: 0; border-radius: 9px; padding: 10px 16px; font-weight: 750; color: var(--on-brand); background: var(--brand); }
#btn-add-note:hover:not(:disabled) { background: var(--brand-hover); }
#btn-add-note:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#btn-add-note:disabled { opacity: .5; cursor: not-allowed; }
.closed-message { background: var(--ok-bg); border: 1px solid var(--ok); border-radius: 10px; color: var(--ok); padding: 13px; font-size: 0.9375rem; }
.button-finish { border-color: var(--ok); }
.action-text { overflow-wrap: anywhere; }
.action-text ul, .action-text ol { padding-left: 20px; }

/* Escritorio (columna fija al desplazar, ratón o trackpad): la columna cabe en la ventana. Mide el alto visible menos
   lo que hay encima (cabecera y margen: la columna empieza a 110 px) y el pie fijo (20 px) con 10 px de aire; las notas
   ocupan el hueco que queda y se ajustan solas al cambiar el tamaño de la ventana o al desplegar el contexto.
   Con menos de 160 px para las notas, la columna vuelve a desplazarse por dentro. */
@media (min-width: 941px) and (hover: hover) and (pointer: fine) {
  .sidebar { height: calc(100vh - 140px); max-height: none; }
  /* Solo con el registro desplegado: plegado, la tarjeta de notas mide lo justo. */
  .notes-sidebar:has(> .notes-log[open]), .notes-log[open] { flex: 1 1 auto; }
  .notes-log[open]::details-content { flex: 1 1 auto; min-height: 0; }
  /* Base de 160 px (no las 14 filas del textarea) para que la columna pueda encogerlo; crece con el espacio libre. */
  #case-notes { flex: 1 1 auto; height: 160px; max-height: none; min-height: 160px; }
  /* Con el registro plegado, el «Registro de operador» no se encoge y, en ventanas bajas, cede espacio el contexto,
     cuyos datos se desplazan por dentro. Desplegado el registro, el contexto
     recupera su alto y es la columna la que se desplaza. */
  .notes-sidebar { flex-shrink: 0; }
  /* La lista no baja de 200 px (o de su alto, si es menor): por debajo, la columna vuelve a desplazarse. El mínimo va en
     la tarjeta, que es la que se encoge: 200 px de lista más 93 px fijos (relleno 24, borde 2, cabecera 54 y separación 13). */
  .sidebar:has(.notes-log:not([open])) .summary-card { flex-shrink: 1; min-height: calc-size(max-content, min(size, 293px)); }
  .sidebar:has(.notes-log:not([open])) #case-summary { min-height: 0; }
  /* Barra de los datos del contexto: invisible salvo con el ratón encima de la tarjeta o el foco dentro. Su hueco queda
     siempre reservado (scrollbar-gutter), así que mostrarla u ocultarla no mueve ni estrecha los datos. */
  #case-summary { scrollbar-gutter: stable; scrollbar-color: transparent transparent; }
  .summary-card:hover #case-summary, .summary-card:focus-within #case-summary { scrollbar-color: var(--line-strong) transparent; }
}

/* Menor anchura: reorganizar sin cortar preguntas ni textarea. */
@media (max-width: 1550px) {
  .workspace { gap: 10px; }
  .notes-sidebar { padding: 12px; }
  .sidebar .summary-card { padding: 12px; }
}
@media (max-width: 940px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; max-height: none; overflow: visible; }
}