/* Navegador de archivos compartido (0.25.43) — `FileBrowser.razor`.

   Vive en el proyecto compartido y **no** en `app.css` ni en `mobile.css` porque el componente es uno solo: si
   la hoja se duplicara, volveríamos a lo de antes —dos maquetaciones que divergen— por el camino del CSS en vez
   de por el del Razor. El escritorio la copia junto a los demás compartidos (Photino sirve una carpeta física y
   no resuelve `_content/…`); la PWA la referencia como `_content/Contextara.UI/css/filebrowser.css`.

   Es **autónoma**: no hereda nada de `.tree` ni de `.mf2-*`. Solo usa las variables de color que las dos
   superficies declaran (`--text`, `--muted`, `--border`, `--panel-2`, `--accent`).
   ------------------------------------------------------------------------------------------------------- */

/* **Sin scroll propio por defecto**, a propósito: en el escritorio el navegador cuelga dentro de la columna de
   navegación, que ya tiene el suyo, y darle aquí un `overflow` crearía un segundo contenedor desplazable dentro
   del primero —dos barras anidadas y una rueda de ratón que mueve la equivocada—. Quien sí lo necesita es la PWA,
   que ocupa la pantalla entera; se lo da la densidad compacta más abajo. */
.fb { display: flex; flex-direction: column; min-width: 0; }
.fb-rows { display: flex; flex-direction: column; min-width: 0; }

/* La tira de salida del foco: **un renglón fijo**, y es toda la señal de ubicación que hay. Sustituye a la fila
   de migas de pan, que crecía con la ruta y en el móvil se partía en dos o tres líneas justo cuando más hondo
   estabas —o sea, cuando menos sitio quedaba para la lista—. */
.fb-up {
    flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; width: 100%;
    text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--border);
    color: var(--muted); cursor: pointer; font: inherit; font-size: .85rem; padding: .3rem .3rem;
}
.fb-up:hover { color: var(--text); }

/* `position: relative` para que el bloque de acciones pueda flotar sobre el borde derecho de **esta** fila. */
.fb-row { display: flex; align-items: center; border-radius: 4px; min-width: 0; position: relative; }
.fb-row:hover { background: var(--panel-2, rgba(127, 127, 127, .12)); }
.fb-row.is-selected { background: rgba(127, 178, 230, .14); }
/* Las carpetas se distinguen por color además de por el chevrón: en una lista larga el chevrón solo es un
   detalle de 12 px, y el barrido vertical se hace por color. */
.fb-row.is-dir .fb-name { color: #e3c07b; }

.fb-item {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .3rem;
    text-align: left; padding: .18rem .3rem;
    background: transparent; border: none; color: var(--text); cursor: pointer; font: inherit; font-size: .85rem;
}
.fb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

/* La **ranura**: hueco de ancho fijo con UNA cosa dentro —el chevrón de una carpeta o el icono de un archivo—.
   Que valga lo mismo en todas las filas es lo que alinea el contenido de un hijo con el nombre de su padre. */
.fb-slot { flex: 0 0 auto; width: 1.15rem; display: inline-flex; align-items: center; justify-content: center; }

/* **Los iconos van juntos y pegados al borde derecho** (0.27.35, usuario: *«junta más los iconos flotantes de
   las carpetas de los archivos, alinéalos a la derecha con respecto a Navegación (hay un espacio en blanco
   ahí)»*).

   El hueco no era un margen: eran **dos botones invisibles** —los de copiar ruta `rel` y `abs`— cuya regla de
   aparición miraba `.tree-row:hover` cuando la fila es `.fb-row`, así que no se encendían nunca pero seguían
   ocupando su sitio. Se sustituyeron por un solo icono de copiar, y aquí se quita el aire que sobraba entre
   los que quedan: `.35rem` por lado era casi un icono de separación por hueco.

   El `margin-left: auto` es una **garantía**, no un cambio: hoy `.fb-item` ya crece y los empuja, pero si algún
   día dejara de crecer, el grupo volvería a quedar flotando a media fila —que es como se veía en la captura—. */
/* **El bloque de acciones flota sobre la fila, no dentro de ella** (usuario, 2026-08-16: los nombres salían
   recortados «teniendo espacio para crecer»).

   Los cinco botones vivían en el flujo con `opacity: 0`, así que eran invisibles **y seguían reservando su
   ancho**: unos 160 px de una columna de 376. El nombre pagaba ese hueco siempre, y las acciones solo se veían
   una de cada cien veces. Sacarlos del flujo devuelve el ancho al nombre —que es lo que se viene a leer— sin
   perder ninguna acción.

   Lleva **fondo propio** porque al aparecer se superpone al final del nombre: sin él se leerían las dos cosas
   encima. Es el mismo color que el `hover` de la fila, que es el único momento en que se ve. Y `pointer-events`
   apagado mientras está oculto, para que no intercepte el clic que abre el archivo. */
.fb-actions {
    position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center;
    opacity: 0; pointer-events: none;
    padding-left: .5rem; border-radius: 0 4px 4px 0;
    background: var(--panel-2, rgba(127, 127, 127, .12));
}
.fb-row:hover .fb-actions, .fb-actions:focus-within { opacity: 1; pointer-events: auto; }

.fb-action {
    flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer;
    font-size: .8rem; padding: 0 .12rem; line-height: 1; display: inline-flex; align-items: center;
}
/* El último se pega al borde del panel: sin esto queda un canal de aire que es justo lo que se pidió quitar. */
.fb-actions > .fb-action:last-of-type { padding-right: .15rem; }
.fb-action:hover { color: var(--text); }
/* El icono de copiar la ruta relativa (0.27.35). Va con los demás y por eso es `.fb-action`: su antecesor era
   `.tree-copy`, de otra familia, y de ahí que su regla de hover no llegara a aplicarse nunca. */
.fb-copy { color: var(--muted); }
.fb-copy:hover { color: var(--accent, #519aba); }
/* Abrir en el explorador: mismo trato que copiar, porque son dos acciones del mismo rango. */
.fb-reveal { color: var(--muted); }
.fb-reveal:hover { color: var(--accent, #519aba); }
/* El `+` de una carpeta (0.26.21): mismo comportamiento que las demás acciones —discreto hasta el hover— y algo
   más marcado, porque un `+` a peso normal se pierde entre los iconos. */
.fb-new { font-weight: 600; }
/* Subir y bajar (0.27.293). Mismo rango que copiar y revelar, y **el mismo color de hover para los dos**: son
   un par inverso, y darle a cada uno el suyo los separaria visualmente justo cuando lo util es leerlos juntos. */
.fb-upload, .fb-zip { color: var(--muted); }
.fb-upload:hover, .fb-zip:hover { color: var(--accent, #519aba); }
/* El campo de archivo real vive escondido junto a la fila: hace falta que este en el DOM para poder abrirlo,
   pero `display:none` impide que algunos navegadores lo activen por codigo. */
.fb-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.fb-empty, .fb-error { color: var(--muted); font-size: .8rem; padding: .5rem .35rem; margin: 0; }
/* **Un recuadro, y sin gritar** (usuario, 2026-09-03: *«ponle un borde al error "no se pudo leer...", y no lo
   hagas tan furioso»*). El texto en rojo suelto dentro del arbol se leia como si el arbol se hubiera roto —y
   ademas se confundia con un nombre de archivo—: lo que dice casi siempre es un estado del que hay que
   enterarse, no una averia. Va en el color de aviso, dentro de su caja, para que se vea que es un mensaje. */
.fb-error {
    color: var(--warn, #d9a441);
    border: 1px solid color-mix(in srgb, var(--warn, #d9a441) 45%, transparent);
    background: color-mix(in srgb, var(--warn, #d9a441) 10%, transparent);
    border-radius: .35rem; padding: .35rem .45rem; margin: .2rem .35rem;
}

/* -------------------------------------------------------------------------------------------------------
   Densidad compacta (PWA).

   Qué cambia y por qué, que es donde estaba el problema real de la lista táctil anterior:

   - **Sin `border-bottom` por fila.** Eran catorce líneas horizontales compitiendo con catorce nombres; el
     ritmo lo da el espaciado, no una regla dibujada entre cada par de elementos.
   - **Sin el guion decorativo** que la lista anterior ponía con un `::before`: gastaba una columna entera de
     cada fila sin informar de nada, y es justo el ancho que ahora necesita la sangría del árbol.
   - **Fila de 40 px, no de 56.** El objetivo táctil se mantiene cómodo y entran cinco entradas más por
     pantalla, que en un móvil es la diferencia entre ver la carpeta entera y no verla.
   - **Acciones siempre visibles**: en táctil no hay `hover`, así que revelarlas al pasar por encima las haría
     inalcanzables. Van atenuadas en lugar de ocultas.
   ------------------------------------------------------------------------------------------------------- */
/* Aquí sí: la PWA ocupa la pantalla, así que la lista es la que se desplaza y la tira del foco se queda fija. */
.fb-compact { flex: 1; min-height: 0; }
.fb-compact .fb-rows { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fb-compact .fb-item { padding: .5rem .3rem; font-size: .95rem; }
.fb-compact .fb-name { word-break: break-word; }
.fb-compact .fb-up { font-size: .95rem; padding: .5rem .3rem; }
.fb-compact .fb-empty, .fb-compact .fb-error { font-size: .9rem; }
/* En táctil no hay `hover`, así que el bloque **vuelve al flujo**: flotado sobre el nombre y siempre visible
   lo taparía para siempre, y oculto sería inalcanzable. Aquí sí paga su ancho, y está bien: la pantalla del
   móvil es más ancha que la columna del escritorio y las acciones son el gesto principal. */
.fb-compact .fb-actions {
    position: static; opacity: 1; pointer-events: auto; background: transparent;
    margin-left: auto; padding-left: 0;
}
.fb-compact .fb-action { opacity: .55; padding: .5rem .5rem; }
.fb-compact .fb-row:hover { background: transparent; }
.fb-compact .fb-row:active { background: var(--panel-2, rgba(127, 127, 127, .12)); }