/* ===================================================================== Albergues de animales · sismo del 10 de agosto de 2026 Fase 4 · diseño Reglas que no se negocian, y por qué: · Solo se animan `transform` y `opacity`. Las dos corren en el compositor y no obligan al navegador a recalcular la posición de nada. Animar `top`, `height`, `margin` o `filter` sí, y en un teléfono de gama media eso se ve como tirones. · La retícula hexagonal es UNA imagen de fondo repetida por CSS. No hay un nodo por hexágono ni un canvas repintándose. El costo es el mismo con la pantalla llena que vacía. · Nada aparece SOLO al desplazarse. El estado por defecto de todo es visible; el efecto de entrada lo activa JavaScript añadiendo la clase `anima` a . Sin JavaScript, o si el observador falla, el contenido está ahí. Una ficha invisible es un teléfono que alguien no consiguió. ===================================================================== */ :root { --bg:#08080A; --panel:#111114; --panel2:#17171B; --line:#26262C; --linea-viva:#34343E; --ink:#F4F4F6; --dim:#A8A8B2; --faint:#7E7E88; --red:#E0362A; --red2:#FF5647; --ok:#4ED494; --warn:#F0B93A; --viejo:#F0803A; --hex:56px; /* ancho del mosaico hexagonal */ --display: ui-sans-serif, system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } *, *::before, *::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--texto); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%; overflow-x:hidden; } h1, h2, h3 { font-family:var(--display); line-height:1.08; margin:0; } h1 { letter-spacing:-0.035em; font-weight:800; } h2 { letter-spacing:-0.028em; font-weight:800; } h3 { letter-spacing:-0.018em; font-weight:700; } :focus-visible { outline:2px solid var(--red2); outline-offset:3px; border-radius:4px; } .oculto-visual { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .sprite { position:absolute; width:0; height:0; overflow:hidden; } /* --------------------------------------------------------------------- La retícula hexagonal El mosaico mide 34,64 × 60 unidades, que es el rectángulo exacto que se repite en un panal de hexágonos de punta arriba. Una sola imagen, repetida por el navegador. `inset` negativo la hace más grande que la ventana, para que al moverla no se vea el borde. La máscara radial la desvanece hacia las esquinas: así se nota en el centro y no estorba al leer. --------------------------------------------------------------------- */ .malla { /* El margen negativo es holgado a propósito: la retícula se desplaza hasta el alto de un hexágono, y si el elemento midiera justo la ventana se vería el borde asomar por arriba o por abajo. */ position:fixed; inset:-20vh -14vw; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0 34.64 10 34.64 30 17.32 40 0 30 0 10Z M17.32 40 17.32 60' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); background-size:var(--hex) calc(var(--hex) * 1.732); opacity:.055; transform:translate3d(var(--mx, 0px), var(--my, 0px), 0); will-change:transform; -webkit-mask-image:radial-gradient(115% 85% at 50% 22%, #000 30%, transparent 78%); mask-image:radial-gradient(115% 85% at 50% 22%, #000 30%, transparent 78%); } /* Un halo rojo muy tenue detrás del encabezado, para que la retícula no se lea como papel milimetrado. Es un degradado, no una imagen. */ .malla::after { content:""; position:absolute; inset:0; background:radial-gradient(52% 34% at 50% 8%, rgba(224,54,42,.16), transparent 70%); } /* Todo el contenido va por encima de la retícula. */ .barra, .wrap { position:relative; z-index:1; } /* --------------------------------------------------------------------- Entrada del contenido --------------------------------------------------------------------- */ html.anima .revelar { opacity:0; transform:translateY(14px); } html.anima .revelar.visible { opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); } /* Lo que ya se ve al cargar entra sin transición: el primer bloque de fichas se lee de inmediato, sin esperar medio segundo. */ html.anima .revelar.ya { opacity:1; transform:none; transition:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .malla { transform:none !important; } html.anima .revelar, html.anima .revelar.visible { opacity:1; transform:none; transition:none; } * { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* --------------------------------------------------------------------- Iconos --------------------------------------------------------------------- */ .ico { width:1em; height:1em; flex:none; vertical-align:-0.14em; color:inherit; } .ico-tipo { width:1.15em; height:1.15em; vertical-align:-0.22em; } .ico-sello { width:.95em; height:.95em; vertical-align:-0.1em; margin-right:.35em; } .marca-huella { width:20px; height:20px; color:var(--red2); flex:none; } /* --------------------------------------------------------------------- Estructura --------------------------------------------------------------------- */ .wrap { max-width:56rem; margin:0 auto; padding:0 20px 90px; } .barra { position:sticky; top:0; z-index:20; background:rgba(8,8,10,.86); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); } .barra-in { max-width:56rem; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .marca { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-0.015em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px; min-width:0; } .marca span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kicker { font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--red2); flex:none; } /* --------------------------------------------------------------------- Encabezado --------------------------------------------------------------------- */ .hero { padding:58px 0 8px; } .regla { width:60px; height:3px; margin:16px 0 22px; background:linear-gradient(90deg, var(--red), var(--red2)); border-radius:2px; } .hero h1 { font-size:clamp(30px,7.2vw,56px); } .lead { color:var(--dim); font-size:17.5px; max-width:38rem; margin:20px 0 0; } .lead-chico { font-size:16px; margin-top:10px; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:36px 0 28px; } .stat { background:var(--panel); padding:20px 15px; } .stat b { font-family:var(--display); display:block; font-size:clamp(24px,5.4vw,34px); font-weight:800; letter-spacing:-0.03em; line-height:1; } .stat span { display:block; margin-top:8px; font-size:12px; line-height:1.35; color:var(--faint); } /* ---------- Primeros auxilios ---------- El único bloque con borde rojo permanente del sitio. Si alguien llega con un animal herido, tiene que encontrarlo sin leer nada más. */ .auxilios { border:1px solid var(--red); background:var(--panel); border-radius:16px; padding:22px; margin:34px 0 0; } .auxilios h2 { font-size:clamp(19px,4vw,25px); display:flex; align-items:center; gap:10px; } .auxilios h2 .ico { color:var(--red2); } .auxilios-lead { color:var(--dim); font-size:14.5px; margin:10px 0 16px; } .auxilios-lead strong { color:var(--ink); } .auxilios-clave { list-style:none; margin:0; padding:0; display:grid; gap:11px; } .auxilios-clave li { font-size:14.5px; color:var(--dim); line-height:1.55; padding-left:17px; position:relative; } .auxilios-clave li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--red); border-radius:2px; } .auxilios-clave b { color:var(--ink); font-weight:700; } .auxilios-mas { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; } .auxilios-mas summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--red2); list-style:none; } .auxilios-mas summary::-webkit-details-marker { display:none; } .auxilios-mas summary::before { content:"+ "; font-weight:700; } .auxilios-mas[open] summary::before { content:"− "; } .auxilios-sub { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:18px 0 9px; } .auxilios-mas ul { margin:0; padding-left:20px; } .auxilios-mas li { font-size:14px; color:var(--dim); margin-bottom:7px; line-height:1.5; } .auxilios-fuente { font-size:12.5px; color:var(--faint); line-height:1.55; margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); } .auxilios-fuente a { color:var(--red2); } .auxilios-fuente b { color:var(--dim); } .nota { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:19px; font-size:14.5px; color:var(--dim); } .nota strong { color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--display); font-weight:700; } .nota p + p { margin-top:10px; } .nota p:last-child { margin-bottom:0; } .nota-alerta { border-color:var(--red); margin-top:16px; } /* --------------------------------------------------------------------- Filtros --------------------------------------------------------------------- */ .filtros { position:sticky; top:49px; z-index:15; background:linear-gradient(var(--bg) 72%, transparent); padding:20px 0 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .campo-ancho { grid-column:1/-1; } .campo label, .campo legend { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; padding:0; } .in { width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:16px; font-family:inherit; transition:border-color .18s ease; } .in:hover { border-color:var(--linea-viva); } .in:focus { border-color:var(--red); outline:none; } textarea.in { resize:vertical; } .frescura { font-size:13px; color:var(--faint); margin:0 0 16px; min-height:1.4em; } .frescura.sin-linea { color:var(--warn); } /* --------------------------------------------------------------------- Fichas --------------------------------------------------------------------- */ .lista { display:grid; gap:12px; } .cargando { color:var(--faint); } .vacio { color:var(--faint); padding:22px 0; } .volver { color:var(--red2); text-decoration:none; font-size:14px; font-weight:600; } .ficha { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:19px; transition:border-color .2s ease, transform .2s ease; } /* Una huella grande y casi invisible en la esquina. Es el guiño de la casa; no compite con el texto ni cambia el tamaño de nada. */ .ficha::before { content:""; position:absolute; right:-14px; top:-12px; width:96px; height:96px; opacity:.028; pointer-events:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.9' cy='11.6' rx='2' ry='2.5'/%3E%3Cellipse cx='10.1' cy='8.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='14.3' cy='8.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='18.4' cy='11.6' rx='2' ry='2.5'/%3E%3Cpath d='M12.2 13.4c2.9 0 5.2 2.1 5.2 4.4 0 1.6-1.3 2.8-3 2.8-.9 0-1.6-.3-2.2-.3s-1.3.3-2.2.3c-1.7 0-3-1.2-3-2.8 0-2.3 2.3-4.4 5.2-4.4Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.9' cy='11.6' rx='2' ry='2.5'/%3E%3Cellipse cx='10.1' cy='8.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='14.3' cy='8.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='18.4' cy='11.6' rx='2' ry='2.5'/%3E%3Cpath d='M12.2 13.4c2.9 0 5.2 2.1 5.2 4.4 0 1.6-1.3 2.8-3 2.8-.9 0-1.6-.3-2.2-.3s-1.3.3-2.2.3c-1.7 0-3-1.2-3-2.8 0-2.3 2.3-4.4 5.2-4.4Z'/%3E%3C/svg%3E") center/contain no-repeat; } .ficha:hover { border-color:var(--linea-viva); } .ficha-alto { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .ficha h3 { font-size:18.5px; line-height:1.28; } .ficha h3 a { color:var(--ink); text-decoration:none; } .ficha h3 a:hover { color:var(--red2); } .meta { font-size:13px; color:var(--faint); margin:7px 0 0; } .detalle { font-size:14.5px; color:var(--dim); margin:12px 0 0; } .contacto { font-size:15px; font-weight:600; margin:10px 0 0; font-variant-numeric:tabular-nums; } /* El número es lo que se toca para llamar. Se marca como enlace de verdad, no como texto que resulta ser pulsable. */ .tel { color:var(--red2); text-decoration:none; border-bottom:1px solid rgba(255,86,71,.4); padding-bottom:1px; } .tel:hover { border-bottom-color:var(--red2); } .tel-wa { display:inline-block; margin-left:9px; padding:2px 9px; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--ok); text-decoration:none; border:1px solid rgba(78,212,148,.4); border-radius:999px; vertical-align:1px; } .tel-wa:hover { background:rgba(78,212,148,.1); } /* La X de limpiar del campo de búsqueda, que en fondo oscuro sale negra */ input[type="search"]::-webkit-search-cancel-button { filter:invert(1); opacity:.5; } .tarjeta-cuerpo h3 a { color:var(--ink); text-decoration:none; } .tarjeta-cuerpo h3 a:hover { color:var(--red2); } .sello { flex:none; display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.01em; border:1px solid; border-radius:999px; padding:5px 11px; white-space:nowrap; } .es-ok { color:var(--ok); border-color:rgba(78,212,148,.42); background:rgba(78,212,148,.07); } .es-viejo { color:var(--viejo); border-color:rgba(240,128,58,.45); background:rgba(240,128,58,.07); } .es-prensa { color:var(--dim); border-color:var(--line); } .es-com { color:var(--warn); border-color:rgba(240,185,58,.42); background:rgba(240,185,58,.06); } .es-oculto { color:var(--faint); border-color:var(--line); } .etiquetas { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; } .etiqueta { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line); border-radius:7px; padding:4px 9px; } .etiqueta-nec { color:var(--red2); border-color:rgba(255,86,71,.3); background:rgba(255,86,71,.05); } .enlaces { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; } .enlaces a { color:var(--red2); text-decoration:none; font-weight:600; border-bottom:1px solid rgba(255,86,71,.32); } .enlaces a:hover { border-bottom-color:var(--red2); } .enlaces span { color:var(--faint); } /* --------------------------------------------------------------------- Aportes --------------------------------------------------------------------- */ /* Un reporte solo, en su propia página: más ancho que en la rejilla. */ .tarjetas-sola { grid-template-columns:minmax(0, 420px); } /* ---------- Compartir un reporte como imagen ---------- */ .compartir-reporte { margin-top:13px; padding-top:13px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } .btn-compartir { font-size:14px; padding:9px 15px; gap:7px; } /* La imagen generada, dentro de la página. Es el camino que funciona en todos los navegadores: una vez está aquí, el menú nativo del navegador ofrece compartirla, copiarla o guardarla sin depender de ninguna API. */ .imagen-generada { flex-basis:100%; margin-top:12px; } .imagen-generada img { display:block; width:100%; height:auto; max-width:340px; border:1px solid var(--line); border-radius:12px; /* Sin esto, en Android el gesto de mantener pulsado a veces se interpreta como selección de texto en vez de abrir el menú. */ -webkit-touch-callout:default; user-select:none; } .imagen-generada .compartir-pista { margin-top:10px; } .imagen-generada .compartir-pista b { color:var(--ink); } .imagen-generada .acciones { margin-top:12px; flex-wrap:wrap; } .btn-compartir .ico { width:1.05em; height:1.05em; } .compartir-pista { flex-basis:100%; font-size:12px; color:var(--faint); margin:0; line-height:1.45; } .compartir-pista.sin-linea { color:var(--warn); } .aportes-lista { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); } .aportes-titulo { font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; } .aporte { border-left:2px solid var(--line); padding-left:13px; margin-bottom:13px; } .aporte-alto { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0; } .aporte-alto .sello { font-size:10.5px; padding:3px 9px; } .aporte-fecha { font-size:12px; color:var(--faint); } .aporte-texto { font-size:14px; color:var(--dim); margin:7px 0 0; } .aportes-aviso { font-size:12px; color:var(--faint); line-height:1.5; margin:0; padding-top:4px; } .aportar { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; } .enlace-boton { background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--dim); border-bottom:1px dashed var(--linea-viva); } .enlace-boton:hover { color:var(--ink); border-bottom-color:var(--dim); } .aporte-caja { margin-top:15px; padding-top:15px; border-top:1px solid var(--line); } .aporte-form .campo + .campo { margin-top:12px; } .aporte-gracias { color:var(--ok); font-size:14px; margin:0; padding:14px; border:1px solid rgba(78,212,148,.35); background:rgba(78,212,148,.06); border-radius:11px; } .tarjeta-cuerpo .aportar { gap:12px; margin-top:11px; } .tarjeta-cuerpo .enlace-boton { font-size:12px; } /* --------------------------------------------------------------------- Botones y formularios --------------------------------------------------------------------- */ .btn { width:100%; background:var(--red); color:#fff; border:0; border-radius:11px; padding:14px; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-0.01em; cursor:pointer; margin-bottom:22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background .18s ease, transform .12s ease; } .btn:hover { background:var(--red2); } .btn:active { transform:scale(.985); } .btn:disabled { opacity:.55; cursor:default; transform:none; } .btn-chico { width:auto; padding:11px 19px; font-size:15px; margin:0; } .btn-fantasma { background:transparent; color:var(--dim); border:1px solid var(--line); } .btn-fantasma:hover { background:var(--panel2); color:var(--ink); border-color:var(--linea-viva); } .propuesta { border:1px solid var(--red); background:var(--panel); border-radius:16px; padding:21px; margin-bottom:22px; } .aviso-form { color:var(--dim); font-size:14px; margin:9px 0 18px; } .aviso-form strong { color:var(--warn); } .rejilla { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .rejilla .campo-ancho { grid-column:1/-1; } .rejilla fieldset { border:0; padding:0; margin:0; min-width:0; } .opcional { color:var(--faint); font-weight:400; text-transform:none; letter-spacing:0; } .pista { font-size:13px; color:var(--faint); margin:9px 0 0; } .casillas { display:flex; flex-wrap:wrap; gap:9px 16px; } .casilla { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--dim); cursor:pointer; } .casilla:hover { color:var(--ink); } .casilla input { width:17px; height:17px; accent-color:var(--red); flex:none; } .acciones { display:flex; gap:10px; margin-top:19px; } .error-form { color:var(--red2); background:rgba(224,54,42,.09); border:1px solid var(--red); border-radius:10px; padding:12px; font-size:14px; margin:16px 0 0; } .exito { color:var(--ok); } .previa { margin-top:11px; } .previa img { width:120px; height:120px; object-fit:cover; border-radius:11px; border:1px solid var(--line); display:block; } /* --------------------------------------------------------------------- Tablero de perdidos y encontrados --------------------------------------------------------------------- */ #tablero, .porque { margin-top:60px; padding-top:34px; border-top:1px solid var(--line); } #tablero h2, .porque h2 { font-size:clamp(23px,4.8vw,32px); } #tablero h2, .porque h2 { display:flex; align-items:center; gap:11px; } .tarjetas { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:14px; } .tarjeta { border:1px solid var(--line); background:var(--panel); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease; } .tarjeta:hover { border-color:var(--linea-viva); } /* aspect-ratio reserva el espacio antes de que llegue la imagen. Sin esto el texto salta hacia abajo al cargar cada foto, y en una lista larga eso es imposible de leer mientras baja. */ .tarjeta-foto { aspect-ratio:1/1; background:var(--panel2); } .tarjeta-foto img { width:100%; height:100%; object-fit:cover; display:block; } .sin-foto { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--faint); } .sin-foto .ico { width:34px; height:34px; opacity:.55; } .sin-foto span { font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .tarjeta-cuerpo { padding:15px; } .tarjeta-cuerpo h3 { font-size:16.5px; margin:8px 0 0; } .tarjeta-cuerpo .detalle { font-size:14px; margin-top:8px; } .tarjeta-cuerpo .contacto { font-size:14.5px; } .marca-reporte { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .r-perdido { color:var(--viejo); } .r-encontrado { color:var(--ok); } .procedencia-chica { font-size:11.5px; margin:11px 0 0; } /* --------------------------------------------------------------------- Por qué existe · pie --------------------------------------------------------------------- */ .porque p { color:var(--dim); max-width:38rem; margin:0 0 15px; } .porque-cierre { color:var(--ink) !important; font-weight:600; border-left:3px solid var(--red); padding-left:15px; margin-top:22px !important; } .pie { border-top:1px solid var(--line); margin-top:52px; padding-top:26px; font-size:13px; color:var(--faint); } .pie p { margin:0 0 13px; } .autor { color:var(--dim); } .autor strong { color:var(--ink); font-family:var(--display); font-size:14.5px; } /* --------------------------------------------------------------------- Panel de administración --------------------------------------------------------------------- */ .barra-panel { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:space-between; margin:28px 0 8px; } .barra-panel .campo { min-width:15rem; } .botonera { display:flex; flex-wrap:wrap; gap:8px; } .titulo-panel { font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:36px 0 14px; } .acciones-panel { flex-wrap:wrap; margin-top:17px; padding-top:15px; border-top:1px solid var(--line); } .ficha-oculta { opacity:.55; border-style:dashed; } .editor { border-top:1px solid var(--line); margin-top:15px; } .aviso-error { color:var(--red2); background:rgba(224,54,42,.09); border:1px solid var(--red); border-radius:10px; padding:12px; } /* --------------------------------------------------------------------- Móvil --------------------------------------------------------------------- */ @media (max-width:640px) { :root { --hex:44px; } .filtros, .stats, .rejilla { grid-template-columns:1fr; } .campo-ancho, .rejilla .campo-ancho { grid-column:auto; } .wrap { padding-bottom:64px; } .hero { padding-top:44px; } .ficha-alto { flex-direction:column; align-items:flex-start; gap:9px; } .tarjetas { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } .acciones { flex-wrap:wrap; } }