/* ========================================================================== AVISOS FLOTANTES (TOASTS) — el sistema de la casa, con la paleta de Maracas. Es el mismo mecanismo que en qwood.es, quewood.es y ecoobra.es: pila abajo y al centro (donde no tapa lo que se está leyendo y donde llega el pulgar), colores sólidos, sombra negra y nunca borde gris, cierre a mano y por tiempo. Lo comparten la web pública y la app del equipo: un aviso tiene que ser el mismo aviso en los dos sitios. Diferencia deliberada con las otras tres webs: allí la tinta es BLANCA sobre verde o celeste. Aquí el éxito va en el AMARILLO de la marca y el informativo en el ROSA, y sobre esos dos la tinta blanca no llega ni a 1.5:1 — la misma trampa que ya se cazó en los botones de la app. La tinta es oscura (13:1 y 11:1). El error sigue en rojo con tinta blanca (4.8:1). ========================================================================== */ .mrc-toasts { position: fixed; left: 50%; bottom: var( --mrc-toast-bottom, 1.65rem ); transform: translateX( -50% ); z-index: 2147482000; display: flex; flex-direction: column; align-items: center; gap: 10px; width: auto; max-width: calc( 100vw - 24px ); /* La pila no intercepta clics; cada toast sí. Si no, un contenedor invisible a lo ancho de la pantalla se comería las pulsaciones. */ pointer-events: none; } .mrc-toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: .75rem; width: auto; min-width: min( 280px, calc( 100vw - 24px ) ); max-width: min( 560px, calc( 100vw - 24px ) ); padding: .9rem 3rem .9rem 1.15rem; border: none; border-radius: 999px; box-shadow: 0 18px 44px rgba( 0, 0, 0, .55 ), 0 2px 8px rgba( 0, 0, 0, .35 ); /* Montserrat en la app, Oswald en la web: hereda de quien lo pinte. */ font-family: inherit; color: #12121A; opacity: 0; transform: translateY( 10px ); transition: opacity .22s ease, transform .22s ease; } .mrc-toast--visible { opacity: 1; transform: translateY( 0 ); } .mrc-toast--se-va { opacity: 0; transform: translateY( -6px ); } .mrc-toast--exito { background: #FFD400; color: #12121A; } .mrc-toast--info { background: #FF99FF; color: #12121A; } .mrc-toast--error { background: #DC2626; color: #fff; } .mrc-toast__texto { margin: 0; flex: 1; font-size: .98rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; /* El color lo fija el tipo de aviso, pase lo que pase: este bloque vive suelto en el (o dentro de un ) y hay reglas de sección que pintan párrafos. */ color: inherit; overflow-wrap: anywhere; } /* Acción opcional («Undo»): translúcida sobre el color del aviso, con la misma tinta. Es lo que diferencia este toast del de las otras webs, y lo pide la app: rechazar a alguien tiene que poder deshacerse desde el aviso. */ .mrc-toast__accion { flex: none; min-height: 40px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; background: rgba( 0, 0, 0, .08 ); color: inherit; font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer; } .mrc-toast--error .mrc-toast__accion { background: rgba( 255, 255, 255, .16 ); } .mrc-toast__accion:hover, .mrc-toast__accion:focus-visible { background: rgba( 0, 0, 0, .16 ); outline: none; } .mrc-toast__cerrar { position: absolute; top: 50%; right: .6rem; transform: translateY( -50% ); display: flex; align-items: center; justify-content: center; /* 40 px: un objetivo que se pulsa con el pulgar sin apuntar. */ width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .8; } .mrc-toast__cerrar:hover, .mrc-toast__cerrar:focus-visible { opacity: 1; background: rgba( 0, 0, 0, .12 ); outline: none; } .mrc-toast--error .mrc-toast__cerrar:hover, .mrc-toast--error .mrc-toast__cerrar:focus-visible { background: rgba( 255, 255, 255, .18 ); } .mrc-toast:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Móvil: como el Toast de obras-gestion — sigue siendo una píldora centrada con `max-width: calc(100vw - 24px)`, no una barra de borde a borde. La versión anterior estiraba al 100 % con `left/right: 12px` y, en cuanto la página desbordaba a lo ancho, el aviso salía cortado por el borde. */ @media ( max-width: 600px ) { .mrc-toasts { bottom: var( --mrc-toast-bottom, calc( 1rem + env( safe-area-inset-bottom ) ) ); width: max-content; max-width: calc( 100vw - 24px ); } .mrc-toast { width: auto; min-width: min( 280px, calc( 100vw - 24px ) ); max-width: calc( 100vw - 24px ); } } /* Con «menos movimiento», el aviso aparece sin deslizarse: sigue apareciendo y desapareciendo, que es la información, sin el desplazamiento. */ @media ( prefers-reduced-motion: reduce ) { .mrc-toast { transition: opacity .15s ease; transform: none; } .mrc-toast--visible, .mrc-toast--se-va { transform: none; } }