/* ================================================== ENCABEZADOS: imágenes de cada marca y de cada empresa (UN SOLO LUGAR) ACACHETE LOGISTICS Aquí, y solo aquí, se eligen las imágenes del encabezado: .encabezado-imagen -> imagen grande en el recuadro del título (reemplaza el texto) .logo-img-1 -> logo grande de la esquina izquierda .logo-img-2 -> segunda imagen de la esquina (se turna con la 1 cada 6 s) #log-sec -> logo chico junto al título Se eligen según lo que está activo (lo marca empresas/empresas.js en ): html[data-marca="otoya-valverde"] -> la MARCA (EMPRESA_ACTIVA de empresas/empresas.js) html[data-empresa-id="5"] -> la EMPRESA INTERNA de la sesión, por su NÚMERO INTERNO (Tiendas -> Empresas lo muestra: "N.º 5"). Cambia al iniciar sesión, al cambiar de empresa (Desarrollador) y al cerrar sesión (vuelve la marca). ⚠ NO usar el ID ("02"): al borrar una empresa su ID se puede volver a usar y la nueva heredaría sus imágenes. El número interno nunca se repite. html[data-empresa="01"] -> solo para la empresa principal (siempre la 01). Orden: lo de más abajo gana. Por eso van: 1) ACACHETE (por defecto), 2) por marca, 3) por empresa interna. Opciones de la imagen grande (dentro de la misma regla): --encabezado-ajuste: cover; -> llena el recuadro y recorta lo que sobra (por defecto) --encabezado-ajuste: contain; -> se ve completa; los lados se rellenan con la misma imagen difuminada --encabezado-enfoque: 50% 60%; -> con cover, qué parte queda a la vista (horizontal vertical; 0% = arriba, 100% = abajo) El recuadro es unas 7 veces más ancho que alto: una imagen de banner (ej. 1600 x 220 px) entra con cover sin recortar casi nada. Rutas: desde esta carpeta (css/), por eso empiezan con "../img/". Sin imagen grande (ninguna regla para esa marca o empresa): se ve el título en texto ("titulo" y "subtitulo" de empresas/empresas.js). Después de cambiar este archivo: subir el ?v= de encabezados.css en app.html (así los celulares no usan la copia vieja) y recargar con Ctrl + F5. ================================================== */ /* ================================================== 1. ACACHETE (por defecto: toda marca o empresa sin regla propia) ================================================== */ .logo-img-1 { background-image: url("../img/logo-web-slog.png"); } .logo-img-2 { background-image: url("../img/encabezado-ak7.jpg"); } #log-sec { background-image: url("../img/logo.png"); } html[data-marca="acachete"] .encabezado-imagen { background-image: url("../img/web/encabezado.jpg"); } /* ================================================== 2. POR MARCA (html[data-marca="clave de empresas/empresas.js"]) ================================================== */ /* ---------- Otoya-Valverde & Asociados ---------- */ html[data-marca="otoya-valverde"] .encabezado-imagen { background-image: url("../img/img-encabezado.jpg"); --encabezado-ajuste: contain; } /* <<< FIN DE MARCAS (no borrar: herramientas/empresas.ps1 agrega las marcas nuevas justo arriba) */ /* ================================================== 3. POR EMPRESA INTERNA (html[data-empresa-id="N.º interno de Tiendas -> Empresas"]) Gana sobre la marca: es lo que se ve al iniciar sesión con un usuario de esa empresa. Una empresa SIN regla aquí usa las imágenes de ACACHETE (sección 1). Al borrar una empresa, borrar también su bloque de aquí. ================================================== */ /* ---------- 01 · Empresa principal (SIEMPRE ACACHETE, en cualquier marca) ---------- La 01 es la empresa principal: lleva el encabezado y los logos originales de ACACHETE aunque la marca activa sea otra. Las demás empresas parten de la 02. */ html[data-empresa="01"] .encabezado-imagen { background-image: url("../img/encabezado-ach-banner.jpg"); --encabezado-ajuste: cover; } html[data-empresa="01"] .logo-img-1 { background-image: url("../img/logo-web-slog.png"); } html[data-empresa="01"] .logo-img-2 { background-image: url("../img/encabezado-ak7.jpg"); } html[data-empresa="01"] #log-sec { background-image: url("../img/logo.png"); } /* ---------- Toda empresa interna SIN regla propia: las de ACACHETE (como la 01) ---------- Una empresa nueva se ve con el encabezado y los logos de ACACHETE hasta que se le agregue su bloque abajo (que gana por ir después). */ html[data-empresa-id] .encabezado-imagen { background-image: url("../img/encabezado-ach-banner.jpg"); --encabezado-ajuste: cover; } html[data-empresa-id] .logo-img-1 { background-image: url("../img/logo-web-slog.png"); } html[data-empresa-id] .logo-img-2 { background-image: url("../img/encabezado-ak7.jpg"); } html[data-empresa-id] #log-sec { background-image: url("../img/logo.png"); } /* (La regla de la antigua 02 · Transportes Otoya-Valverde se quitó: esa empresa se borró y su ID 02 ahora es de otra. Sus imágenes siguen en img/ y en la marca "otoya-valverde".) */ /* Ejemplo para otra empresa (quitar los comentarios y cambiar el número y las imágenes; el número interno sale en Tiendas -> Empresas, "N.º 5"): html[data-empresa-id="5"] .encabezado-imagen { background-image: url("../img/encabezado-5.jpg"); } html[data-empresa-id="5"] .logo-img-1 { background-image: url("../img/logo-5.png"); } html[data-empresa-id="5"] .logo-img-2 { background-image: url("../img/logo-5-b.png"); } html[data-empresa-id="5"] #log-sec { background-image: url("../img/logo-5-chico.png"); } */ /* ---------- 02 · Corporacion Dinant ---------- La 01 es la empresa principal: lleva el encabezado y los logos originales de ACACHETE aunque la marca activa sea otra. Las demás empresas parten de la 02. */ html[data-empresa="02"] .encabezado-imagen { background-image: url("../img/web/encabezado.jpg"); --encabezado-ajuste: cover; } html[data-empresa="02"] .logo-img-1 { background-image: url("../img/logo-web-slog.png"); } html[data-empresa="02"] .logo-img-2 { background-image: url("../img/encabezado-ak7.jpg"); } html[data-empresa="02"] #log-sec { background-image: url("../img/web/app-uso-1.jpg"); } /* ================================================== CÓMO SE DIBUJA (no hace falta tocar desde aquí) .encabezado-imagen está dentro de .titulos-primordial (app.html). Si su imagen no es "none", empresas/empresas.js le pone "con-imagen" al recuadro: se muestra la imagen y el título queda solo para lectores de pantalla. La imagen de la regla no se pinta en .encabezado-imagen (tamaño 0); la heredan sus 2 capas: ::before la difumina llenando el recuadro (los lados) y ::after la pone nítida con --encabezado-ajuste (completa o llena). ================================================== */ .encabezado-imagen { display: none; position: absolute; inset: 0; overflow: hidden; background-size: 0 0; /* solo la heredan ::before y ::after */ background-repeat: no-repeat; } .titulos-primordial.con-imagen { position: relative; align-self: stretch; /* ocupa todo el alto aunque .cont-info centre a los demás */ padding: 0; overflow: hidden; /* recorta la imagen con las esquinas redondeadas */ } .titulos-primordial.con-imagen .encabezado-imagen { display: block; } /* Difuminado de los lados (se nota con --encabezado-ajuste: contain) */ .encabezado-imagen::before { content: ''; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(14px) brightness(0.85); transform: scale(1.25); /* el difuminado no deja bordes claros */ } /* La imagen nítida, completa o llenando el recuadro */ .encabezado-imagen::after { content: ''; position: absolute; inset: 0; background-image: inherit; background-repeat: no-repeat; background-size: var(--encabezado-ajuste, cover); background-position: var(--encabezado-enfoque, center); } /* Con imagen, el texto del título no se ve (sigue ahí para lectores de pantalla) */ .titulos-primordial.con-imagen #titulo-panel, .titulos-primordial.con-imagen #subti-panel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }