/* Hoja base de /app/, trozo 03 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ===== SUGERENCIAS DE «/» (F16, portada) ===== */
/* ==================================================================================================
   POPOVER DE SUGERENCIAS DE «/»
   Flota sobre el cajón, alineado con la línea de composición (mismo clamp, mismo ancho).
   comandos.js lo crea como primer hijo de #cajon.
   ================================================================================================== */

.sugerencias {
  position: absolute; bottom: 100%; z-index: 20;
  left: clamp(var(--e4), 6vw, var(--e6)); right: clamp(var(--e4), 6vw, var(--e6));
  max-width: var(--ancho-hilo); margin: 0 auto var(--e2);
  padding: var(--e1);
  max-height: 40vh; overflow-y: auto;
  background: var(--elevada);
  border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-burbuja);
  box-shadow: var(--sombra-2);
}
.sugerencias[hidden] { display: none; }
.sug {
  position: relative;
  display: flex; align-items: baseline; gap: var(--e3);
  width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--tinta); cursor: pointer;
  padding: var(--e2) var(--e3); border-radius: var(--r-control);
  font: 400 var(--t-md)/var(--lh-md) var(--prosa);
}
.sug-nombre { font: 600 var(--t-md)/var(--lh-md) var(--mono); }   /* el comando es dato: mono */
.sug-desc {
  flex: 1; min-width: 0;
  color: var(--tinta-suave);
  font-size: var(--t-sm); line-height: var(--lh-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* A la derecha, como en las apps de referencia: el ojo recorre la columna de comandos sin que
     las descripciones —que empiezan donde acaba cada nombre— lo hagan zigzaguear. */
  text-align: right;
}
/* el icono del comando: pequeño, apagado, centrado a la fila; el activo toma el acento. */
.sug-ic { width: 16px; height: 16px; flex: none; align-self: center; color: var(--tinta-apagada); }
.sug.activa .sug-ic, .paleta li.activo .sug-ic { color: var(--acento); }
.paleta li .sug-ic { width: 15px; height: 15px; align-self: center; }
.sug:hover { background: var(--hundida); }
/* La activa: fondo tenue + la misma marca fina de 2px de toda la app. */
.sug.activa { background: var(--acento-tenue); }
.sug.activa::after {
  content: '';
  position: absolute; left: 0; top: var(--e1); bottom: var(--e1);
  width: var(--carril-fino); border-radius: var(--r-chip);
  background: var(--acento);
}

/* ===== ADJUNTOS (F17, portada) ===== */
/* ==================================================================================================
   ADJUNTOS (F17 2B) — el «+» del cajón, su menú y el velo de soltar; las fichas del cajón visten en
   06. Lo crea todo adjuntos.js; aquí solo vive el traje. (El panel de filas de subida y el índice de
   un .zip salieron en PF36-13: la interfaz no los enseñaba desde F17.)

   Dos decisiones que salen del sistema y no de un gusto, y que valen también para las fichas:

     1. «SE VE RARA» NO ES «ESTÁ MAL». Una ruta que esta pantalla no sabe juzgar —un `..`, una
        marca bidireccional— va en --desconocido (`.adj-rara`, en la ficha del cajón), que es exactamente el color de «no se pudo
        comprobar». Quien decide es el servidor, y el color lo dice antes que el texto. Pintarla
        en --mal sería que el cliente dictara un veredicto que no le corresponde.
     2. LAS RUTAS SON DATO: van en mono, como los comandos del popover y el código del inventario.
        Un nombre que viene de fuera no se viste igual que la prosa de esta interfaz.
   ================================================================================================== */

.adj { position: relative; flex: 0 0 auto; align-self: flex-end; }

/* Quieto hasta que se le pasa por encima: en el cajón manda el texto, y un segundo botón con
   marco compitiendo con «enviar» convierte la pieza más mirada de la app en una barra de
   herramientas. El borde nace transparente para que al aparecer no mueva nada de sitio. */
.adjuntar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--alto-control); height: var(--alto-control);
  background: transparent; color: var(--tinta-suave);
  border: var(--filete) solid transparent; border-radius: var(--r-control);
  cursor: pointer;
  font: 400 var(--t-xl)/1 var(--prosa);
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.adjuntar:hover { background: var(--hundida); color: var(--tinta); border-color: var(--linea); }
.adjuntar[aria-expanded="true"] { background: var(--hundida); color: var(--acento); border-color: var(--acento); }

/* El menú nace del botón y por eso cuelga de él (mismo gesto que el popover de «/»). */
.adj-menu {
  position: absolute; bottom: calc(100% + var(--e2)); left: 0; z-index: 21;
  min-width: 248px; padding: var(--e1);
  background: var(--elevada);
  border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
}
.adj-menu[hidden] { display: none; }
.adj-opcion {
  display: flex; align-items: baseline; gap: var(--e3);
  width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--tinta); cursor: pointer;
  padding: var(--e2) var(--e3); border-radius: var(--r-control);
  font: 400 var(--t-md)/var(--lh-md) var(--prosa);
}
.adj-op-nombre { font-weight: 600; white-space: nowrap; }
.adj-op-desc { flex: 1; min-width: 0; color: var(--tinta-suave); font-size: var(--t-sm); line-height: var(--lh-sm); }
.adj-opcion:hover:not(:disabled) { background: var(--hundida); }
/* Una opción que este navegador no puede cumplir se apaga con COLOR y conserva su explicación al
   lado; el fondo hundido del `button:disabled` global la convertiría en un bloque gris dentro de
   un menú flotante, que se lee como un error de pintado y no como «aquí no se puede». */
.adj-opcion:disabled {
  background: transparent; border-color: transparent;
  color: var(--tinta-apagada); cursor: default;
}
.adj-opcion:disabled .adj-op-desc { color: var(--tinta-apagada); }

/* Los <input type=file> viven fuera de la vista pero DENTRO del documento: un display:none no
   siempre se puede pulsar por programa, y sacarlos del árbol los dejaría sin evento. */
.adj-entradas { display: contents; }
.adj-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none;
}

/* -- el velo de soltar ---------------------------------------------------------------------------
   Excepción declarada al «nada se tiñe»: esto no es un ESTADO de un dato, es la respuesta a un
   gesto que está ocurriendo ahora mismo y dura lo que dura el arrastre. Va en --acento-tenue
   (donde hay acción) con texto medido encima, y el marco discontinuo dice «zona de soltar» sin
   pedirle el color a la semántica. `pointer-events: none` es funcional, no estético: el drop lo
   escucha el documento, y un velo que capturara el puntero se lo comería. */
.soltar {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e5);
  pointer-events: none;
  background: var(--acento-tenue);
}
.soltar[hidden] { display: none; }
.soltar-caja {
  max-width: 48ch; padding: var(--e5) var(--e6);
  text-align: center; text-wrap: pretty;
  background: var(--elevada); color: var(--tinta);
  border: var(--carril-fino) dashed var(--acento); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
  font: 600 var(--t-md)/var(--lh-lg) var(--prosa);
}
/* El panel de lectura marca que va a recibir. Es el mismo filete de siempre, en acento. */
body.arrastrando .columna { border-color: var(--acento); }

/* ===== PALETA ⌘K (F16, portada) ===== */
/* ==================================================================================================
   PALETA (⌘K)
   ================================================================================================== */

.paleta {
  width: min(560px, 92vw); padding: 0;
  background: var(--elevada); color: var(--tinta);
  border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-burbuja);
  box-shadow: var(--sombra-2);
}
/* El velo desenfoca lo de detrás en vez de solo oscurecerlo: dice «esto de aquí manda ahora».
   Quien no entienda backdrop-filter se queda con el velo a secas, que ya cumple. */
.paleta::backdrop {
  background: rgba(10, 12, 16, .48);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.paleta input {
  width: 100%;
  border: 0; border-bottom: var(--filete) solid var(--borde);   /* delimita un campo: se mide a 3:1 */
  background: transparent; color: var(--tinta);
  padding: var(--e4);
  font: 400 var(--t-lg)/var(--lh-md) var(--prosa);
  outline: none;
}
.paleta input::placeholder { color: var(--tinta-apagada); }
.paleta ul { list-style: none; margin: 0; padding: var(--e2); max-height: 50vh; overflow-y: auto; }
.paleta li {
  position: relative;
  display: flex; gap: var(--e3);
  padding: var(--e2) var(--e3); border-radius: var(--r-control);
  cursor: pointer;
  font-size: var(--t-md); line-height: var(--lh-md);
}
.paleta li .desc { flex: 1; text-align: right; color: var(--tinta-apagada); }
.paleta li:hover { background: var(--hundida); }
.paleta li.activo { background: var(--acento-tenue); }
.paleta li.activo::after {
  content: '';
  position: absolute; left: 0; top: var(--e1); bottom: var(--e1);
  width: var(--carril-fino); border-radius: var(--r-chip);
  background: var(--acento);
}

/* ===== BOTONES Y CONTROLES (F16, portada) ===== */
/* ==================================================================================================
   BOTONES Y CONTROLES COMPARTIDOS
   El primario es el único con acento de relleno: es LA acción. El secundario es un control
   delimitado por --borde (medido a 3:1) — un botón que solo se distingue por el texto no se
   distingue.
   ================================================================================================== */

button.primario {
  background: var(--acento); color: var(--acento-tinta);
  border: var(--filete) solid var(--acento); border-radius: var(--r-control);
  padding: var(--e2) var(--e4);
  font: 600 var(--t-md)/var(--lh-md) var(--prosa);
  cursor: pointer;
  transition: filter .12s ease;
}
button.primario:hover:not(:disabled) { filter: brightness(1.08); }

button.secundario {
  background: var(--elevada); color: var(--tinta);
  border: var(--filete) solid var(--borde); border-radius: var(--r-control);
  padding: var(--e2) var(--e3);
  font: 500 var(--t-md)/var(--lh-md) var(--prosa);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
button.secundario:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }

/* Deshabilitado = «hay algo en vuelo». Se dice con color y cursor, no bajando la opacidad del
   texto por debajo de lo medido. */
button:disabled {
  cursor: default;
  color: var(--tinta-apagada);
  background: var(--hundida);
  border-color: var(--borde);
  filter: none;
}
button.primario:disabled { background: var(--hundida); border-color: var(--borde); }

/* ===== VISTA DE ACCIONES (F16, portada) ===== */
/* ==================================================================================================
   VISTA DE ACCIONES DEL SISTEMA (vistaAcciones.js)
   Ninguna de estas clases tenía UNA SOLA regla en ninguna hoja: la pantalla que la barra abre con
   más frecuencia salía en Times New Roman de navegador. Aquí se viste entera.
   ================================================================================================== */

.vista {
  display: flex; flex-direction: column; gap: var(--e5);
  max-width: var(--ancho-hilo); margin: 0 auto;
}
.vista-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: var(--filete) solid var(--linea);
}
.vista-titulos { min-width: 0; }
/* El único texto grande de la app: 28px, peso 700 y tracking negativo. La jerarquía empieza aquí
   — sin un título con peso de verdad, toda la pantalla parece la misma cosa repetida. */
.vista-titulo {
  margin: 0;
  font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: 700;
  letter-spacing: var(--track-titulo);
}
.vista-sub {
  margin: var(--e2) 0 0;
  max-width: 64ch;
  color: var(--tinta-suave);
  font-size: var(--t-md); line-height: var(--lh-lg);
  text-wrap: pretty;
}
.vista-cab .secundario { flex: 0 0 auto; }
.vista-cuerpo { display: flex; flex-direction: column; gap: var(--e3); }

/* Los filtros son un CONTROL SEGMENTADO hundido: un grupo, no cuatro botones sueltos. El activo
   se levanta a superficie elevada y lleva la marca de 2px en acento. */
.filtros {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start;
  gap: var(--e1); padding: var(--e1);
  background: var(--hundida);
  border: var(--filete) solid var(--linea); border-radius: var(--r-control);
}
.filtro {
  display: inline-flex; align-items: center; gap: var(--e2);
  border: 0; background: transparent; color: var(--tinta-suave); cursor: pointer;
  padding: var(--e2) var(--e3); border-radius: var(--r-menudo);
  font: 500 var(--t-md)/var(--lh-md) var(--prosa);
}
.filtro:hover { color: var(--tinta); }
.filtro.activo {
  background: var(--elevada); color: var(--tinta); font-weight: 600;
  box-shadow: var(--sombra-1);
}
.filtro.activo::before {
  content: '';
  flex: 0 0 auto;
  width: var(--carril-fino); height: 1.1em;
  border-radius: var(--r-chip);
  background: var(--acento);
}
/* La cuenta se queda VACÍA cuando no hay lista fiable (vistaAcciones.js no escribe un cero que
   nadie comprobó): sin :empty aquí saldría un hueco con separación pidiendo un número. */
.filtro-cuenta {
  font-size: var(--t-xs); color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
}
.filtro-cuenta:empty { display: none; }
.filtro.activo .filtro-cuenta { color: var(--tinta-suave); }