/* ---------------------------------------------------------------------------
   Iconos del arbol de archivos de personal/.

   Los arbol*.php emiten 85 <img> de mapa de bits desde echo con comillas
   anidadas en tres niveles. Sustituirlos ahi es un campo minado, y no hace
   falta: content: url() reemplaza la imagen de un <img> sin tocar el PHP. Si
   un navegador no lo soportara, se ve el mapa de bits original: degrada, no
   rompe.

   Los colores son los mismos de la leyenda de index.php, que ya esta en
   vectores, para que el arbol y su leyenda digan lo mismo.

   Generado desde personal/rb_icons.php. Al cambiar un icono ahi, regenerar.
   --------------------------------------------------------------------------- */

/* ok.png -> listo (entregado: casa con rb-leyenda-ok) */
.rb-app .TreeView img[src$="/ok.png"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230089a6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%20%2F%3E%3C%2Fsvg%3E");
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* error.png -> pendiente. Triangulo de aviso, NO un reloj: el gif que
   sustituye ya era un triangulo y el equipo lo lee asi desde hace anios.
   Casa con rb-leyenda-pend. */
.rb-app .TreeView img[src$="/error.png"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b45309%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%3C%2Fsvg%3E");
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* 5.png -> historial (historial: casa con rb-leyenda-info) */
.rb-app .TreeView img[src$="/5.png"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23001a5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203v5h5%22%20%2F%3E%20%3Cpath%20d%3D%22M12%207v5l4%202%22%20%2F%3E%3C%2Fsvg%3E");
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* n_a.jpg -> no aplica. La sigla NA, que es lo que mostraba la pantalla
   anterior; un candado se leia como "bloqueado" y confundia. Gris
   apagado porque es el unico estado que no reclama ninguna accion. */
.rb-app .TreeView img[src$="/n_a.jpg"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2218%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2219%22%20font-weight%3D%22700%22%20letter-spacing%3D%22-1%22%20fill%3D%22%235b6b8a%22%20stroke%3D%22none%22%3ENA%3C%2Ftext%3E%3C%2Fsvg%3E");
	/* Mas grande que los demas iconos de estado a proposito: son dos
	   letras, no un dibujo, y a 16px no se leian. */
	width: 22px;
	height: 20px;
	vertical-align: middle;
}

/* add.png -> subir (registrar observacion) */
.rb-app .TreeView img[src$="/add.png"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23001a5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%20%2F%3E%20%3Cpath%20d%3D%22m17%208-5-5-5%205%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%20%2F%3E%3C%2Fsvg%3E");
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* El icono de tipo de archivo se emite como <nombre-de-extension>.gif
   (pdf.gif, doc.gif, xls.gif...). Se unifican todos en un solo vector. */
.rb-app .TreeView img[src$=".gif"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235b6b8a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%22%20%2F%3E%20%3Cpath%20d%3D%22M14%202v5a1%201%200%200%200%201%201h5%22%20%2F%3E%20%3Cpath%20d%3D%22M10%209H8%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2013H8%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2017H8%22%20%2F%3E%3C%2Fsvg%3E");
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* none.gif es un hueco, no un icono: ocupa sitio y no dibuja nada. */
.rb-app .TreeView img[src$="/none.gif"] {
	content: none;
	width: 16px;
	height: 16px;
	visibility: hidden;
}

/* ---------------------------------------------------------------------------
   Posicion del icono de historial.

   Los arbol*.php colocan cada columna con pixeles absolutos: left:300px el
   icono de estado, 320px el historial, 335px la observacion, y de 350px en
   adelante las iniciales de SUP, GER, SOC y CCA.

   rb.css ya devuelve al flujo los enlaces con atributo opx, que son los de
   estado. El de historial no lo lleva, asi que seguia anclado a 320px y se
   montaba encima del texto en cuanto el nombre del archivo pasaba de ahi.
   Se le da el mismo trato.

   Las columnas de iniciales NO se tocan: su posicion absoluta es lo que las
   mantiene alineadas bajo sus cabeceras.
   --------------------------------------------------------------------------- */
.rb-app .TreeView a.ahist {
	position: absolute !important;
	left: auto !important;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Columna de estado: el aviso/check/NA y el historial.

   Iban en el flujo, justo detras del nombre del archivo, asi que cada fila los
   dejaba en una x distinta segun lo largo que fuera ese nombre. En una lista
   de cuarenta filas eso obliga a buscar el icono linea por linea en vez de
   recorrer una columna con la vista.

   Se anclan por la DERECHA de la tabla, igual que las iniciales de visto
   bueno, y quedan justo a su izquierda:

       [ nombre del archivo ...... ] [estado] [hist] [Sup][Ger][Soc][CCa]
                                     \__ --rb-est-col __/\__ 4 x --rb-vb-col __/

   Siguen absolutos y sin top, de modo que cada ancla conserva la posicion
   vertical de su propia fila. Es el mismo recurso que ya usan las columnas de
   visto bueno y las acciones del contenido de una metodologia. */

.rb-app table:has(.TreeView) { --rb-est-col: 56px; }

/* El historial, pegado a las iniciales. */
.rb-app .TreeView a.ahist {
	right: calc(var(--rb-vb-col) * 4 + 6px);
}

/* El estado, a su izquierda. */
.rb-app .TreeView a[opx] {
	position: absolute !important;
	left: auto !important;
	right: calc(var(--rb-vb-col) * 4 + 32px);
	margin-left: 0;
}

/* Hueco para que un nombre largo no se meta debajo de los iconos. Solo en la
   fila de archivo: las carpetas no llevan ninguno de los dos.

   El overflow es necesario ademas del padding: estas filas llevan
   white-space:nowrap, asi que sin el un nombre largo ignora el hueco
   reservado y se dibuja por encima de la columna de iconos. Con el, se corta
   con puntos suspensivos. El nombre completo sigue disponible al pasar el
   cursor: los arbol*.php emiten el enlace SIN title, asi que lo copia
   rbTitularArchivos() en personal/index.php.

   Los iconos no se recortan: estan anclados a la tabla, no a esta fila, asi
   que el overflow de aqui no les afecta. */
.rb-app .TreeView li.Archivo {
	padding-right: calc(var(--rb-vb-col) * 4 + var(--rb-est-col));
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Marcadores de visto bueno: Sup, Ger, Soc y CCa.

   Los arbol*.php escriben ** para el gerente, .. para el socio y __ para
   control de calidad mientras el visto bueno esta pendiente, y las iniciales
   de quien firmo cuando ya se dio. Los simbolos SE CONSERVAN: el equipo lleva
   anios leyendolos.

   Lo que cambia es que se distingan de un vistazo. La clase la pone
   rbMarcarVistoBueno() en index.php, leyendo el op= del enlace, porque desde
   CSS no hay forma de saber si un texto es un marcador pendiente o son las
   iniciales de alguien. Esa misma funcion pone el titulo que sale al pasar el
   cursor, que antes no existia: los simbolos no decian de quien eran.

   El <font color=black> que traen los arbol*.php se neutraliza aqui. */

.rb-app .TreeView a.aVisto {
	text-decoration: none;
	font-size: .8125rem;
	letter-spacing: .04em;
}
.rb-app .TreeView a.aVisto font { color: inherit !important; }

/* Pendiente: gris apagado y en monoespaciada, para que ** .. y __ se lean como
   huecos por rellenar y no como contenido. */
.rb-app .TreeView a.rb-vb-pend {
	color: #9a9a9a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rb-app .TreeView a.rb-vb-pend:hover {
	color: var(--tw-color-rb-cyan-dark);
	text-decoration: underline;
}

/* Firmado: navy y con peso, porque ya es un dato y no un hueco. */
.rb-app .TreeView a.rb-vb-ok {
	color: var(--tw-color-rb-navy);
	font-weight: 600;
}
.rb-app .TreeView a.rb-vb-ok:hover {
	color: var(--tw-color-rb-cyan-dark);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Columnas de visto bueno: Sup, Ger, Soc y CCa.

   El arbol vive dentro de una tabla con CINCO cabeceras pero UNA sola celda de
   cuerpo: index.php mete el <ul class=TreeView> entero en el primer <td>. Las
   cuatro columnas de la derecha no existen como celdas; los arbol*.php las
   fingian con anclas absolutas a left:390, 440, 490 y 540 pixeles.

   Verificado en captura: las cabeceras caen cerca de x=886..1012 y las anclas
   se dibujan en x=440..480. Nunca coincidieron, y ademas se montan encima del
   nombre del archivo y de sus iconos cuando el nombre es largo.

   Se les da origen comun en la tabla y se anclan POR LA DERECHA con el mismo
   ancho que las cabeceras, gobernado por una sola variable.

   Siguen absolutas a proposito: sin top, cada ancla conserva su posicion
   vertical natural, que es su propia fila. */

.rb-app table:has(.TreeView) {
	position: relative;
	--rb-vb-col: 40px;
	/* Sin table-layout fijo el navegador reparte el sobrante entre las cinco
	   columnas: las cabeceras acababan midiendo 41, 42 o 43px en vez de 40, y
	   como los marcadores se anclan por la derecha con multiplos exactos de
	   --rb-vb-col, cada uno caia unos 8px corrido respecto a su cabecera.
	   MEDIDO: cabecera Sup en 546-588 y su marcador en 554-594. */
	table-layout: fixed;
	width: 100%;
}

.rb-app table:has(.TreeView) > thead th:nth-child(n+2) {
	width: var(--rb-vb-col);
	min-width: var(--rb-vb-col);
	text-align: center;
	white-space: nowrap;
}

.rb-app .TreeView a.aVisto {
	position: absolute !important;
	left: auto !important;
	width: var(--rb-vb-col, 44px);
	text-align: center;
}
.rb-app .TreeView a.aVisto[href*="op=vb&"]  { right: calc(var(--rb-vb-col) * 3); }
.rb-app .TreeView a.aVisto[href*="op=vb0&"] { right: calc(var(--rb-vb-col) * 2); }
.rb-app .TreeView a.aVisto[href*="op=vb1&"] { right: calc(var(--rb-vb-col) * 1); }
.rb-app .TreeView a.aVisto[href*="op=vb2&"] { right: 0; }

/* No se toca el ancho ni el ajuste de linea de las filas.

   Se probo reservar una franja con padding-right para el nombre: con el
   white-space:nowrap que trae rb.css, el ancho de la tabla crecia por encima
   del contenedor, .table-responsive la desbordaba y tanto las cabeceras
   Sup/Ger/Soc/CCa como las propias columnas quedaban fuera del area visible.
   Y al quitar el nowrap para evitarlo, los nombres se partian en varias
   lineas y los iconos caian sueltos debajo. Ambas cosas verificadas en
   captura.

   No hace falta: anclando las columnas a la derecha de la tabla quedan cerca
   de x=880 en adelante, y el nombre mas largo de la metodologia termina antes
   de x=520. El choque que se veia venia de que las anclas estaban a la
   izquierda, en mitad de la fila, no de que faltara sitio. */

/* ---------------------------------------------------------------------------
   Latido del panel "Historia Archivo".

   Ese panel esta en la columna derecha, muy por debajo del arbol. Al pulsar el
   icono de historial se rellenaba sin mas, y desde arriba no se notaba: el
   boton parecia no hacer nada. rbAvisarHistorial() en index.php baja hasta el
   panel y le pone esta clase durante dos segundos.

   El resalte va en el borde y en una sombra, no en el fondo, para que el texto
   del historial no cambie de contraste mientras se lee. */

@keyframes rb-latido {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tw-color-rb-cyan) 55%, transparent); }
	70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--tw-color-rb-cyan) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tw-color-rb-cyan) 0%, transparent); }
}

.rb-app .panel.rb-destacar {
	border-color: var(--tw-color-rb-cyan);
	animation: rb-latido 1s ease-out 2;
}

/* Quien pidio menos movimiento recibe el resalte, pero sin pulso. */
@media (prefers-reduced-motion: reduce) {
	.rb-app .panel.rb-destacar { animation: none; }
}

/* ---------------------------------------------------------------------------
   Descargar todo en zip, dentro del arbol recargado.

   index.php ya dibuja ese boton con rb_icono('descargar'), pero
   frm_archivos.php —el fragmento que REEMPLAZA el arbol al pulsar
   'Actualizar'— sigue emitiendo el winrar.jpg de siempre. Resultado: el
   icono era vectorial al cargar la pagina y volvia a ser un mapa de bits
   en cuanto se refrescaba el arbol. Solo se veia despues de interactuar.

   Se sustituye desde aqui, sin tocar frm_archivos.php. */

.rb-app img[src$="/winrar.jpg"] {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23001a5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V3%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%20%2F%3E%3C%2Fsvg%3E");
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Tipografia del arbol.

   MEDIDO con getComputedStyle sobre la pagina renderizada: el nombre de cada
   archivo salia a 10px en Helvetica, mientras la carpeta que lo contiene
   estaba a 14px. El texto mas importante de la pantalla era el mas pequenio y
   el unico que no usaba la tipografia del sistema.

   La causa no esta en el arbol: estilo.css declara
       A:link, A:visited, A:active, A:hover { FONT-FAMILY: Helvetica; FONT-SIZE: 10px }
       td { FONT-FAMILY: helvetica; FONT-SIZE: 12px }
   para TODA la aplicacion. Esa hoja entra por @import en la capa rb-legacy, y
   como rb.css no declara nada para estos enlaces, no habia quien le ganara.

   Aqui se corrige solo dentro del arbol, sin tocar estilo.css, que sigue
   sirviendo a las pantallas que nadie ha reestilado todavia.

   Se conserva una jerarquia de dos niveles: la carpeta pesa mas que su
   contenido, que es como se leia antes; lo que cambia es que ahora las dos se
   leen. */

.rb-app td:has(.TreeView),
.rb-app .TreeView {
	font-family: var(--tw-font-sans);
}

.rb-app .TreeView li.Collapsed,
.rb-app .TreeView li.Expanded {
	font-size: .875rem;
}

.rb-app .TreeView li.Archivo {
	font-size: .8125rem;
}

/* El nombre del archivo vuelve a heredar de su fila. Sin esto gana el
   A:link de estilo.css, que es donde estaban los 10px. */
.rb-app .TreeView li a:not(.aVisto):not(.ahist) {
	font-family: inherit;
	font-size: inherit;
}

/* ---------------------------------------------------------------------------
   Combos de Kendo UI: selector de auditoria y las tres rutas de carga.

   Son los unicos controles de personal/ que no pasaron por el reestilado,
   porque no son <select> ni .form-control: Kendo UI v2014.3.1316 los sustituye
   en tiempo de parseo por un <span class="k-dropdown-wrap"> y COPIA al envoltorio
   los estilos en linea del <select> original.

   MEDIDO con getComputedStyle sobre la pagina renderizada:
     .k-dropdown-wrap  410x34  font-size 9.33px  font-family arial  bg #f3f3f4
     .k-i-arrow-s      16x16   font-size 0px     texto "select"
   Frente a los 14px Roboto del resto de la pantalla. Los 9.33px son los 7pt
   que index.php escribe en linea, junto con width:410px (el selector de
   auditoria) o width:280px (las rutas) y text-transform:uppercase.

   El cuadrado gris que se veia a la derecha del campo era la flecha: Kendo la
   dibuja con un icono de su propia fuente, que esta app no carga. Quedaba un
   hueco de 16x16 con la palabra "select" dentro, oculta por font-size:0.

   Se corrige desde aqui y no en index.php porque los estilos en linea los pone
   Kendo al construir el envoltorio: cualquier cambio en el marcado lo pisaria
   igual. De ahi los !important, que aqui no son un atajo sino la unica forma
   de ganarle a un atributo style.

   El ancho fijo se sustituye por el ancho de la celda: con la columna del
   arbol y la de carga al 50% cada una, 410px ya no cabian. */

/* El ancho NO se fuerza a 100%: verificado en captura, el envoltorio de Kendo
   cuelga de contenedores sin ancho propio (un .col-lg-4 dentro de un <td>, y
   en la cabecera una celda de rejilla), y el porcentaje se resolvia contra
   cero: los combos quedaban en un cuadrado de 30px y la ficha del encargo se
   descolocaba entera. Se conserva el ancho que escribe index.php y solo se le
   pone techo para que no desborde su columna. */
.rb-app .k-widget.k-combobox,
.rb-app .k-widget.k-dropdown {
	max-width: 100%;
}

/* Donde el contenedor SI tiene ancho propio —la celda de la tabla de carga y
   la ficha del encargo— el combo ocupa ese ancho. En ambos casos hay que
   anular antes el .col-lg-4 que libs/sAudasig.php e index.php meten entre
   medias: reduce el hueco a un tercio y es lo que dejaba el selector de
   cliente en 118px de los 410 que pedia. */
.rb-app td .col-lg-4:has(.k-widget),
.rb-app .rb-ctx-selector .col-lg-4 {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.rb-app td .k-widget.k-combobox,
.rb-app .rb-ctx-selector .k-widget.k-combobox {
	width: 100% !important;
}

/* La ficha del encargo reserva 20rem para el selector; el de cliente es el
   unico control accionable de esa franja y agradece algo mas de sitio. */
.rb-app .rb-ctx-selector { flex-basis: 26rem; }

/* sAudasig.php emite su propio <label>Cliente</label> dentro del bloque que ya
   viene rotulado "Cambiar de auditoria". Sobra el segundo rotulo. */
.rb-app .rb-ctx-selector .form-group > label { display: none; }

.rb-app .k-dropdown-wrap {
	background: #fff !important;
	background-image: none !important;
	border-color: color-mix(in srgb, var(--tw-color-rb-navy) 20%, transparent) !important;
	border-radius: .375rem !important;
	height: auto !important;
	box-shadow: none !important;
}

.rb-app .k-dropdown-wrap.k-state-focused,
.rb-app .k-dropdown-wrap.k-state-hover {
	border-color: var(--tw-color-rb-cyan) !important;
	box-shadow: none !important;
}

.rb-app .k-dropdown-wrap > .k-input,
.rb-app .k-dropdown-wrap > .k-input[type="text"] {
	font-family: var(--tw-font-sans) !important;
	font-size: .8125rem !important;
	text-transform: none !important;
	height: 2.125rem !important;
	line-height: 2.125rem !important;
	padding: 0 .625rem !important;
	color: var(--tw-color-rb-ink) !important;
	background: transparent !important;
	border: 0 !important;
}

.rb-app .k-dropdown-wrap > .k-input::placeholder {
	color: var(--tw-color-rb-text) !important;
	text-transform: none !important;
}

/* La flecha. El texto "select" que Kendo deja dentro ya va a font-size 0;
   lo que faltaba era el dibujo, que se pone como fondo en vez de como
   glifo para no depender de la fuente de iconos de Kendo. */
.rb-app .k-select {
	background: transparent !important;
	border: 0 !important;
	width: 2rem !important;
	height: 2.125rem !important;
}

.rb-app .k-icon.k-i-arrow-s {
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235b6b8a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1rem;
}

/* La lista desplegable comparte tipografia con el campo. */
.rb-app + .k-animation-container .k-list,
.k-animation-container .k-list {
	font-family: var(--tw-font-sans);
	font-size: .8125rem;
	text-transform: none;
}

/* ---------------------------------------------------------------------------
   Selector de archivo de la carga.

   El control nativo no encoge por debajo de su ancho intrinseco, asi que al
   repartir la fila en dos columnas iguales el nombre del archivo quedaba
   cortado por el borde de la celda. Se le permite encoger. */

.rb-app input[type="file"].form-control {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: .375rem .5rem;
	font-size: .8125rem;
}

/* ---------------------------------------------------------------------------
   Tablas de los paneles de personal/.

   Misma causa que la tipografia del arbol: estilo.css declara
   td { FONT-FAMILY: helvetica; FONT-SIZE: 12px } para toda la aplicacion, y
   las tablas de "Ultimos archivos enviados" e "Historial del archivo" se
   quedaban en Helvetica mientras el resto de la pantalla va en Roboto.

   Se excluye la celda que contiene el arbol, que tiene su propia escala. */

.rb-app .panel-body > table.table > thead th,
.rb-app .panel-body > table.table > tbody td:not(:has(.TreeView)) {
	font-family: var(--tw-font-sans);
	font-size: .8125rem;
}

/* ---------------------------------------------------------------------------
   Las dos tablas de la columna derecha: "Ultimos archivos enviados" e
   "Historial del archivo".

   Llevaban la clase .table-fixed, que no es de Bootstrap: era un truco local
   para dar scroll al cuerpo de la tabla poniendo display:block y float:left a
   thead, tbody, tr, td y th. Al dejar de ser celdas, el reparto de columnas
   quedaba en manos de las clases col-xs-* de la rejilla, y esas solo estaban
   en los <th>; los <td> flotaban con el ancho de su contenido.
   MEDIDO: cabecera Kb en x=900 y su dato en x=817, en una tabla de 538px.

   Ahora son tablas normales: las columnas las reparte table-layout:fixed y el
   scroll con cabecera fija lo hace position:sticky, que no necesita sacar las
   celdas del modelo de tabla. */

.rb-app .rb-tabla-scroll {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 0;
}

.rb-app .rb-tabla-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--tw-color-rb-mist, #f7f7f7);
}

.rb-app .rb-tabla-scroll td,
.rb-app .rb-tabla-scroll th {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rb-app .rb-tabla-scroll .text-right { text-align: right; }

/* El cuerpo con scroll: el contenedor es el .panel-body, que ya envuelve a
   cada una de las dos tablas. */
.rb-app #hist,
.rb-app .panel-body:has(> .rb-tabla-scroll) {
	max-height: 14rem;
	overflow-y: auto;
}

/* Historial: nombre de archivo, tamanio, fecha y quien lo envio. La fecha
   lleva hora, asi que necesita sitio para "2023-03-31 17:44:22" entero: con
   un 20% se cortaba en "17:44:...". */
.rb-app #hist .rb-tabla-scroll th:nth-child(1) { width: 38%; }
.rb-app #hist .rb-tabla-scroll th:nth-child(2) { width: 10%; }
.rb-app #hist .rb-tabla-scroll th:nth-child(3) { width: 26%; }
.rb-app #hist .rb-tabla-scroll th:nth-child(4) { width: 26%; }

/* ---------------------------------------------------------------------------
   Altura de los cuatro paneles de personal/.

   Venian con min-height:134%, 48%, 40% y height:40% en el atributo style. Un
   porcentaje de altura se mide contra el alto del padre, que aqui no tiene
   ninguno declarado, asi que el resultado dependia del contenido de al lado y
   no de lo que cada panel tiene dentro. VISTO EN CAPTURA: con el arbol
   plegado, el panel de archivos ocupaba 1079px para tres carpetas, y el de
   carga 386px para una sola linea de texto. La pantalla era casi toda vacio.

   Ahora cada panel mide lo que necesita, con un suelo para que los que estan
   vacios no queden raquiticos. */

.rb-app #tree.panel,
.rb-app .panel.panel-primary {
	min-height: 8rem;
}