/* Panel de avisos — British Centre of Melilla Tokens del sistema de la web (prototipo + bcm.css). Look claro fijo. Cero fuentes externas: las del sistema, como en la web pública. Tres niveles tipográficos de texto (20 / 15 / 14) más el número (28). Si aparece un quinto tamaño, sobra. */ /* Poppins, servida desde NUESTRO dominio. El navegador no le pide nada a Google: el fichero viaja con el panel. Licencia SIL Open Font, 7,6 KB. Se usa SOLO para los números de teléfono — el resto sigue con las fuentes del sistema, como la web pública del centro. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; /* si tardara, el número se lee igual mientras carga */ src: url("/poppins-700.woff2") format("woff2"); /* Solo los caracteres que aparecen en un teléfono: cifras, espacio y signos. */ unicode-range: U+0020, U+002B, U+0030-0039; } :root { --bcm-blue: #345199; --bcm-blue-700: #2a4079; --bcm-blue-900: #1b2c56; --bcm-red: #fd0003; --bcm-ink: #101a33; --bcm-paper: #f4f7fc; --bcm-surface: #ffffff; --bcm-line: #d7deec; /* Línea para lo que se PULSA (los nombres de la pantalla del PIN, los chips). --bcm-line es demasiado clara para marcar el borde de un control: este tono llega a 3:1 sobre el blanco, que es el mínimo para que un contorno se vea. */ --bcm-border-strong: #8492b2; --bcm-muted: #4f5b7d; /* Alto de la barra de secciones cuando va abajo, en móvil. En rem y no en píxeles a propósito: de esta variable sale también el hueco que se reserva al final de la página, así que si el sistema amplía el texto crecen los dos a la vez y la barra no acaba tapando la última tarjeta. */ --alto-secciones: 3.5rem; --ok-texto: #0b5c2e; --ok-fondo: #eaf7ef; --ok-borde: #bfe3cd; --err-texto: #8a0011; --err-fondo: #fdecee; --err-borde: #f5c2c7; --avi-texto: #7a4b00; --avi-fondo: #fff6e5; --avi-borde: #f0d8a8; --radio: 14px; --ease: cubic-bezier(.23, 1, .32, 1); --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --tel: "Poppins", "Segoe UI", system-ui, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bcm-paper); color: var(--bcm-ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 3px solid var(--bcm-red); outline-offset: 2px; border-radius: 4px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── Cabecera ─────────────────────────────────────────────────────────────── */ .barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px; background: var(--bcm-surface); border-bottom: 1px solid var(--bcm-line); box-shadow: 0 1px 2px rgba(16, 26, 51, .06); /* la ÚNICA sombra del panel */ } .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .marca img { width: 28px; height: 28px; display: block; } /* En una sola línea siempre: a 360 px «British Centre» se partía en dos y la cabecera crecía por debajo de la marca. */ .marca b { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; white-space: nowrap; } .barra .dcha { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--bcm-muted); } /* «Actualizar» es un icono, así que su nombre va en aria-label. El objetivo táctil sigue siendo de 44 px aunque el dibujo mida 20. */ .actualizar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radio); color: var(--bcm-blue); text-decoration: none; } .actualizar svg { width: 20px; height: 20px; } @media (hover: hover) and (pointer: fine) { .actualizar:hover { background: #eef2fa; } } /* ── Secciones ────────────────────────────────────────────────────────────── */ /* En escritorio son dos enlaces más de la fila de la cabecera; en móvil, este mismo