/* ═══════════════════════════════════════ SARA — SELLO DE CORTE DE PREPRODUCCIÓN [migracion-v1 fase 2 §2.3] Esta hoja se enlaza SOLO cuando config('sara.preproduccion.activa') está encendida. Apagar el sello no deja ni una regla viva: el día que preproducción se vuelva producción, la aplicación vuelve a su geometría original sin tocar layout.css ni app.css. Va anclada abajo y no arriba porque el sidebar y la navbar ya son `position: fixed; top: 0`: una banda superior obligaría a recorrer los tres elementos fijos del layout autenticado. Anclada abajo, el único ajuste es apartarle su altura al final del documento y al final del sidebar. ═══════════════════════════════════════ */ :root { /* Valor de arranque. La altura REAL la mide el script del partial y la reescribe aquí: el texto se parte en dos o tres renglones según el ancho y según el idioma, y una altura adivinada dejaría contenido tapado justo en el caso que más importa —el aviso largo de "fecha de corte no configurada"—, que es 77px en teléfono y 68px en escritorio. */ --sello-preprod-h: 30px; } /* Nadie queda tapado de forma permanente: el documento y el sidebar terminan justo arriba de la banda. Ambas reglas mueren con esta hoja. */ body { padding-bottom: var(--sello-preprod-h); } .sidebar { padding-bottom: var(--sello-preprod-h); } /* [migracion-v1 fase 2d §2] Los dos flotantes del sitio publico son `fixed`, asi que el padding del documento no los mueve: se les aparta la banda a mano, con la misma altura medida. Sin esto la banda —ahora encima de todo— le tapaba los ultimos 7px al boton de WhatsApp y el distintivo de reCAPTCHA, que tiene que quedar a la vista por los terminos de Google. Ambas reglas mueren con esta hoja. */ .wa-fab { bottom: calc(24px + var(--sello-preprod-h)); } .grecaptcha-badge { bottom: var(--sello-preprod-h) !important; } .sello-preprod { position: fixed; left: 0; right: 0; bottom: 0; /* [migracion-v1 fase 2d §2] El maximo que acepta un navegador, no un numero comodo: en el sitio publico la modal de login pinta su velo a pantalla completa con exactamente este valor (login-modal.css), y con 1200 la banda quedaba debajo —dibujada, pero atenuada al 55% y desenfocada—. Medido: en /es?auth=login el rectangulo del velo cubre el de la banda entero. Como no hay valor mas alto, el desempate lo da el orden del documento: por eso el include va al FINAL del en welcome.blade.php. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; /* Literal a propósito, NO --sello-preprod-h: esa variable la reescribe el script con la altura medida de esta misma banda, y usarla aquí la ataría a su propio resultado — al ensanchar la ventana el texto volvería a un renglón pero la banda se quedaría con el alto de tres. */ min-height: 30px; padding: 5px 12px; /* El ámbar claro sobre ámbar oscuro se lee al revés —texto oscuro sobre --warning da 3.2:1, por debajo del mínimo— y este aviso, a 11px, es justamente el que nadie se puede permitir no leer. */ background: var(--warning-dark); color: var(--warning-bg); border-top: 2px solid var(--warning); font-family: var(--font-body); font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1.35; text-align: center; /* La banda es un aviso, no un control: no intercepta clics del contenido que quede detrás en el borde inferior. */ pointer-events: none; user-select: none; } .sello-preprod-etiqueta { padding: 2px 8px; border-radius: var(--radius-sm, 8px); background: var(--warning-bg); color: var(--warning-dark); font-weight: var(--fw-extrabold); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .sello-preprod-texto { max-width: 100%; } @media (max-width: 640px) { .sello-preprod { font-size: var(--fs-mono-small); } }