/* El portal. Ningún color ni fuente aquí: todo viene de /tema.css (tema.json). */
*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { font-size: var(--tamano-base); }
body { margin: 0; font-family: var(--f-cuerpo); color: var(--texto); background: var(--fondo); line-height: 1.5;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code { font-family: var(--f-mono); font-size: .92em; }
.titulo-serif { font-family: var(--f-titulos); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .35rem; }
.texto-suave { color: var(--texto-suave); }
.texto-pequeno { font-size: .85rem; }
.vacio { color: var(--texto-suave); font-size: .95rem; margin: .5rem 0; }
.icono { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }
/* Dos tamaños y no más: 15 y 14 px no se distinguen a ojo y estaban repartidos por barra. */
.icono--chico { width: 14px; height: 14px; }
.icono--girar { transition: transform .18s ease; }
/* El chevron es uno solo: cada sitio dice a dónde apunta. Cerrado/abierto, no dos dibujos. */
.inferior__abrir .icono--girar { transform: rotate(-90deg); }
.inferior__abrir .icono--girar.es-girado { transform: rotate(90deg); }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid transparent; border-radius: 999px;
         padding: .5rem 1rem; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; font-weight: 500; }
.boton--principal { background: var(--acento); color: var(--acento-texto); }
.boton--principal:hover { filter: brightness(.94); }
.boton--suave { background: var(--superficie-2); border-color: var(--borde); }
.boton--suave:hover, .boton--suave.es-activo { background: var(--acento-suave); border-color: var(--acento-suave); }
.boton--peligro { background: var(--peligro); color: var(--acento-texto); }
.boton--grande { padding: .8rem 1.8rem; font-size: 1.05rem; }
.boton:disabled { opacity: .45; cursor: default; }
.campo { width: 100%; padding: .65rem .85rem; border: 1px solid var(--borde); border-radius: var(--radio-p);
         background: var(--superficie); color: var(--texto); font: inherit; }
.campo:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.etiqueta { font-size: .75rem; background: var(--acento-suave); color: var(--texto); border-radius: 999px; padding: .15rem .6rem; }

/* Formularios de acceso e idiomas */
.formulario { width: 100%; display: grid; gap: .5rem; text-align: left; margin-top: .5rem; }
.formulario--ancho { max-width: 420px; }
.formulario .boton { justify-self: stretch; justify-content: center; margin-top: .5rem; }
.campo__etiqueta { font-size: .85rem; color: var(--texto-suave); margin-top: .35rem; }
.casilla { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--texto-suave); margin-top: .35rem; }
.casilla input { accent-color: var(--acento); width: 16px; height: 16px; }
.formulario__error { color: var(--peligro); font-size: .9rem; margin: .25rem 0 0; }
.idiomas { display: flex; gap: .25rem; justify-content: center; margin-top: .75rem; }
.idiomas__boton { background: none; border: 1px solid transparent; border-radius: 999px; padding: .25rem .7rem; cursor: pointer; font-size: .82rem; color: var(--texto-suave); }
.idiomas__boton:hover { background: var(--superficie-2); }
.idiomas__boton.es-activo { border-color: var(--borde); color: var(--texto); }
.menu__idiomas { display: grid; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-titulos); font-size: 1.25rem; letter-spacing: -.01em; }
.marca svg { height: 26px; width: auto; }

/* Portada y errores */
.portada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.portada__caja { width: min(440px, 100%); padding: 2.5rem 1rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.portada__titulo { font-family: var(--f-titulos); font-weight: 500; font-size: 1.8rem; margin: .5rem 0 0; }
.portada__texto { color: var(--texto-suave); margin: 0 0 .5rem; }
.portada__pie { font-size: .9rem; color: var(--texto-suave); margin: 0; }

/* El marco: cabecera + tres columnas */
.marco { display: grid; height: 100vh; height: 100dvh; grid-template-rows: 52px 1fr;
         grid-template-columns: 264px 1fr 300px; grid-template-areas: "cab cab cab" "izq lienzo der";
         transition: grid-template-columns .2s ease; }
.marco--izq-plegada { grid-template-columns: 56px 1fr 300px; }
.marco--der-plegada { grid-template-columns: 264px 1fr 44px; }
.marco--izq-plegada.marco--der-plegada { grid-template-columns: 56px 1fr 44px; }
.cabecera { grid-area: cab; display: flex; align-items: center; gap: 1.5rem; padding: 0 1rem; border-bottom: 1px solid var(--borde);
            background: var(--fondo); }
.cabecera__marca { text-decoration: none; }
.cabecera__nav { display: flex; gap: .25rem; flex: 1; }
.cabecera__enlace { text-decoration: none; padding: .35rem .75rem; border-radius: 999px; font-size: .92rem; color: var(--texto-suave); }
.cabecera__enlace:hover { background: var(--superficie-2); color: var(--texto); }
.cabecera__enlace.es-activo { background: var(--acento-suave); color: var(--texto); }
.cabecera__derecha { display: flex; align-items: center; gap: .6rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie-2);
          cursor: pointer; font-weight: 600; }

/* Menús */
.menu { position: relative; }
.menu__lista { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--superficie); border: 1px solid var(--borde);
               border-radius: var(--radio-p); padding: .35rem; display: grid; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.menu__lista > a, .menu__lista > button, .menu__lista form > button { text-align: left; background: none; border: 0; padding: .5rem .7rem;
               border-radius: 8px; cursor: pointer; text-decoration: none; width: 100%; font-size: .92rem; }
.menu__lista > a:hover, .menu__lista > button:hover, .menu__lista form > button:hover { background: var(--superficie-2); }
/* Lo que destruye se lee como tal esté donde esté, no solo dentro de un menú. */
.es-peligro { color: var(--peligro); }
.menu__cabecera { display: grid; padding: .5rem .7rem .6rem; border-bottom: 1px solid var(--borde); margin-bottom: .25rem; font-size: .85rem; color: var(--texto-suave); }
.menu--fila .menu__lista { right: auto; left: 0; }

/* Lateral izquierdo */
.lateral { grid-area: izq; border-right: 1px solid var(--borde); display: flex; flex-direction: column; overflow: hidden; background: var(--fondo-panel); }
/* ── El menú de una barra lateral, el mismo en las dos ──
   Los elementos de la izquierda (nueva sesión, nuevo proyecto) y los del menú de la derecha son
   la misma cosa, así que se definen una vez: misma letra, mismo alto, misma separación. Y el mismo
   ritmo vertical arriba —el botón de plegar con el mismo alto y el mismo hueco en las dos— es lo
   que hace que el primer elemento de cada barra caiga a la misma altura. */
.menu-lat { display: grid; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.menu-lat__item { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                  width: 100%; background: none; border: 0; padding: .45rem .6rem;
                  border-radius: var(--radio-p); cursor: pointer; white-space: nowrap;
                  text-decoration: none; color: inherit; font: inherit; text-align: left; }
.menu-lat__item:hover { background: var(--superficie-2); }
.lateral__plegar, .derecha__plegar { display: flex; align-items: center; background: none; border: 0;
                 padding: .45rem .6rem; margin: .6rem .5rem .15rem; border-radius: var(--radio-p);
                 cursor: pointer; color: var(--texto-suave); }
.lateral__plegar { justify-content: flex-end; }
.lateral__acciones { padding: 0 .5rem; }
.marco--izq-plegada .lateral__texto, .marco--izq-plegada .lateral__arbol { display: none; }
.marco--izq-plegada .lateral__plegar .icono { transform: scaleX(-1); }
/* Un escalón de sangría: lo que cuelga de un rótulo, y lo que cuelga de un proyecto. */
.lateral__arbol { --sangria: .35rem; overflow-y: auto; padding: .25rem .5rem 1rem; font-size: .92rem; }
/* ── Los cuatro niveles de las dos barras, definidos una sola vez ──
   Rótulo de grupo · fila principal · fila hija · texto de apoyo. Antes había dos escalas
   paralelas, una por barra, y los mismos niveles no se parecían. Lo que distingue las barras
   es el fondo (--fondo-panel / --fondo-panel-2), no la letra. */
.derecha__titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: var(--texto-suave); }
/* La cabecera de un grupo del árbol **es del primer nivel del menú**, y lleva su acción a la
   derecha: se lee igual que «Workspaces» de enfrente, y el panel no gasta dos filas arriba para
   pedir lo mismo que ya se pide aquí. */
.arbol__seccion { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                  padding: .9rem .5rem .3rem; font-size: 1rem; color: var(--texto); }
.arbol__seccion:first-child { padding-top: .3rem; }
.arbol__nombre, .lat-der__titulo { font-size: .92rem; font-weight: 500; }
.arbol__fila--sesion .arbol__nombre, .arbol__fila--hoja, .contexto__nombre { font-size: .9rem; font-weight: 400; }
.arbol__vacio, .lat-der__desc, .lat-der__n, .lat-der__volver, .contexto__cabecera { font-size: .8rem; }
/* Las migas del lateral derecho (F-17): el camino desde el menú. El tramo actual se lee como el
   título de lo que miras —es lo que distingue «Workspaces» del área elegida—; los anteriores, como
   texto de apoyo. Cada uno vuelve. */
.migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; margin: .1rem 0 .7rem; }
.migas__tramo { display: inline-flex; align-items: center; gap: .1rem; color: var(--texto-suave); font-size: .8rem; }
/* Solo la flecha navega: es lo único pulsable del tramo. */
.migas__flecha { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
                 padding: .2rem; border-radius: 999px; color: var(--texto-suave); }
.migas__flecha:hover { background: var(--superficie-2); color: var(--texto); }
.migas__texto { padding: .15rem .1rem; }
.migas__tramo.es-actual .migas__texto { color: var(--texto); font-family: var(--f-titulos);
                          font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
/* ── La sangría del árbol, un escalón por nivel ──
   El rótulo del grupo («PROYECTOS», «SESIONES») es lo más a la izquierda; **lo que cuelga de él
   entra un escalón**, para que se lea como suyo y no como otro rótulo. Estaba a ras del rótulo, y
   antes de eso incluso fuera. El escalón es `--sangria`, y es el mismo en los dos niveles. */
.arbol__fila { display: flex; align-items: center; gap: .15rem; border-radius: var(--radio-p);
               padding: .1rem .5rem .1rem calc(.5rem + var(--sangria)); }
.arbol__fila:hover, .arbol__fila.es-activo { background: var(--superficie-2); }
.arbol__fila--hoja { text-decoration: none; padding: .4rem .5rem .4rem calc(.5rem + var(--sangria)); display: block; }
.arbol__tri { background: none; border: 0; padding: .3rem .15rem; cursor: pointer; color: var(--texto-suave); display: flex; }
.arbol__tri .icono { transition: transform .15s; transform: rotate(90deg); }
.arbol__tri.es-cerrado .icono { transform: none; }
.arbol__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; padding: .35rem .2rem; }
.arbol__pin { color: var(--texto-suave); }
/* Y la de una sesión de un proyecto, un escalón dentro del **nombre del proyecto**, que arranca
   tras su chevron (1,175rem) y el relleno del nombre (,2rem). */
.arbol__hijos { padding-left: calc(1.175rem + .2rem + var(--sangria)); }
/* Arrastrar (F-19, F-21): lo que se mueve se atenúa, y lo que lo recibiría se marca. */
.arbol__fila--sesion[draggable=true] { cursor: grab; }
/* El agarre va con las demás acciones de la fila (a la derecha, apareciendo al apuntarla): a la
   izquierda desplazaba el nombre y rompía la alineación de la viñeta con su nivel de encima. */
.arbol__agarre { cursor: grab; }
.arbol__fila[draggable=true] { cursor: grabbing; }
.arbol__fila[draggable=true] .arbol__agarre { opacity: 1; }
.es-arrastrando { opacity: .45; }
.es-destino { background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
.arbol__seccion--destino { border-radius: var(--radio-p); }
.arbol__vacio { color: var(--texto-suave); padding: .3rem .5rem .3rem calc(.5rem + var(--sangria)); }

/* Lienzo */
.lienzo { grid-area: lienzo; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.lienzo__contenido { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.pagina { width: min(880px, 100%); margin: 0 auto; padding: 2rem 1.5rem; display: grid; gap: 1rem; align-content: start; }
.pagina__cabecera { display: flex; align-items: center; gap: .8rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.acciones--centro { align-items: center; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem 1.5rem; display: grid; gap: .6rem; justify-items: start; }
.tarjeta h2 { margin: 0; font-size: 1.05rem; font-family: var(--f-titulos); font-weight: 500; }

/* Panel inferior: plegado, abierto a la altura que se arrastre, o a todo el lienzo (y el lienzo, lo mismo) */
.inferior { border-top: 1px solid var(--borde); background: var(--superficie); flex: none; display: flex; flex-direction: column; min-height: 0; }
.inferior.es-maximo { flex: 1; height: auto !important; }
.lienzo--panel-maximo .lienzo__contenido { display: none; }
/* `position: relative` para el asa: centrada en la barra, no en el hueco que le dejan los botones. */
.inferior__tirador { position: relative; display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem 1rem; color: var(--texto-suave); font-size: .85rem; user-select: none; touch-action: none; }
.inferior.es-abierto .inferior__tirador { cursor: ns-resize; }
.inferior__abrir { background: none; border: 0; cursor: pointer; color: inherit; display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem; border-radius: 6px; }
.inferior__abrir:hover { background: var(--superficie-2); }
.inferior__titulo { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
/* Iba en el flujo con `flex: 1` y `margin: 0 auto`, así que se centraba **entre los dos botones**,
   que no miden lo mismo: quedaba descentrada respecto al panel. Fuera del flujo, cae en el medio. */
.inferior__asa { position: absolute; left: 50%; transform: translateX(-50%); width: 48px; height: 4px;
                 border-radius: 2px; background: var(--borde); opacity: 0; }
.inferior.es-abierto .inferior__asa { opacity: 1; }
.inferior__tamano { background: none; border: 0; cursor: pointer; color: inherit; display: flex; padding: .3rem; border-radius: 6px; margin-left: auto; }
.inferior__tamano:hover { background: var(--superficie-2); }
.inferior__cuerpo { flex: 1; min-height: 0; padding: .5rem 1.25rem 1.25rem; overflow: auto; }
.vistas { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vistas__pestanas { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.vistas__pestana { border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; color: inherit; }
.vistas__pestana.es-activa { background: var(--acento-suave); border-color: var(--acento-suave); }
.vistas__cerrar { color: var(--texto-suave); padding: 0 .1rem; }
.vista { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.vista__barra { display: flex; gap: .5rem; align-items: center; font-size: .82rem; margin-bottom: .3rem; flex-wrap: wrap; }
.vista__tabla { overflow: auto; min-height: 0; flex: 1; border: 1px solid var(--borde); border-radius: var(--radio-p); }
.vista__grafico { flex: 1; min-height: 90px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.vista__grafico > .vega-embed, .lienzo__ampliada-grafico > .vega-embed { display: block; }
.lienzo__ampliada-grafico { display: flex; justify-content: center; align-items: center; overflow: hidden; }
.lienzo__ampliada { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem; gap: .6rem; }
.lienzo__ampliada-barra { display: flex; align-items: center; gap: 1rem; }
.lienzo__ampliada-barra h2 { margin: 0; font-size: 1.2rem; }
.lienzo__ampliada-grafico { flex: 1; min-height: 0; }
.tabla--datos { border-collapse: collapse; font-size: .85rem; white-space: nowrap; min-width: 100%; }
.tabla--datos th, .tabla--datos td { padding: .3rem .7rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla--datos th { position: sticky; top: 0; background: var(--superficie-2); font-weight: 500; }
.tabla--datos th small { display: block; font-weight: 400; font-size: .72rem; }
.boton--chico { padding: .2rem .7rem; font-size: .8rem; }
.campo--chico { padding: .35rem .6rem; font-size: .85rem; margin-bottom: .4rem; }
.contexto__area { margin-bottom: 1rem; }
.lat-der__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.lat-der__fila { display: flex; align-items: flex-start; gap: .2rem; padding: .1rem 0; }
.lat-der__nombre { flex: 1; min-width: 0; display: grid; gap: .1rem; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; padding: .45rem .6rem; border-radius: var(--radio-p); font: inherit; }
.lat-der__nombre:hover { background: var(--superficie-2); }
.lat-der__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-der__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-der__volver { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer; color: var(--texto-suave); padding: .3rem 0; }
.lat-der__volver:hover { color: var(--texto); }
.derecha__modos { padding: .2rem 0; }
.contexto__cat { margin-top: .4rem; }
.contexto__cabecera { display: flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer; color: inherit; padding: .2rem 0; width: 100%; text-align: left; }
.contexto__cabecera .icono--girar { transform: rotate(0); transition: transform .15s; }
.contexto__cabecera .icono--girar.es-girado { transform: rotate(90deg); }
.contexto__lista { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .4rem; }
.contexto__objeto { display: flex; align-items: center; gap: .2rem; padding: .15rem 0; }
.contexto__objeto.es-fijado .contexto__nombre { font-weight: 500; }
.contexto__nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; padding: .2rem .3rem; border-radius: 6px; overflow: hidden; }
.contexto__nombre:hover { background: var(--superficie-2); }
.contexto__nombre span:not(.etiqueta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contexto__acciones { display: flex; }

.etiqueta--suave { background: var(--superficie-2); font-size: .7rem; }
.ficha__datos { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .9rem; margin: .6rem 0; }
.ficha__datos dt { color: var(--texto-suave); }
.ficha__datos dd { margin: 0; }
.ficha__sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: .8rem 0 .3rem; font-weight: 500; }
.ficha__columnas { columns: 2; margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.ficha__pasos { margin: 0 0 .5rem; padding-left: 1.2rem; font-size: .88rem; }
.ficha__receta { font-family: var(--f-mono); font-size: .78rem; background: var(--superficie-2); padding: .6rem .8rem; border-radius: var(--radio-p); overflow: auto; max-height: 40vh; white-space: pre; }
.ficha__renombrar { display: grid; gap: .4rem; margin: .5rem 0; }

.boton-icono { display: flex; padding: .45rem; border: 0; background: none; cursor: pointer; border-radius: 999px;
               color: var(--texto-suave); text-decoration: none; }
.boton-icono:hover, .boton-icono.es-activo { background: var(--superficie-2); color: var(--texto); }
.boton-icono--chico { padding: .25rem; }
/* Las acciones de una fila aparecen al apuntarla, en las dos barras y con el teclado. Antes la
   izquierda las escondía y la derecha no, y eran dos clases distintas para el mismo trabajo. */
.boton-icono--sutil { opacity: 0; }
.arbol__fila:hover .boton-icono--sutil, .arbol__fila:focus-within .boton-icono--sutil,
.lat-der__fila:hover .boton-icono--sutil, .lat-der__fila:focus-within .boton-icono--sutil,
.contexto__objeto:hover .boton-icono--sutil, .contexto__objeto:focus-within .boton-icono--sutil,
.boton-icono--sutil[aria-expanded=true] { opacity: 1; }
.tarjeta--formulario { justify-items: stretch; }
/* La muestra de iconos (Administración): la lista la pone el inventario, no esta hoja. */
.tarjeta--muestra { justify-items: stretch; }
.muestra__tamanos { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.muestra__tamano { display: inline-flex; align-items: center; gap: .45rem; }
.muestra__celda { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.muestra code { font-size: .8rem; color: var(--texto-suave); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .9rem; }
.tarjeta--boton { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tarjeta--boton:hover, .tarjeta--boton.es-activa { border-color: var(--acento); }
.tarjeta__datos { margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .85rem; }
.tarjeta--formulario .formulario { margin-top: 0; }

/* Administración: tabla de personas y menú del cajón derecho */
.pagina--ancha { width: min(1100px, 100%); }
.pagina__cabecera { justify-content: space-between; }
.tabla-envoltorio { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
.tabla td { padding: .55rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.es-inactiva td { color: var(--texto-suave); }
.celda-mono { font-family: var(--f-mono); font-size: .85rem; }
.celda-acciones { text-align: right; width: 1%; }
.celda-acciones .menu__lista { min-width: 240px; }
.menu__lista--flotante { z-index: 45; }
.campo--compacto { width: auto; padding: .35rem .6rem; font-size: .88rem; }
.casilla--interruptor { font-size: 1rem; color: var(--texto); }
.menu-admin { display: grid; gap: .15rem; }
.menu-admin__enlace { text-decoration: none; padding: .45rem .7rem; border-radius: var(--radio-p); color: var(--texto-suave); }
.menu-admin__enlace:hover, .menu-admin__enlace.es-activo { background: var(--superficie-2); color: var(--texto); }

/* La fila de sesión **no fija su sangría**: la hereda de `.arbol__fila`, que es quien la sabe.
   Una regla propia aquí (estuvo, con `padding-left: 0`) gana por ir después y deja la viñeta fuera
   del rótulo, anulando el cálculo sin que nada avise. */
.arbol__vineta { flex: none; width: .3rem; height: .3rem; margin: 0 .4rem 0 0; border-radius: 50%;
                 background: var(--texto-suave); opacity: .55; }
.arbol__fila--sesion:hover .arbol__vineta, .arbol__fila--sesion.es-activo .arbol__vineta { opacity: 1; }
.etiqueta--peq { font-size: .7rem; padding: .05rem .45rem; }
.charla__cabecera { display: flex; align-items: center; gap: .6rem; padding-top: 1rem; }
.charla__titulo { font-size: 1.2rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno { display: flex; flex-direction: column; gap: .6rem; }
.burbuja__texto p { margin: 0 0 .6rem; }
.burbuja__texto p:last-child { margin-bottom: 0; }
.burbuja__texto ul { margin: 0 0 .6rem; padding-left: 1.3rem; }
.burbuja__texto code { font-family: var(--f-mono); font-size: .9em; background: var(--superficie-2); padding: .05rem .3rem; border-radius: 4px; }
.burbuja__error { color: var(--peligro); margin: .4rem 0 0; font-size: .92rem; }
.trabajo { align-self: flex-start; font-size: .85rem; color: var(--texto-suave); }
.trabajo summary { cursor: pointer; }
.trabajo ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.turno__cuerpo { display: flex; flex-direction: column; gap: .6rem; }
/* Propuestas (F-8): la tarjeta bajo la respuesta que la produjo, con su destino elegible */
.propuesta { align-self: flex-start; width: min(100%, 640px); background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: var(--radio); padding: .9rem 1.1rem; display: grid; gap: .55rem; }
.propuesta--ocupada { opacity: .7; }
.propuesta__cabecera { display: flex; gap: .4rem; flex-wrap: wrap; }
.propuesta__resumen { margin: 0; line-height: 1.5; }
.propuesta__destino { display: grid; gap: .3rem; }
.propuesta__acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.propuesta__acciones .campo--corto { flex: 1; min-width: 12rem; }
.campo--corto { width: auto; min-width: 14rem; max-width: 100%; padding: .45rem .7rem; }
.etiqueta--peligro { background: var(--peligro); color: var(--acento-texto); }
.veredicto { align-self: center; width: min(100%, 640px); color: var(--texto-suave); font-size: .9rem; display: grid; gap: .35rem; padding: .4rem .9rem; border-left: 2px solid var(--borde); }
.veredicto__linea { display: flex; flex-direction: column; gap: .1rem; }
.veredicto__desenlace { color: var(--texto); }
.tarjeta--fila { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 1rem; }
.tarjeta--fila > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pantallas emergentes (Config, contraseña): se cierran y vuelven a donde se estaba */
.emergente { flex: 1; display: grid; place-items: start center; padding: 2rem 1.5rem; overflow-y: auto; }
.emergente__caja { width: min(480px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem 1.75rem 1.75rem; display: grid; gap: .8rem; }
.emergente__caja--ancha { width: min(720px, 100%); background: transparent; border: 0; padding: 0; }
.emergente__caja--ancha .emergente__cabecera { padding: 0 .25rem; }
.emergente__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.emergente__cabecera h1 { margin: 0; font-size: 1.4rem; }
.emergente__cerrar { display: flex; padding: .45rem; border-radius: 999px; color: var(--texto-suave); text-decoration: none; }
.emergente__cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.emergente__acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.emergente .formulario .boton { justify-self: auto; margin-top: 0; }

/* El segundo factor */
.campo--codigo { font-family: var(--f-mono); font-size: 1.35rem; letter-spacing: .25em; text-align: center; }
.qr { background: var(--qr-fondo); border-radius: var(--radio-p); padding: 12px; width: 212px; height: 212px; display: grid; place-items: center; }
.qr svg { width: 188px; height: 188px; display: block; }
.secreto { font-family: var(--f-mono); font-size: .8rem; word-break: break-all; display: block; margin-top: .5rem; user-select: all; }
.detalle { font-size: .85rem; color: var(--texto-suave); }
.detalle summary { cursor: pointer; }
.texto-exito { color: var(--exito); }
.enlace { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-decoration: underline; }

/* Lateral derecho */
/* Los dos laterales llevan **el mismo fondo** (decisión del operador, 2026-09-26): el derecho
   usaba `--fondo-panel-2`, que es el color de lo que se hunde *dentro* de un panel, así que las dos
   barras de la misma jerarquía no se parecían. Igualarlas quita una excepción del diseño. */
.derecha { grid-area: der; border-left: 1px solid var(--borde); display: flex; flex-direction: column; overflow: hidden; background: var(--fondo-panel); }
/* En la barra derecha el control de plegar va en su borde interior, simétrico al de la izquierda. */
.derecha__plegar { justify-content: flex-start; }
.marco--der-plegada .derecha__plegar .icono { transform: none; }
.derecha__cuerpo { padding: 0 .5rem 1rem; overflow-y: auto; }
.derecha__titulo { margin: .2rem 0 .5rem; }

/* La conversación */
.charla { flex: 1; display: flex; flex-direction: column; width: min(820px, 100%); margin: 0 auto; padding: 0 1.25rem; }
.charla__hilo { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 2.5rem 0 1rem; }
.charla__bienvenida { text-align: center; margin: auto 0 1rem; }
.charla__bienvenida h1 { font-size: 2rem; }
.burbuja { max-width: 85%; padding: .8rem 1.1rem; border-radius: var(--radio); line-height: 1.55; }
.burbuja--persona { align-self: flex-end; background: var(--superficie-2); }
.burbuja--agente { align-self: flex-start; background: transparent; padding-left: 0; }
.burbuja--aviso { align-self: center; color: var(--texto-suave); font-size: .9rem; }
.caja { position: sticky; bottom: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
        margin: .5rem 0 2rem; padding: .75rem .75rem .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.caja:focus-within { border-color: var(--acento); }
.caja__texto { width: 100%; border: 0; background: none; resize: none; font: inherit; color: inherit; padding: .25rem .5rem; max-height: 40vh; line-height: 1.5; }
.caja__texto:focus { outline: none; }
.caja__barra { display: flex; align-items: center; justify-content: space-between; margin-top: .25rem; }
.caja__boton { border: 0; background: var(--superficie-2); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.caja__boton--enviar { background: var(--acento); color: var(--acento-texto); }
.caja__boton--enviar:disabled { background: var(--superficie-2); color: var(--texto-suave); }
.caja__derecha { display: flex; align-items: center; gap: .6rem; }
/* Los adjuntos se apilan: cada uno es una ficha con lo que hay dentro, no una etiqueta. */
.caja__ficheros { display: grid; gap: .4rem; padding: .2rem .5rem .4rem; }
/* El emergente de carga (F-16): mismo marco, misma tabla y mismos botones que el resto de la
   aplicación; lo único suyo es que necesita más ancho para que quepa la previsualización. */
.modal__ancho { width: min(760px, 92vw); display: grid; gap: .8rem; }
/* Se adapta al número de campos: con el área son tres, y una rejilla de dos dejaba el
   tercero solo y descuadrado. */
.carga__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .6rem; }
.carga__campo { display: grid; gap: .15rem; min-width: 0; }
.carga__vista { display: grid; gap: .4rem; }
.carga__tabla { max-height: 38vh; overflow: auto; }
.carga__avisos { margin: 0; padding-left: 1rem; color: var(--texto-suave); }
/* El menú del + se abre hacia arriba: nace pegado al borde inferior de la ventana. */
.menu__lista--arriba { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; }
/* En el historial, un fichero de un turno pasado es solo una etiqueta: ahí ya no se decide nada. */
.ficha-fichero { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem;
                 background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px;
                 padding: .15rem .6rem; }
.burbuja__ficheros { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.oculto { display: none; }
.caja__modo { font-size: .85rem; color: var(--texto-suave); padding: .3rem .7rem; border: 1px solid var(--borde); border-radius: 999px; }

/* La espera: un anillo fino que gira con ritmo cambiante y respira */
.espera { display: flex; align-items: center; gap: .7rem; color: var(--texto-suave); font-size: .9rem; padding: .25rem 0; }
.anillo { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--acento-suave); border-top-color: var(--acento);
          border-right-color: var(--acento); animation: anillo-gira 1.4s cubic-bezier(.6,.05,.3,.95) infinite, anillo-respira 2.6s ease-in-out infinite; }
@keyframes anillo-gira { 0% { transform: rotate(0deg); } 60% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } }
@keyframes anillo-respira { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.18; opacity: 1; } }
.espera__texto::after { content: "…"; animation: puntos 1.5s steps(4) infinite; }
@keyframes puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Avisos y modales */
.avisos { position: fixed; top: 60px; right: 1rem; display: grid; gap: .5rem; z-index: 50; width: min(420px, calc(100% - 2rem)); }
.aviso { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-p);
         padding: .7rem 2.2rem .7rem .9rem; font-size: .92rem; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.aviso--error { border-left-color: var(--peligro); }
.aviso--ok { border-left-color: var(--exito); }
.aviso__cerrar { position: absolute; right: .4rem; top: .5rem; background: none; border: 0; cursor: pointer; color: var(--texto-suave); }
.velo--cajon { display: none; }
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
.modal { width: min(460px, 100%); background: var(--superficie); border-radius: var(--radio); padding: 1.5rem; display: grid; gap: .8rem; }
.modal:has(.modal__ancho) { width: auto; }
.modal h2 { margin: 0; font-family: var(--f-titulos); font-weight: 500; font-size: 1.25rem; }
.modal form { display: grid; gap: .8rem; }
.modal__acciones { display: flex; justify-content: flex-end; gap: .5rem; }

/* Estrecho: los laterales son cajones sobre el contenido; la navegación se desplaza */
.solo-estrecho { display: none !important; }
.cabecera__cajon { background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--texto-suave); border-radius: 8px; }
.cabecera__cajon:hover { background: var(--superficie-2); }
@media (max-width: 900px) {
  .solo-estrecho { display: inline-flex !important; }
  .solo-ancho { display: none !important; }
  .marco, .marco--izq-plegada, .marco--der-plegada, .marco--izq-plegada.marco--der-plegada {
    grid-template-columns: 1fr; grid-template-areas: "cab" "lienzo"; }
  .cabecera { gap: .6rem; padding: 0 .6rem; }
  .cabecera__nav { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .cabecera__enlace { white-space: nowrap; padding: .35rem .6rem; font-size: .88rem; }
  .lateral, .derecha { position: fixed; top: 52px; bottom: 0; width: min(320px, 85vw); z-index: 45; transition: transform .2s ease; overflow-y: auto;
                       box-shadow: 0 8px 32px rgba(0,0,0,.18); }
  .lateral { left: 0; transform: translateX(-100%); border-right: 1px solid var(--borde); }
  .derecha { right: 0; transform: translateX(100%); }
  .marco--izq-abierta .lateral, .marco--der-abierta .derecha { transform: none; }
  .lateral__plegar, .derecha__plegar { display: none; }
  .marco--izq-plegada .lateral__texto, .marco--izq-plegada .lateral__arbol { display: initial; }
  .marco--izq-plegada .lateral__arbol { display: block; }
  .derecha__cuerpo { display: block !important; }
  .velo--cajon { display: block; z-index: 44; background: rgba(0,0,0,.25); }
  .charla { padding: 0 .75rem; }
  .charla__hilo { padding-top: 1.5rem; }
  .charla__bienvenida h1 { font-size: 1.5rem; }
  .burbuja { max-width: 95%; }
  .caja { margin-bottom: .6rem; border-radius: var(--radio-p); }
  .pagina { padding: 1.25rem .9rem; }
  .emergente { padding: 1rem .75rem; }
  .emergente__caja { padding: 1.1rem 1rem 1.25rem; }
  .avisos { top: 58px; }
}
/* `--bp-tacto`. Era 480 y pasa a 600 por decisión del operador (2026-09-26): los puntos de ruptura
   declarados son dos, y un tercero es el principio de los cuatro que había. Consecuencia: el nombre
   de la marca y el rótulo del modo se ocultan antes, entre 480 y 600, donde hoy se veían. */
@media (max-width: 600px) {
  .cabecera__marca .marca__texto { display: none; }
  .caja__modo { display: none; }
}