/* ============================================================================
panel.css — lo que el panel necesita y ni Tabler ni la marca cubren.
QUÉ NO VA ACÁ: nada de la marca. Los colores, radios, sombras y la escala
tipográfica viven en wedo.css, que es el único archivo que traduce el
brandbook a variables `--tblr-*`. Si una regla de acá necesita un color,
lo pide por token — no lo escribe.
DE DÓNDE SALE: es el residuo de las 957 líneas que estaban pegadas adentro
de base.html más static/css/style.css. De todo eso sobrevivieron TRES
clases: las que las pantallas todavía usan de verdad (`addproject`,
`margin20`, `toprow`). El resto —`boxxes`, `tablefo`, `marginb20`,
`.message/.success/.error`, `.sidebar-cta`, `a.nav-links` y un bloque de
SCSS sin compilar con variables `$sidebar-*`— no lo referenciaba ninguna
plantilla. Se comprobó una por una antes de borrar.
========================================================================== */
/* ── El shell ────────────────────────────────────────────────────────────── */
/* El nombre al lado del símbolo. Se esconde en pantallas chicas porque ahí la
barra lateral colapsa y el símbolo solo ya identifica la marca. */
.panel-marca-texto {
margin-left: .55rem;
font-weight: 600;
font-size: var(--fs-body);
letter-spacing: -.01em;
color: var(--wedo-fg-1);
}
@media (max-width: 575.98px) {
.panel-marca-texto { display: none; }
}
/* El código de idioma en la topbar: es una etiqueta, no texto de lectura. */
.panel-idioma {
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: var(--ls-caption);
}
/* ── Lo que sobrevivió del panel viejo ───────────────────────────────────────
Estas tres las usan add_project.html, edit_project.html y las cinco
pantallas con `toprow`. Se conservan con el MISMO nombre para no tocar las
plantillas —eso es la fase F4— pero pidiendo los valores por token en vez de
traer los hexadecimales de Bootstrap 4 que tenían adentro. */
.addproject {
display: inline-block;
padding: .5rem .9rem;
border: 0;
border-radius: var(--r-md);
background: var(--tblr-primary);
color: var(--wedo-white);
font-weight: 500;
text-decoration: none;
}
.addproject:hover { color: var(--wedo-white); text-decoration: none; }
.margin20, .toprow { margin-top: 20px; }
/* Los PNG de la marca son cuadrados OPACOS (sin alfa): sin radio se ven como
un recorte pegado sobre la barra. El radio chico los vuelve una ficha. */
.navbar-brand .wedo-simbolo { border-radius: var(--r-sm); }
/* ── La barra de carga ──────────────────────────────────────────────────────
Entre el click y la pantalla nueva hay un hueco donde no pasa nada visible.
Esto lo llena. Va arriba de todo y no ocupa espacio: no empuja el contenido
ni cambia la altura, así que no puede romper ninguna maqueta. */
.panel-cargando {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
block-size: 3px;
inline-size: 0;
background: var(--tblr-primary);
box-shadow: 0 0 8px rgba(var(--tblr-primary-rgb), .6);
z-index: 2000;
transition: inline-size .12s linear;
}
/* Quien pidió menos movimiento no ve ni la barra ni los números creciendo. */
@media (prefers-reduced-motion: reduce) {
.panel-cargando { display: none; }
}
/* ── La barra lateral plegada ────────────────────────────────────────────────
LO QUE NO HAY QUE ESCRIBIR, Y POR QUÉ. Tabler 1.5.1 ya trae el modo angosto
entero: `data-bs-sidebar="folded"` en el `` cambia `--tblr-sidebar-
width` por `--tblr-sidebar-folded-width` (4rem), le pone `width:0;opacity:0`
a los `.nav-link-title` y deja los iconos. Se leyó su CSS real antes de
escribir una línea — no está en la documentación visible, pero está.
Todo lo de acá abajo es SÓLO lo que Tabler no cubre: la marca, el centrado
del icono y el texto para quien navega con teclado.
Y TODO va dentro de este `@media`, igual que las reglas de Tabler: por
debajo de 992px la barra no es lateral —es un menú que abre el toggler de
Bootstrap, con los textos a la vista— y plegarla no significa nada. Una
regla suelta acá afuera le borraría el nombre de las secciones al que entra
desde el teléfono. */
@media (min-width: 992px) {
/* El nombre «Panel WeDo» no entra en 4rem: queda el símbolo solo, centrado.
El padding se pide por la variable que Tabler expone para eso en vez de
redeclarar su `padding`, que es la diferencia entre pasarle un valor al
framework y pelearse con él. */
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .navbar-brand {
--tblr-sidebar-brand-padding-x: 0;
justify-content: flex-start;
}
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .navbar-brand .wedo-simbolo {
margin-inline: calc((var(--tblr-sidebar-folded-width) - 32px) / 2);
}
html[data-bs-sidebar="folded"] .panel-marca-texto { display: none; }
/* Sin el texto al lado, el icono queda pegado al borde izquierdo: centrarlo
es lo que vuelve la columna una columna y no una lista recortada. Tabler
centra el `.nav-link` por defecto y lo vuelve a `start` justo en la barra
vertical de escritorio — acá se le devuelve el valor que él mismo usa.
El `position` es el ancla de la etiqueta de abajo. Tabler ya lo declara,
pero se repite A PROPÓSITO: si mañana lo saca, la etiqueta no se
descoloca un poco, se va al borde de la ventana. Una regla que depende
de un detalle no documentado de otro paquete se cae sin avisar. */
/* LOS-ICONOS-EN-UNA-COLUMNA (23-sep, pedido del usuario). Centrar el item
entero se veía bien plegado, pero al abrirse por hover el icono se corría
al medio y el texto quedaba flotando: feo, y cada icono en una x distinta.
Ahora el icono vive en una columna FIJA del ancho de la barra plegada y
el texto se suma a su derecha: plegado o abierto, cada icono queda en el
mismo lugar y nada salta. */
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .nav-link {
position: relative;
justify-content: flex-start;
padding-inline: 0;
}
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .nav-link-icon {
inline-size: var(--tblr-sidebar-folded-width);
display: inline-flex;
justify-content: center;
flex: 0 0 auto;
margin: 0;
}
/* EL TEXTO PARA EL TECLADO. Plegada, el que usa el mouse tiene el `title`
del enlace y el lector de pantalla tiene el nombre accesible intacto
—Tabler esconde el título con `width:0`, que lo saca de la vista pero no
del árbol de accesibilidad—. El que tabula con el teclado no tenía
ninguno de los dos: veía siete iconos y un anillo de foco.
Acá el título del item enfocado sale flotando al costado. Se puede porque
Tabler ya le pone `overflow:visible` a la barra y al `.navbar-collapse`
cuando está plegada —lo necesita para sus propios menús laterales—, así
que la etiqueta no queda recortada contra el borde de 4rem.
Se eligió esto y NO abrir la barra entera al enfocar: abrirla mueve el
borde y tapa el contenido, y el objetivo es leer una palabra. */
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .nav-link:focus-visible .nav-link-title {
position: absolute;
inset-inline-start: calc(100% + .5rem);
inset-block-start: 50%;
transform: translateY(-50%);
z-index: 1031; /* la barra lateral de Tabler vive en 1030 */
width: auto;
padding: .25rem .625rem;
opacity: 1;
font-size: var(--fs-caption);
color: var(--wedo-fg-1);
background: var(--tblr-bg-surface);
border: 1px solid var(--tblr-border-color);
border-radius: var(--r-sm);
box-shadow: var(--tblr-shadow-lg);
}
}
/* ── El menú plegado se abre al acercar el cursor ────────────────────────────
Pedido del usuario: plegado muestra sólo iconos, y al acercarse se despliega.
TRES DECISIONES QUE NO SON DE GUSTO:
1. **Se SUPERPONE, no empuja.** Si al desplegarse corriera el contenido, la
pantalla entera saltaría cada vez que el cursor pasa cerca del borde
izquierdo — y pasa todo el tiempo, sin intención de abrir el menú. Por eso
la barra crece sobre el contenido y el `page-wrapper` no se entera.
2. **Sólo donde hay cursor de verdad.** `hover: hover` deja fuera a las
pantallas táctiles, donde «hover» se dispara con el primer toque y el menú
se abriría solo al tocar cualquier cosa cerca. Ahí queda el botón, que
sigue estando.
3. **Sólo con la barra plegada.** Expandida no hay nada que desplegar. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg {
transition: width .18s ease;
width: var(--tblr-sidebar-folded-width);
z-index: 1030;
}
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:hover,
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:focus-within {
width: 16rem;
box-shadow: var(--sh-3);
}
/* El texto vuelve mientras está abierta. Tabler lo esconde con
`width:0; opacity:0`, así que se revierte exactamente eso y nada más. */
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:hover .nav-link-title,
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:focus-within .nav-link-title {
width: auto;
opacity: 1;
transition: opacity .18s ease .04s;
}
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:hover .panel-marca-texto,
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:focus-within .panel-marca-texto {
display: inline;
}
/* LA-ETIQUETA-QUE-SE-IBA-DE-LA-FILA (23-sep). Con la barra abierta —por el
cursor o porque alguien tabuló adentro— la etiqueta flotante del foco
sobra: el texto ya está al lado, en su fila.
La regla que intentaba apagarla apuntaba a `.nav-link:focus-visible::after`
y ese pseudo-elemento NO EXISTE: la etiqueta se dibuja sobre el
`.nav-link-title` de verdad, unas líneas más arriba. O sea que era una
regla muerta, y su efecto de verdad era el contrario del que dice el
comentario: al tabular con la barra ABIERTA, la regla de arriba —que gana
por especificidad— le sacaba el título a su fila y lo mandaba a flotar a
16rem del borde, encima del contenido. El item enfocado quedaba sin
nombre y el nombre quedaba sin item.
Sólo se revierte lo que aquella regla puso; el `width:auto` y el
`opacity:1` los quiere también el estado abierto, así que no se tocan. */
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:hover .nav-link:focus-visible .nav-link-title,
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg:focus-within .nav-link:focus-visible .nav-link-title {
position: static;
inset: auto;
transform: none;
z-index: auto;
padding: 0;
font-size: inherit;
color: inherit;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
}
/* Quien pidió menos movimiento: el menú se abre igual, pero sin animar. */
@media (prefers-reduced-motion: reduce) {
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg,
html[data-bs-sidebar="folded"] .navbar-vertical.navbar-expand-lg .nav-link-title {
transition: none;
}
}
/* ── El botón de plegar ──────────────────────────────────────────────────────
Se muestra en UN solo caso: pantalla ancha (la barra es lateral de verdad) y
SIN hover (una tablet en horizontal). Con cursor el menú se despliega
acercándose y el botón es ruido; por debajo de 992px la barra es un menú
desplegable y plegarla no hace nada.
Va en negativo —oculto por defecto, visible en ese caso— para no tener que
ganarle con `!important` a las utilidades de Bootstrap. */
.panel-plegar { display: none; }
@media (min-width: 992px) and (hover: none) {
.panel-plegar { display: flex; }
}
/* ── El enlace de «saltar al contenido» ──────────────────────────────────────
Está SIEMPRE en el DOM y es la primera parada del tabulador; lo que cambia
al enfocarlo es dónde se dibuja.
POR QUÉ `transform` Y NO `display:none` NI `visibility:hidden`: esos dos
sacan al elemento del recorrido del tabulador, así que el enlace no se
podría enfocar — y un enlace de salto que no se puede enfocar no existe.
Con `position:fixed` no ocupa lugar en la maqueta y no puede empujar nada,
y corrido hacia arriba queda fuera de la ventana sin dejar de ser
enfocable. Tampoco se usa la utilidad de Bootstrap: ésta necesita quedar
por encima de la cortina de carga, y eso es una regla propia.
El z-index va por encima de la barrita de carga (2000) y de la barra
lateral de Tabler (1030): enfocado tiene que verse sobre todo. */
.panel-saltar {
position: fixed;
inset-block-start: .5rem;
inset-inline-start: .5rem;
z-index: 2100;
padding: .5rem .9rem;
border-radius: var(--r-sm);
/* SUPERFICIE Y NO EL AZUL DE MARCA, y es el único detalle discutible de esta
regla. Blanco sobre `--tblr-primary` da 2.8:1 en modo oscuro, por debajo
del 4.5:1 que pide texto normal — el resto del panel lo hace igual (los
botones primarios de Tabler, `.addproject`) y ahí es una decisión de marca
tomada. Acá no: esto es JUSTAMENTE la pieza para quien no puede usar el
mouse, y que se lea mal sería el chiste al revés. Sobre la superficie, con
el color de texto del tema, contrasta en los dos y el borde azul lo
mantiene inconfundible. */
background: var(--tblr-bg-surface);
color: var(--wedo-fg-1);
border: 2px solid var(--tblr-primary);
box-shadow: var(--sh-3);
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
}
.panel-saltar:focus {
transform: translateY(0);
color: var(--wedo-fg-1);
}
/* El destino del salto recibe el foco por programa y no es un control: el
anillo ahí no dice nada que el salto no haya dicho ya, y encuadra la
pantalla entera. El foco SÍ se mueve — que es lo único que importaba. */
#contenido:focus {
outline: none;
}
/* ── «Afinar un proyecto» ────────────────────────────────────────────────────
Diez reglas, y ninguna es un color: todo sale de los tokens de wedo.css. Lo
que Tabler no cubre acá es geometría — una miniatura que no se deforme, una
URL larga que no rompa la tarjeta, y una fila marcada para borrar que se
distinga de una viva sin desaparecer. */
/* La fila de una lista editable. El borde es lo que la vuelve una unidad: sin
él, ocho campos seguidos se leen como un formulario de cuarenta. */
.afinar-fila {
padding: .75rem;
border: 1px solid var(--tblr-border-color);
border-radius: var(--r-md);
background: var(--tblr-bg-surface);
}
.afinar-lista .afinar-fila + .afinar-fila { margin-top: .5rem; }
/* Quitada: se ve que se va, pero se sigue leyendo — hay que poder arrepentirse
mirando lo que se está por perder. Los campos ya están `disabled`, así que
el navegador los atenúa solo; esto es lo que marca la FILA.
`opacity` y no `display:none` a propósito: una fila que desaparece no tiene
dónde poner el botón de deshacer. */
.afinar-fila-quitada {
opacity: .5;
border-style: dashed;
border-color: var(--tblr-danger, var(--wedo-fg-3));
}
/* Un hijo de flex no se recorta si no se le permite achicarse por debajo de su
contenido. Sin esto, `text-truncate` no trunca: estira la fila.
El piso de 10rem es para el teléfono: con miniatura, nombre y cuatro botones
en 360px el nombre quedaba en tres letras. Con este mínimo, el nombre se
trunca hasta ahí y los botones bajan de línea (la fila tiene `flex-wrap`);
en escritorio sobra ancho y nada se mueve. */
.afinar-recorte { min-width: min(100%, 10rem); }
/* La miniatura de cada imagen. `object-fit: cover` la recorta en vez de
deformarla — las URLs vienen con proporciones distintas de tres orígenes. */
.afinar-miniatura {
inline-size: 72px;
block-size: 48px;
flex: 0 0 auto;
object-fit: cover;
border-radius: var(--r-sm);
background: var(--tblr-bg-surface-secondary);
}
/* Una URL caída deja el icono de imagen rota, que se lee como un error de la
pantalla. Queda un rectángulo vacío, que se lee como lo que es: esa imagen
no está. El JS sólo agrega la clase; qué se ve lo decide el CSS. */
.afinar-miniatura-rota { visibility: hidden; }
.afinar-fachada {
inline-size: 100%;
max-block-size: 220px;
object-fit: cover;
border-radius: var(--r-md);
}
.afinar-mapa {
padding: .75rem;
border: 1px solid var(--tblr-border-color);
border-radius: var(--r-md);
background: var(--tblr-bg-surface-secondary);
}
/* El link de Maps es largo y no tiene espacios: sin esto empuja la tarjeta y
aparece una barra horizontal en toda la pantalla. */
.afinar-url {
display: block;
padding: .375rem .5rem;
border-radius: var(--r-sm);
background: var(--tblr-bg-surface);
font-size: var(--fs-caption);
overflow-wrap: anywhere;
}
/* Las directivas se MIRAN, no se editan acá: monoespaciada, con su salto de
línea, y con tope de alto para que un bloque de 700 caracteres no empuje el
riel entero fuera de la pantalla. */
.afinar-directivas {
max-block-size: 18rem;
overflow: auto;
margin: 0;
font-size: var(--fs-caption);
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--wedo-fg-2);
}
/* El riel queda a la vista mientras se baja por las siete secciones: es el
índice de lo que falta, y sirve justamente mientras se trabaja lejos de él.
Sólo en escritorio: en una columna única, pegarlo arriba taparía el
contenido en vez de acompañarlo. */
@media (min-width: 1200px) {
.afinar-riel {
position: sticky;
inset-block-start: 1rem;
}
}
/* ── Las listas de asesores e inmobiliarias (F9) ─────────────────────────────
Un menú de acciones por fila, y adentro cada acción sigue siendo su propio