/* sesiones.css — la pestaña "Sesiones" del panel Ver más (item A45).
 *
 * EL CARRUSEL (maestro → detalle) se mueve con `transform` y nada más. Animar `left` o
 * `width` fuerza layout en cada frame y se ve a tirones en un panel que además contiene
 * texto; `translateX` lo resuelve el compositor.
 *
 * Las dos vistas VIVEN A LA VEZ en el DOM: el detalle no se crea al entrar ni se destruye
 * al salir, solo se desplaza. Por eso lleva `aria-hidden` y por eso el foco se mueve a mano
 * en el JS — un lector de pantalla, sin eso, seguiría leyendo la lista que ya no se ve. */

/* LAS DOS VISTAS COMPARTEN CELDA DE GRID, y eso es lo que resuelve la altura.
 *
 * La primera versión ponía el detalle en `position: absolute; inset: 0`, y el detalle
 * heredaba la altura de la LISTA: con una sola sesión, la ficha salía recortada y con su
 * propio scroll dentro del panel. Dos scrolls en la misma columna es justo lo que no puede
 * pasar aquí — el panel es el único que se desplaza.
 *
 * Apiladas en la misma celda, la altura del carrusel es la de la vista más alta y NINGUNA
 * se recorta. De propina, el panel no da un salto de altura al entrar y salir del detalle. */
/* `min-width: 0` EN TODA LA CADENA, y no es cosmético: sin él el panel entero se estiraba.
 *
 * Un elemento de flex o de grid nace con `min-width: auto`, o sea que se NIEGA a encogerse
 * por debajo de su contenido. El resumen de la tarjeta va en una línea sin cortar, así que
 * empujaba la tarjeta, la lista, el panel y la ventana — y el `text-overflow: ellipsis` no
 * llegaba a aplicarse nunca, porque la caja crecía en vez de apretar. El recorte estaba
 * puesto desde el principio; lo que faltaba era dejar que la caja pudiera ser más estrecha
 * que su texto.
 *
 * `.ses-carrusel` es hijo de un flex (el cuerpo del panel) y `.ses-pane` lo es de este grid:
 * los dos necesitan la suya, porque basta con que un eslabón se niegue. */
.ses-carrusel {
  display: grid;
  min-width: 0;
  overflow: hidden; /* lo que sale se recorta contra el panel, no contra la ventana */
}

.ses-pane {
  grid-area: 1 / 1;
  min-width: 0;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

/* El detalle empieza fuera, a la derecha, y va DESPUÉS en el DOM: en la misma celda, el
   último pintado queda encima, así que tapa la lista sin necesidad de z-index. */
.ses-pane-detalle {
  transform: translateX(100%);
  background: var(--bg-panel);
  /* Invisible a los clics mientras está fuera: sigue en el DOM, y sin esto capturaría los
     clics de la lista que hay debajo. */
  visibility: hidden;
}

/* PUSH: la lista se va a la izquierda y el detalle entra. */
.ses-carrusel[data-vista="detalle"] .ses-pane-maestro {
  transform: translateX(-22%);
  opacity: .4;
}

.ses-carrusel[data-vista="detalle"] .ses-pane-detalle {
  transform: translateX(0);
  visibility: visible;
}

/* POP: el gesto inverso, sin declarar nada más — las dos reglas de arriba dejan de
   aplicarse y la transición corre hacia atrás con la misma curva. */

/* Al reponer el detalle tras un refresco no hay nada que animar: para quien mira, la vista
   no se ha movido. Dura un cuadro y se quita, para que volver sí deslice. */
.ses-sin-animar .ses-pane {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ses-pane {
    transition: none;
  }
}

.ses-estado {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* EL ESTADO VIVE EN LA TARJETA DE SU SESIÓN, no en una fila aparte: es un atributo suyo y
   cambia dentro de su propio item.

   Los colores son los de siempre, no inventados: verde = en curso, ámbar = ventana que se
   agota, gris = terminado y archivado. Y no chocan con la franja de identidad porque esta
   es un relleno y aquella un borde. */
.ses-estado-activa {
  background: var(--modo-activo-bg);
  color: var(--modo-activo);
}

.ses-estado-gracia {
  background: var(--warn-bg);
  color: var(--warn);
}

/* EN CLARO, EL PAR DEL SISTEMA SE QUEDA EN 3.76:1 (#9a7a12 sobre #fdf6dd) y esto es texto
 * pequeño en negrita, que NO cuenta como "texto grande": el mínimo sigue siendo 4.5.
 *
 * Se oscurece solo aquí y no en el token: --warn lo usan media docena de componentes más y
 * cambiarlo de golpe es otra revisión, no un efecto colateral de esta. */
:root[data-theme="light"] .ses-estado-gracia {
  color: #6d5609;
}

.ses-estado-historica {
  background: var(--bg-hover);
  color: var(--text-dim);
}

.ses-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-variant-numeric: tabular-nums; /* el número no baila al cambiar de segundo */
  color: var(--warn);
}

/* Sobre el blanco de la tarjeta, --warn se queda en 4.06:1. Mismo motivo que la píldora. */
:root[data-theme="light"] .ses-cuenta {
  color: #6d5609;
}

.ses-cuenta .ic {
  width: 13px;
  height: 13px;
}


/* --- La lista de tramos --------------------------------------------------- */

.ses-lista {
  display: flex;
  flex-direction: column;
  /* EL MISMO NUMERO, ESCRITO UNA VEZ. `--lp-gap` es el contrato de `listapartida.css`: las
     tarjetas van dentro de sus dos mitades, y sin declararlo saldrian pegadas (item B85). */
  --lp-gap: 8px;
  gap: var(--lp-gap);
  min-width: 0;
}

/* LA FRANJA DE COLOR A LA IZQUIERDA, como en el prototipo. No es adorno: el color es el
 * ASA de la sesión —"la morada"— y hace el trabajo que el código `S-0004` hace despacio.
 *
 * Los colores NO se inventan: son los tokens de TIPO DE NOTIFICACIÓN, que ya están elegidos
 * bien separados entre sí para distinguirse de un vistazo, y ya existen en los dos temas. */
.ses-c1 { --ses-c: var(--n-presupuesto); }
.ses-c2 { --ses-c: var(--n-transferencia); }
.ses-c3 { --ses-c: var(--n-cliente); }
.ses-c4 { --ses-c: var(--n-vinculo); }
.ses-c5 { --ses-c: var(--n-memoria); }

.ses-card {
  display: block;
  width: 100%;
  min-width: 0; /* el último eslabón: sin esto, la tarjeta crece con su resumen */
  text-align: left;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ses-c, var(--border-strong));
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out;
}

.ses-card:hover {
  background: var(--bg-hover);
}

.ses-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* LA ACTUAL: SOLO EL CONTORNO. Llevaba también un tinte de fondo y sobraba —con el borde ya
   se distingue—, así que la tarjeta se queda con el mismo fondo que las demás.
   La franja de la izquierda es de TODAS, porque dice cuál es; el contorno entero es de la
   actual, porque dice cuál está viva. */
.ses-card-actual {
  border-color: var(--ses-c, var(--accent));
}

.ses-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* EL CÓDIGO EN MONOESPACIADA, como en el prototipo: es un identificador que se cita en notas
   y métricas, no un título. La cifra fija ayuda a compararlos de un vistazo en la lista. */
.ses-codigo {
  font-family: ui-monospace, Consolas, "SF Mono", monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
}


/* "Último:" delante del resumen — lo preguntaste: sin la etiqueta, esa línea parecía el
   ASUNTO de la sesión (que es lo que iba ahí en el prototipo) y es otra cosa: el último
   mensaje visible del tramo, calculado al leer. */
.ses-card-texto-et {
  color: var(--text-dim);
  opacity: .8;
}

/* El resumen es UNA línea: la tarjeta es un índice, no una previsualización del chat. */
.ses-card-texto {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ses-card-nota {
  margin-top: 6px;
  padding: 5px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ses-card-nota b { font-weight: 700; color: var(--text); }
.ses-card-nota i { font-style: italic; }
.ses-card-nota s { text-decoration: line-through; }
.ses-card-nota code { font-family: var(--font-mono); font-size: .9em; }

.ses-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* EL CHIP VA CON BORDE Y NO CON FONDO, y es por contraste: --text-dim sobre --bg-hover da
 * 3.9:1, por debajo del mínimo para 11px. Sobre la tarjeta —que es el fondo que queda al
 * quitar el relleno— el mismo gris sube a 4.5:1 y pasa. El borde conserva el agrupado. */
.ses-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  /* Un chip no puede ensanchar la fila: el nombre de un departamento puede ser cualquier
     cosa. Se recorta él en vez de empujar a los demás. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ses-chip .ic {
  width: 12px;
  height: 12px;
}

/* Las reaperturas se destacan porque son una SEÑAL: un número alto dice que se dio por
   resuelto algo que no lo estaba. */
.ses-chip-aviso {
  border-color: var(--warn);
  color: var(--warn);
}

:root[data-theme="light"] .ses-chip-aviso {
  color: #6d5609; /* mismo motivo que la píldora de estado */
}

/* --- El detalle ----------------------------------------------------------- */

.ses-detalle-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* EL ÁREA TÁCTIL SON 44px, PERO EL FONDO NO.
 *
 * La primera versión ponía `min-height: 44px` en el propio botón, así que al pasar por
 * encima se pintaba un bloque de 44px de alto para un texto de 13: un pegote. Y el
 * `margin-left: -4px` metía la esquina izquierda bajo el recorte del carrusel, que es por
 * lo que redondeaba de un lado y del otro no.
 *
 * Ahora el fondo es la PÍLDORA que se ve, y los 44px los pone un pseudo-elemento invisible
 * centrado encima: el dedo sigue teniendo su objetivo y el ratón ve lo que toca. */
.ses-volver {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 5px 8px;
  border: 0;
  background: none;
  /* --accent-strong y no --accent: el verde de marca sobre el blanco del tema claro se
     queda en 3:1. La variante "strong" existe justo para el texto, y en oscuro también
     es la más legible de las dos. */
  color: var(--accent-strong);
  font-size: 13px;
  cursor: pointer;
  border-radius: 999px;
  transition: background .12s ease-out;
}

/* Los 44px de la norma táctil, sin fondo: se estira sobre el botón y no se ve. */
.ses-volver::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.ses-volver:hover {
  background: var(--bg-hover);
}

.ses-volver:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ses-detalle-titulo {
  font-size: 13px;
  font-weight: 600;
}

/* LOS SEPARADORES SON BORDES DE VERDAD, no huecos de un grid sobre fondo gris.
 *
 * La primera versión usaba el truco de `gap: 1px` con el contenedor pintado del color del
 * borde. Se ve mal y es por qué: ese hueco no es un borde, es espacio de layout, y su grosor
 * sale de redondear la POSICIÓN de cada fila a píxeles del dispositivo. Con filas de altura
 * fraccionaria, unas líneas caen en 1px y otras en 2px — y al lado, el borde del contenedor
 * siempre se pinta nítido, así que el desajuste canta.
 *
 * Con `border-bottom` todas las líneas salen del mismo sitio del modelo de caja y redondean
 * igual. Es la misma trampa del `getBoundingClientRect` fraccionario de los popovers. */
.ses-datos {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
}

.ses-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

.ses-dato:last-child {
  border-bottom: 0;
}

.ses-dato dt {
  font-size: 12px;
  color: var(--text-dim);
  flex: 0 0 auto;
}

.ses-dato dd {
  margin: 0;
  font-size: 12px;
  text-align: right;
  /* El valor puede ser largo (una fecha completa); parte por palabras antes que desbordar. */
  overflow-wrap: anywhere;
}

/* Cabecera y contador de notas de la sesión */
.ses-nota-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.ses-nota-cant {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Lista de notas de la sesión (idéntico a la consistencia de Memoria) */
.ses-notas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.ses-nota-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-panel);
  min-width: 0;
  transition: border-color .16s ease, background-color .16s ease;
}
.ses-nota-row:hover {
  border-color: var(--accent);
}
.ses-nota-body {
  width: 100%;
  min-width: 0;
}
.ses-nota-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  line-height: 1.45;
  font-size: 13px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ses-nota-text b { font-weight: 700; color: var(--text); }
.ses-nota-text i { font-style: italic; }
.ses-nota-text s { text-decoration: line-through; }
.ses-nota-text code { font-family: var(--font-mono); font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--bg-elev); }

.ses-nota-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.ses-nota-by {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
}
.ses-nota-by .ic {
  width: 12px;
  height: 12px;
}
.ses-nota-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
}
.ses-nota-actions .icon-btn {
  width: 26px;
  height: 26px;
}
.ses-nota-actions .ic {
  width: 14px;
  height: 14px;
}

/* Edición inline de una nota existente */
.ses-nota-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ses-nota-inline-pie {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.ses-nota-cancelar {
  min-height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.ses-nota-cancelar:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ses-nota-row .ses-nota-guardar {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

.ses-nota {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
}

.ses-nota-tit {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* SIN TIRADOR DE RESIZE: el alto lo decide el contenido, como el composer. El `resize: none`
   global tiene especificidad 0,0,1 y cualquier clase lo pisa, así que se repite aquí. */
.ses-nota-txt {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: none;
  min-height: 52px;
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.ses-nota-txt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.ses-nota-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ses-nota-cuenta {
  display: inline-block;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ses-nota-cuenta-tope {
  color: var(--warn);
}

:root[data-theme="light"] .ses-nota-cuenta-tope {
  color: #6d5609;
}

/* El estado empuja al botón a la derecha, y ocupa sitio aunque esté vacío para que "Guardar"
   no dé un salto lateral al aparecer el mensaje. */
.ses-nota-estado {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--text-dim);
  min-height: 1em;
}

.ses-nota-bien {
  color: var(--accent-strong);
}

.ses-nota-mal {
  color: var(--danger);
}

.ses-nota-guardar {
  min-height: 32px;
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease-out, opacity .12s ease-out;
}

.ses-nota-guardar:hover:not(:disabled) {
  background: var(--accent-strong);
}

.ses-nota-guardar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* DESACTIVADO SE VE DESACTIVADO: sin esto, un botón que no responde parece la app colgada. */
.ses-nota-guardar:disabled {
  opacity: .45;
  cursor: default;
}

.ses-chip-nota {
  border-color: var(--border-strong);
}

/* Los dos saltos, uno al lado del otro. En un panel estrecho se apilan solos en vez de
   apretujar el texto hasta que no se lea. */
.ses-saltos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ses-saltos .ses-ir {
  flex: 1 1 150px;
  min-width: 0;
  margin-top: 0;
}

.ses-ir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out;
}

.ses-ir:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.ses-ir:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ses-ir .ic {
  width: 14px;
  height: 14px;
}