/* ===========================================================================
Edmundo Ríos — register.css
El alta multipaso, sobre el estadio.
Móvil primero. La tarjeta es UNA sola pieza que crece: en el teléfono ocupa
todo el ancho y en escritorio se topa y se centra. No hay dos maquetaciones,
hay una que respira.
=========================================================================== */
/* Tokens propios de esta pantalla. Se declaran aquí y no se toman del tema
porque el alta va SIEMPRE sobre el estadio, sea cual sea el modo del
navegador: un fondo claro debajo de esta foto no existe. */
.reg {
--reg-negro: #080a06;
--reg-lima: #a3e635;
--reg-tinta: #0d1108; /* texto sobre el lima */
--reg-claro: #f2f6ec;
--reg-tenue: #c2cbb7;
--reg-linea: rgb(255 255 255 / .12);
position: relative;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
padding-top: max(1rem, env(safe-area-inset-top));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
background: var(--reg-negro);
color: var(--reg-claro);
}
/* ── El estadio ─────────────────────────────────────────────────────────── */
.reg-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Por CLASE y no por etiqueta: `.reg-bg img` alcanzaba también a los guantes
de la esquina y, por ser más específica que su propia regla, les imponía el
`width:100%` — salieron ocupando la pantalla entera. Un selector por
etiqueta dentro de un contenedor es una trampa el día que ese contenedor
gana un segundo hijo. */
.reg-bg-img {
width: 100%; height: 100%;
object-fit: cover;
/* La portería está abajo a la izquierda y las luces arriba: con el `center`
por omisión, en una ventana ancha se pierde el césped y queda solo grada. */
object-position: 50% 62%;
}
/* El velo. Sin él, el texto blanco cae sobre las gradas iluminadas y la mitad
del formulario deja de leerse. Va en dos capas: una plana para bajar todo el
brillo y una radial que abre un claro justo detrás de la tarjeta. */
.reg-bg::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(115% 85% at 50% 48%, rgb(8 10 6 / .08) 0%, rgb(8 10 6 / .34) 58%, rgb(8 10 6 / .78) 100%),
linear-gradient(to bottom, rgb(8 10 6 / .35) 0%, rgb(8 10 6 / .08) 42%, rgb(8 10 6 / .55) 100%);
}
/* ── La tarjeta ─────────────────────────────────────────────────────────── */
.reg-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 40rem;
padding: 1.5rem 1.125rem 1.25rem;
border-radius: 1.5rem;
border: 1px solid rgb(255 255 255 / .22);
/* Cristal esmerilado de verdad: se ve el estadio detrás, pero desenfocado.
El desenfoque grande (30 px) es lo que convierte la foto en manchas de
color y deja el texto legible encima — con poco desenfoque se transparenta
la GRADA, que tiene puntos claros, y las letras se pican.
`saturate(1.35)` va con el desenfoque, no de adorno: al difuminar, el color
se apaga y el verde del estadio se vuelve gris sucio. Subir la saturación
le devuelve el tono y es lo que hace que parezca vidrio y no plástico. */
background: rgb(8 11 6 / .20);
backdrop-filter: blur(30px) saturate(1.35) brightness(1.55);
-webkit-backdrop-filter: blur(30px) saturate(1.35) brightness(1.55);
box-shadow:
0 24px 70px rgb(0 0 0 / .55),
/* El filo de luz del borde de arriba, por dentro. Es lo que da el canto de
un cristal: sin él, la tarjeta se lee como un rectángulo translúcido. */
inset 0 1px 0 rgb(255 255 255 / .14);
}
/* Sin `backdrop-filter` no hay desenfoque, y entonces el texto caería sobre la
grada iluminada tal cual. Ahí la tarjeta se vuelve casi opaca: se pierde el
efecto, que es lo prescindible, y se conserva que se pueda leer. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.reg-card { background: rgb(8 11 6 / .93); }
}
/* Hay quien tiene la transparencia desactivada en su sistema porque le marea o
le cuesta leer encima. A esa persona se le da la tarjeta sólida. */
@media (prefers-reduced-transparency: reduce) {
.reg-card {
background: rgb(8 11 6 / .96);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* ── Cabecera ───────────────────────────────────────────────────────────── */
.reg-head { text-align: center; margin-bottom: 1.25rem; }
.reg-crest { display: inline-block; line-height: 0; }
/* El escudo, más grande que en la barra: aquí es lo primero que se ve y lo que
dice de quién es esta pantalla. */
.reg-crest .navbar-logo-img { height: clamp(46px, 12vw, 58px); width: auto; }
.reg-crest .navbar-logo-text { display: none; }
.reg-title {
margin: .625rem 0 .5rem;
/* La del CUERPO en negrita, no Anton. Anton es una condensada pensada
para carteles en caja alta; en caja mixta se ve estrecha y pesada,
justo lo contrario de lo que pide la lámina. Y ya está en el aparato:
cero descarga. */
font-family: var(--font, system-ui, sans-serif);
font-weight: 700;
font-size: clamp(1.75rem, 7.4vw, 2.6rem);
line-height: 1.1;
letter-spacing: -.01em;
}
.reg-title span { color: #fff; }
.reg-title em { color: var(--reg-lima); font-style: normal; }
.reg-sub { margin: 0; color: var(--reg-tenue); font-size: .875rem; line-height: 1.5; }
/* Dos renglones fijos, como en la lámina: cada frase en el suyo, sin depender
de dónde decida cortar el navegador. */
.reg-sub span { display: block; }
/* ── Barra de pasos ─────────────────────────────────────────────────────── */
.reg-steps {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
}
.reg-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
min-width: 0;
color: var(--reg-tenue);
}
.reg-step-num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
font-size: .9375rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: rgb(255 255 255 / .05);
border: 1px solid var(--reg-linea);
transition: background .18s, color .18s, border-color .18s;
}
.reg-step-label { font-size: .75rem; line-height: 1.2; text-align: center; }
.reg-step.is-active { color: #fff; }
.reg-step.is-active .reg-step-num {
background: var(--reg-lima);
border-color: var(--reg-lima);
color: var(--reg-tinta);
}
.reg-step.is-done .reg-step-num {
background: color-mix(in srgb, var(--reg-lima) 20%, transparent);
border-color: color-mix(in srgb, var(--reg-lima) 55%, transparent);
color: var(--reg-lima);
}
/* La línea que une los pasos. Sin ella los círculos se leen como cuatro
botones sueltos y no como un camino con principio y final. */
.reg-step + .reg-step { position: relative; }
.reg-step + .reg-step::before {
content: "";
position: absolute;
top: 1.125rem;
right: 50%;
left: -50%;
height: 1px;
background: var(--reg-linea);
}
/* ── Paneles ────────────────────────────────────────────────────────────── */
.reg-panel > .field + .field,
.reg-panel > .grid + .field,
.reg-panel > .field + .grid,
.reg-panel > .grid + .grid { margin-top: .875rem; }
.req { color: #ff6b6b; margin-left: .125rem; }
/* La pregunta del paso. En versalitas espaciadas, como los rótulos de la
lámina: separa la sección sin gritar más que el título. */
.reg-q {
margin: 0 0 1rem;
text-align: center;
/* En frase normal y más grande. En versalitas espaciadas se leía como un
rótulo de sección; es una PREGUNTA, y una pregunta se lee mejor escrita
como se dice. */
font-size: clamp(1rem, 4vw, 1.25rem);
font-weight: 500;
letter-spacing: 0;
color: var(--reg-claro);
}
.reg-q em { color: var(--reg-lima); font-style: normal; }
/* ── Las dos escuelas ───────────────────────────────────────────────────── */
/* Apiladas en el teléfono y en pareja a partir de 560 px. Por debajo de eso,
dos tarjetas de 160 px dejan la descripción en cuatro renglones de dos
palabras. */
.reg-schools { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .reg-schools { grid-template-columns: 1fr 1fr; } }
.reg-school {
position: relative;
display: flex;
align-items: center;
gap: .875rem;
padding: 1rem;
border-radius: 1rem;
border: 1.5px solid var(--reg-linea);
background: rgb(255 255 255 / .03);
cursor: pointer;
transition: border-color .18s, background .18s, transform .12s;
/* Cómoda para el pulgar: es la primera decisión del alta y la que más se
toca por error si se queda chica. */
min-height: 5.5rem;
}
.reg-school:hover { border-color: color-mix(in srgb, var(--tag) 55%, transparent); }
.reg-school:active { transform: scale(.99); }
/* El radio no se enseña: la tarjeta ENTERA es el control. Pero sigue en el
HTML y sigue recibiendo el foco, así que el teclado y el lector de pantalla
funcionan igual — esconderlo con display:none los habría dejado fuera. */
.reg-school input { position: absolute; opacity: 0; pointer-events: none; }
.reg-school:focus-within { outline: 2px solid var(--tag); outline-offset: 2px; }
.reg-school-ic {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
color: var(--tag);
}
.reg-school-ic .ic {
width: 3.25rem; height: 3.25rem; vertical-align: 0;
/* Trazo un punto más fino: a 52 px el grosor por omisión (1.5 sobre un
lienzo de 24) se ve tosco, como un icono ampliado a la fuerza. */
stroke-width: 1.2;
}
.reg-school-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.reg-school-txt strong {
/* Cursiva, como en la lámina: le da el gesto deportivo sin gritar en
versales, que es lo que hacía que las dos tarjetas compitieran con el
título de arriba. */
font-family: var(--font, system-ui, sans-serif);
font-weight: 700;
font-style: italic;
font-size: 1.375rem;
line-height: 1.1;
letter-spacing: -.01em;
color: #fff;
}
.reg-school-txt span { font-size: .8125rem; line-height: 1.35; color: var(--reg-tenue); }
/* La palomita de "elegida". Vive siempre en el HTML y aparece con el radio
marcado: el JS nunca dibuja nada y el estado sobrevive sin guión. */
.reg-school-check {
position: absolute;
top: .625rem;
right: .625rem;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--tag);
color: var(--reg-tinta);
opacity: 0;
transform: scale(.6);
transition: opacity .18s, transform .18s;
}
.reg-school-check .ic { width: 1rem; height: 1rem; vertical-align: 0; }
.reg-school.is-selected,
.reg-school:has(input:checked) {
border-color: var(--tag);
background: color-mix(in srgb, var(--tag) 9%, transparent);
}
.reg-school.is-selected .reg-school-check,
.reg-school:has(input:checked) .reg-school-check { opacity: 1; transform: scale(1); }
/* ── La nota del paso 1 ─────────────────────────────────────────────────── */
.reg-note {
display: flex;
align-items: flex-start;
justify-content: center;
gap: .625rem;
margin: 1rem 0 0;
font-size: .8125rem;
line-height: 1.45;
color: var(--reg-tenue);
text-align: left;
}
.reg-note .ic { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--reg-lima); margin-top: .0625rem; }
.reg-note span { max-width: 34ch; }
/* ── Medidor de contraseña ──────────────────────────────────────────────── */
.pw-meter {
height: .25rem;
margin-top: .5rem;
border-radius: 999px;
background: rgb(255 255 255 / .08);
overflow: hidden;
}
.pw-meter > span {
display: block; height: 100%; width: 0;
border-radius: inherit;
background: #ff6b6b;
transition: width .2s ease, background .2s ease;
}
.pw-meter[data-level="1"] > span { width: 25%; background: #ff6b6b; }
.pw-meter[data-level="2"] > span { width: 50%; background: #e0a020; }
.pw-meter[data-level="3"] > span { width: 75%; background: #3d8fb5; }
.pw-meter[data-level="4"] > span { width: 100%; background: var(--reg-lima); }
/* Pista de disponibilidad (usuario / correo / celular). */
.field-hint.is-ok { color: var(--reg-lima); }
.field-hint.is-bad { color: #ff6b6b; }
/* El botón de ver/ocultar contraseña lo dibuja components.css: es el mismo
en el acceso, el registro y las pantallas de conexión. */
/* ── Consentimiento ─────────────────────────────────────────────────────── */
.reg-consent { margin-top: 1.25rem; }
.reg-consent .check span { font-size: .875rem; line-height: 1.45; }
.reg-consent a { color: var(--reg-lima); }
/* ── Navegación ─────────────────────────────────────────────────────────── */
/* «Atrás» angosto y a la izquierda, «Siguiente» a lo ancho: el botón que se
toca en el 95 % de los casos es el que cae bajo el pulgar. */
.reg-nav { display: flex; align-items: center; gap: .625rem; margin-top: 1.5rem; }
.reg-back { flex: 0 0 auto; gap: .25rem; color: var(--reg-tenue); }
.reg-cta {
flex: 1;
gap: .5rem;
background: var(--reg-lima);
border-color: var(--reg-lima);
color: var(--reg-tinta);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: 0;
}
.reg-cta:hover { background: color-mix(in srgb, var(--reg-lima) 88%, #fff); }
.reg-foot {
margin: 1.125rem 0 0;
text-align: center;
font-size: .875rem;
color: var(--reg-tenue);
}
.reg-foot a { color: var(--reg-lima); font-weight: 600; }
/* ── Los campos, sobre fondo oscuro ─────────────────────────────────────── */
/* La tarjeta va siempre sobre el estadio, así que los campos no pueden heredar
los colores del tema: en modo claro saldrían blancos sobre negro. */
.reg-card .label {
/* En frase normal, sin versalitas: son etiquetas de campo, no rótulos de
sección, y en caja alta espaciada competían con el título de la pantalla. */
font-size: .8125rem;
font-weight: 600;
letter-spacing: 0;
color: var(--reg-claro);
}
.reg-card .input,
.reg-card .select {
background: rgb(255 255 255 / .04);
border-color: var(--reg-linea);
color: var(--reg-claro);
/* Esquema oscuro para los controles NATIVOS: sin esto, el desplegable de
estado y el calendario del navegador salen blancos sobre la tarjeta negra. */
color-scheme: dark;
}
.reg-card .input::placeholder { color: rgb(255 255 255 / .3); }
.reg-card .input:focus,
.reg-card .select:focus { border-color: var(--reg-lima); outline-color: var(--reg-lima); }
.reg-card .input-group.-framed { background: rgb(255 255 255 / .04); border-color: var(--reg-linea); }
.reg-card .input-lead,
.reg-card .input-addon { color: var(--reg-tenue); }
.reg-card .field-hint { color: var(--reg-tenue); }
.reg-card .check span { color: var(--reg-claro); }
/* ── Escritorio ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
.reg { padding: 2rem; }
.reg-card { max-width: 56rem; padding: 2.25rem 3rem 2rem; border-radius: 1.75rem; }
.reg-head { margin-bottom: 1.75rem; }
.reg-title { font-size: 2.75rem; }
.reg-sub { font-size: .9375rem; }
.reg-steps { margin-bottom: 2rem; }
.reg-school { padding: 1.125rem; min-height: 6rem; }
.reg-note { font-size: .875rem; }
.reg-note span { max-width: 42ch; }
}
/* ── La casilla del consentimiento ─────────────────────────────────────────
Es un control NATIVO, y el navegador lo pinta con el esquema del sistema: en
una tarjeta negra salía un cuadro blanco flotando, como si estuviera puesto
por error. `color-scheme: dark` le dice al navegador de qué color es el
fondo que tiene detrás, y `accent-color` pone la palomita en el verde de la
marca en vez del azul del sistema.
Se resuelve así y no dibujando una casilla propia con pseudoelementos: la
nativa ya trae el foco del teclado, el tamaño táctil del sistema y el
comportamiento que espera un lector de pantalla. Reemplazarla es perder las
tres cosas a cambio de un cuadrito. */
.reg-card .check input[type="checkbox"] {
color-scheme: dark;
accent-color: var(--reg-lima);
/* El TAMAÑO no se toca: components.css ya la deja en 20 px, que es lo que
hace falta para acertarle con el pulgar. Ponerla en 18 aquí habría sido
encoger un control obligatorio para ganar dos píxeles de nada. */
}
/* ── Los guantes de la esquina ─────────────────────────────────────────────
Pegados abajo a la derecha, como en la lámina.
Van DEBAJO de la tarjeta (z-index 0 contra el 1 de `.reg-card`) y sin
`pointer-events`: son decoración, y si se comieran un clic destinado al
formulario nadie entendería por qué el botón "no responde" en esa esquina.
El recorte ya trae los bordes fundidos en el propio PNG y no aquí con una
máscara CSS: así se ve igual en cualquier navegador y no depende de que
`mask-image` esté soportado — el día que no lo esté, en vez de un fundido
habría un rectángulo con un trozo de césped ajeno pegado. */
.reg-guantes {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: clamp(180px, 26vw, 380px);
height: auto;
pointer-events: none;
user-select: none;
}
/* En el teléfono la tarjeta ocupa casi toda la pantalla y de los guantes solo
asomaría una esquina detrás: más ruido que adorno. Aparecen cuando hay sitio
de verdad para que se lean como lo que son. */
@media (max-width: 719px) {
.reg-guantes { display: none; }
}
/* Quien pidió menos movimiento no pierde nada aquí —esto no se mueve—, pero sí
se le ahorra la descarga a quien va en ahorro de datos: son 76 KB de adorno.
No hay media query para eso, así que se resuelve con el tamaño: en pantallas
chicas ni se pide, porque `display:none` sobre un ![]()
con `loading=lazy`
evita la petición en los navegadores actuales. */
/* ── El desenfoque, más barato en el teléfono ──────────────────────────────
`backdrop-filter` obliga al navegador a recomponer y volver a difuminar todo
lo que hay detrás de la tarjeta en cada cuadro. Sobre una superficie grande
eso se nota en un Android de gama baja justo cuando peor cae: al escribir,
con el teclado subiendo y la pantalla repintando.
18 px en lugar de 30 se ve prácticamente igual a ese tamaño de tarjeta —el
estadio ya queda irreconocible— y cuesta bastante menos. El escritorio se
queda con los 30, que es donde hay GPU de sobra y la tarjeta es más grande. */
@media (max-width: 719px) {
.reg-card {
backdrop-filter: blur(18px) saturate(1.3) brightness(1.5);
-webkit-backdrop-filter: blur(18px) saturate(1.3) brightness(1.5);
}
}
/* ═══ Ajustes de la lámina v2 ══════════════════════════════════════════════
Los iconos pasaron de pictogramas SVG a ILUSTRACIONES en PNG: el balón y el
guante llevan estelas de movimiento, sombreado y grosores variables, que es
justo lo que `Ui::icon()` no sabe dibujar — ese catálogo existe para trazo
uniforme que hereda `currentColor`. Aquí el color es parte del dibujo. */
/* El escudo de contorno de la cabecera. */
.reg-crest-img { height: clamp(64px, 15vw, 88px); width: auto; }
/* ── El icono de cada escuela ────────────────────────────────────────────
La ilustración viene apaisada (el balón trae sus estelas a la izquierda), así
que la caja es más ancha que alta — con una caja cuadrada, el balón quedaba
diminuto para que cupieran las estelas. */
.reg-school-ic { width: 5.25rem; height: 3.5rem; }
.reg-school-ic img { width: 100%; height: 100%; object-fit: contain; }
/* La palomita, ya dibujada con su círculo relleno: aquí solo se coloca. El
fondo y el color salen del propio PNG, así que se le quita el círculo que
ponía el CSS — si no, se veía un aro dentro de otro. */
.reg-school-check {
width: 2rem;
height: 2rem;
background: none;
top: .75rem;
right: .75rem;
}
.reg-school-check img { width: 100%; height: 100%; object-fit: contain; }
/* El icono de la nota. */
.reg-note img { flex: 0 0 auto; width: 1.75rem; height: auto; margin-top: -.125rem; }
/* ── El balón del botón ──────────────────────────────────────────────────
Va a la IZQUIERDA y absoluto, no en el flujo: metido entre los hijos del
botón desplazaba el texto y «Siguiente» dejaba de estar centrado, que es
donde el ojo lo busca. */
/* El balón viaja CON el texto, no clavado en la esquina.
Estuvo absoluto a la izquierda para no descentrar «Siguiente», pero así se
leía como un adorno pegado al borde, sin relación con la palabra. En el flujo
los tres —balón, texto y flecha— se centran como un solo grupo, que es como
se lee un botón. */
.reg-cta-ball {
flex: 0 0 auto;
width: 2.75rem;
height: auto;
/* Un pelín de aire a la derecha: pegado a la «S» el balón parecía tocarla. */
margin-right: .125rem;
pointer-events: none;
/* El balón viene en verde lima, y encima de un botón lima desaparecería.
`brightness(0)` lo pasa a negro sólido, que es como está en la lámina. */
filter: brightness(0);
opacity: .85;
}
/* En pantallas muy angostas se encoge en vez de desaparecer: quitarlo dejaba
el botón distinto en el celular que en la computadora, sin motivo. */
@media (max-width: 400px) { .reg-cta-ball { width: 2rem; } }
/* ── La barra de pasos ───────────────────────────────────────────────────
El tramo ya recorrido va en lima, como en la lámina: enseña el AVANCE, no
solo en cuál se está. La línea también engorda, que a 1 px se perdía sobre
el estadio. */
.reg-step + .reg-step::before { height: 2px; background: rgb(255 255 255 / .16); }
.reg-step.is-active::before,
.reg-step.is-done::before { background: var(--reg-lima); }
/* Los círculos, más grandes y con más aire, como en la lámina. */
.reg-step-num { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.reg-step + .reg-step::before { top: 1.25rem; }
.reg-step-label { font-size: .8125rem; }
/* ── Dos versales que venían de FUERA del módulo ───────────────────────────
Se me escaparon porque no estaban escritas aquí:
· `.btn` de components.css pone `text-transform: uppercase` a TODOS los
botones de la plataforma. Es una decisión de marca correcta en el resto del
sitio, así que no se toca ahí — se anula solo en esta pantalla.
· `h1, h2, h3` de base.css impone la fuente de titulares (Anton). El título
ya la anulaba a mano; la pregunta es un y se quedaba en condensada.
Buscar «uppercase» dentro del módulo no encontraba ninguna de las dos: el
estilo que ves no siempre está en el archivo que estás mirando. */
.reg-q { font-family: var(--font, system-ui, sans-serif); }
/* ── El tramo recorrido de la barra de pasos ───────────────────────────────
Va en lima el segmento que SIGUE al paso activo, que es el que la lámina
pinta: enseña de dónde vienes, no dónde estás — para eso ya está el círculo
encendido. */
.reg-step.is-active + .reg-step::before,
.reg-step.is-done + .reg-step::before { background: var(--reg-lima); }
/* ── El mapa de la ubicación ───────────────────────────────────────────────
Alto FIJO y en `aspect-ratio` no: el mapa se monta oculto y Google necesita
una caja con medidas reales para saber cuántos mosaicos pedir. Con una caja
de alto cero se pintaba gris y solo se arreglaba al cambiar el tamaño de la
ventana. */
.reg-map {
margin-top: .625rem;
height: 220px;
border: 1px solid var(--reg-borde, rgb(255 255 255 / .14));
border-radius: 12px;
overflow: hidden;
/* Mientras cargan los mosaicos se ve este fondo y no un hueco blanco, que en
una portada oscura pega un fogonazo. */
background: rgb(255 255 255 / .04);
}
.reg-map-lienzo { width: 100%; height: 100%; }
/* Los controles de Google vienen en claro. Aquí el formulario es oscuro, así
que se les baja el brillo en vez de dejar botones blancos flotando. */
.reg-map .gm-style-cc,
.reg-map .gmnoprint { filter: brightness(.92); }
.reg-map-tip { display: block; margin-top: .375rem; }
@media (min-width: 720px) { .reg-map { height: 260px; } }
/* Las OPCIONES del desplegable, con color propio.
El `color-scheme` de la raíz ya hace que el sistema pinte la lista en oscuro,
pero no todos los navegadores le hacen caso en la ventanita emergente —y
cuando no, quedaba texto casi blanco sobre fondo blanco: la lista de estados
era ilegible salvo la fila resaltada. Con estos dos colores se lee siempre,
haga lo que haga el sistema. */
.reg-card .select option {
background: #14180f;
color: #e8ecdf;
}