/* ========================================================= BARRA SUPERIOR — medidas comunes a todas las pantallas RUTH.il POR QUÉ EXISTE ESTA HOJA ------------------------ Cada pantalla traía su propia barra y ninguna medía igual. Medido en el navegador antes de tocar nada: pantalla alto logo margen interruptor mis-tramites 76 44 56px no tenía mis-casos 76 44 56px no tenía mi-perfil 76 44 56px no tenía vehicles 72 34 48px 60x32 inmuebles 72 34 48px 60x32 promises 72 34 48px 60x32 lawyer 72 34 48px 52x28 home-lawyer 72 34 0px 52x28 notaria 72 34 48px no tenía declaracion 72 0 48px no tenía Se toma como medida buena la mayoritaria —72 de alto, logo de 34, margen de 48 y el interruptor de 60x32— y se aplica igual en todas. CÓMO SE USA Se carga DESPUÉS de la hoja propia de cada pantalla, para ganar en la cascada sin tener que subir la especificidad de cada regla ni repasar once hojas distintas. Solo toca la barra: nada de lo que hay debajo. ========================================================= */ /* ---------- ALTO Y MÁRGENES ---------- LA BARRA VA DENTRO DEL MISMO CONTENEDOR QUE EL CONTENIDO. Antes cada pantalla decidía por su cuenta. Medido a 1440px de ancho, la sangría del logo era: 198px portada, negocios, empezar (3 pantallas) 48px login, pagos, los 4 trámites, las 5 de administración, mis casos (13 pantallas) 58px crear cuenta (1 pantalla) Cada barra era simétrica dentro de sí misma, así que ninguna se veía torcida por separado. Lo que se veía era el SALTO: al pasar de la portada a cualquier otra pantalla, el logo se movía 150px hacia la izquierda. Esa es la sensación de "no está centrado". Se toma la medida de la portada —1220px centrados, que es el ancho del contenido del sitio— y se aplica a todas. El relleno lateral se mantiene igual que antes para que la sangría final siga siendo la misma que ya tenía la portada, y no se mueva nada allí. */ .navbar-ruth, nav.main-nav { height: 72px; box-sizing: border-box; /* La sangría se calcula, no se fija, y por eso la barra puede seguir ocupando todo el ancho. Eso importa en las pantallas de registro, donde la barra va fija arriba con un fondo difuminado: si la encogiéramos a 1220px, el difuminado dejaría de cubrir los lados y se vería la página pasar por detrás. Los tres sumandos son exactamente los de la portada: (100% - 1220px)/2 lo que sobra a cada lado del contenedor + 40px el relleno de ese contenedor + clamp(...) el relleno que la barra ya tenía A 1440px de ancho dan 198px, que es donde la portada tiene su logo. Por debajo de 1220 el primer sumando es 0 y queda igual que antes. */ padding-left: calc(max(0px, (100% - 1220px) / 2) + 40px + clamp(18px, 3.5vw, 48px)); padding-right: calc(max(0px, (100% - 1220px) / 2) + 40px + clamp(18px, 3.5vw, 48px)); display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* La portada YA mete su barra dentro de un .wrap de 1220px con 40px de relleno, así que los dos primeros sumandos de arriba ya se los aplicó el padre. Volver a sumarlos la metería 88px más adentro. Aquí solo queda el relleno propio de la barra. */ .wrap > nav.main-nav, .wrap > .navbar-ruth { padding-left: clamp(18px, 3.5vw, 48px); padding-right: clamp(18px, 3.5vw, 48px); } /* home-lawyer llevaba la barra dentro de un contenedor centrado y por eso quedaba pegada al borde (margen 0). Se le dan los mismos márgenes. */ nav.main-nav { box-sizing: border-box; } /* ---------- LOGO ---------- */ .navbar-ruth .nav-logo, nav.main-nav .nav-logo { display: flex; align-items: center; height: 34px; flex-shrink: 0; } .navbar-ruth .nav-logo img, nav.main-nav .nav-logo img { height: 34px; width: auto; object-fit: contain; } /* Solo uno de los dos logos se ve, según el tema. Va aquí porque declaracion.html no traía el par y se quedaba sin logo visible. */ .navbar-ruth .logo-dark, nav.main-nav .logo-dark { display: none; } .navbar-ruth .logo-light, nav.main-nav .logo-light { display: block; } :root[data-theme="dark"] .navbar-ruth .logo-dark, :root[data-theme="dark"] nav.main-nav .logo-dark { display: block; } :root[data-theme="dark"] .navbar-ruth .logo-light, :root[data-theme="dark"] nav.main-nav .logo-light { display: none; } /* ---------- LADO DERECHO ---------- */ .navbar-ruth .nav-right, .navbar-ruth .nav-actions, nav.main-nav .nav-right, nav.main-nav .nav-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* ---------- INTERRUPTOR DE TEMA ---------- */ /* Mismo tamaño en todas: 60x32 con el círculo de 24. Antes había dos tamaños distintos (60x32 y 52x28) según la pantalla. */ .theme-toggle { position: relative; width: 60px; height: 32px; border-radius: 100px; /* EL INTERRUPTOR SE VE IGUAL EN LAS 29 PANTALLAS. Antes tiraba de --page-border y --page-card. Esos dos tokens los redefinen por su cuenta las hojas de los chats de vehículo e inmueble, así que el mismo botón salía blanco con borde claro en esos dos sitios y gris con borde oscuro en los demás: el control que sirve para lo mismo en todas partes se veía de tres formas. Ahora usa --bg-2 y --border-strong, que los define tokens.css una sola vez y nadie pisa. */ border: 1px solid var(--border-strong, rgba(128,128,128,.3)); background: var(--bg-2, transparent); cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; transition: border-color .2s ease; box-shadow: inset 0 1px 3px rgba(0,0,0,.05); font-family: inherit; /* si no, el