/*
	La Wiki de What If? -- laboratoriossniminix.com
	Laboratorios Sniminix. Reporte #89 de Lex.

	Un solo tema, oscuro, a proposito: es el mundo del HUD (negro brillante,
	verde de "activo", violeta del simbolo trans, cian del escaner). El fondo
	del body se pinta siempre, para que la pagina se vea igual en cualquier
	navegador.
*/

:root {
	--fondo: #07080b;
	--superficie: #101218;
	--superficie-2: #171a22;
	--borde: #262b36;
	--texto: #e8ebf1;
	--texto-suave: #a3abb8;
	--verde: #3ddc84;       /* el boton activo del HUD */
	--violeta: #b55cff;     /* el simbolo trans del HUD */
	--cian: #2fd3e0;        /* la barra y el escaner */
	--rojo: #ff5468;        /* dañado, pausado, muerte */
	--ambar: #ffb547;
	--radio: 14px;
	--ancho: 1120px;
	--lectura: 68ch;
	--titulo: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
	--cuerpo: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--cuerpo);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cian); text-underline-offset: 3px; }
a:hover { color: #7fe9f1; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--titulo);
	line-height: 1.2;
	letter-spacing: .01em;
	text-wrap: balance;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; margin-top: 0; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }

p { margin: 0 0 1em; max-width: var(--lectura); }
ul, ol { padding-left: 1.3em; max-width: var(--lectura); }
li { margin: .35em 0; }
strong { color: #fff; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

/* ---------------- cabecera ---------------- */

.cabecera {
	position: sticky; top: 0; z-index: 20;
	background: rgba(7, 8, 11, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
}
/* La cabecera es mas ancha que el contenido: con siete paginas en el menu y
   los siete idiomas, en 1120 px los botones se partian en dos lineas
   (reporte #94 de Lex). */
.cabecera .contenedor {
	display: flex; align-items: center; gap: 1rem;
	min-height: 64px;
	width: min(1360px, 100% - 32px);
}
.marca {
	display: flex; align-items: center; gap: .6rem;
	font-family: var(--titulo); font-weight: 600; font-size: 1.15rem;
	color: var(--texto); text-decoration: none; white-space: nowrap;
}
.marca img { width: 34px; height: 34px; }
.marca small { color: var(--texto-suave); font-weight: 500; font-size: .8em; }

.menu-principal { margin-left: auto; display: flex; gap: .2rem; align-items: center; }
.menu-principal a {
	color: var(--texto-suave); text-decoration: none;
	font-size: .85rem; padding: .4em .55em; border-radius: 8px;
	white-space: nowrap;
}
.menu-principal a:hover, .menu-principal a[aria-current="page"] { color: #fff; background: var(--superficie-2); }

/* El idioma, en un desplegable (reporte #108). */
.idiomas { display: flex; margin-left: .5rem; }
.idiomas select {
	font: inherit; font-size: .8rem; font-weight: 700;
	background: var(--superficie-2); color: var(--texto);
	border: 1px solid var(--verde); border-radius: 8px; padding: .3em .5em; cursor: pointer;
}
.idiomas select:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El torso de "Mi perfil": marca de agua sin sesion, verde con ella (#108). */
.enlace-perfil { display: inline-flex; align-items: center; gap: .35em; }
.icono-perfil { fill: currentColor; opacity: .35; transition: opacity .2s, fill .2s; }
.con-sesion .icono-perfil { fill: var(--verde); opacity: 1; }

/* ---------------- preguntas frecuentes (#108) ---------------- */
.faq { display: grid; gap: .6rem; max-width: 820px; margin-top: 1.6rem; }
.faq-item { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.faq-pregunta {
	width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 1.05rem;
	color: var(--texto); background: none; border: 0; padding: 1rem 1.2rem; cursor: pointer;
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-pregunta::after { content: "+"; color: var(--verde); font-size: 1.3rem; line-height: 1; }
.faq-pregunta[aria-expanded="true"]::after { content: "\2212"; }
.faq-pregunta:focus-visible { outline: 2px solid var(--cian); outline-offset: -2px; border-radius: var(--radio); }
.faq-respuesta { padding: 0 1.2rem 1.1rem; color: var(--texto-suave); max-width: var(--lectura); }
.faq-respuesta p, .faq-respuesta ul { margin: 0 0 .8rem; }
.faq-respuesta li { margin-bottom: .3rem; }
.formulario textarea {
	font: inherit; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .7em .8em; min-height: 120px; resize: vertical;
}
.formulario textarea:focus-visible { border-color: var(--cian); outline: none; }
.formulario textarea:disabled, .formulario button:disabled { opacity: .45; cursor: not-allowed; }
.faq-form { max-width: 640px; }

/* Los mensajes del sistema en el perfil (#108). */
.mensajes { display: grid; gap: .7rem; padding: 0; list-style: none; }
.mensajes li { border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1.1rem; background: var(--superficie); }
.mensajes li.nuevo { border-color: var(--verde); }
.mensajes .titulo { font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.mensajes .fecha { color: var(--texto-suave); font-weight: 400; font-size: .85rem; }
.mensajes .texto { white-space: pre-wrap; color: var(--texto-suave); margin: .5rem 0 0; }

.boton-menu { display: none; margin-left: auto; font: inherit; background: none; border: 1px solid var(--borde); color: var(--texto); border-radius: 8px; padding: .3em .7em; cursor: pointer; }

/* Por debajo de esto el menu no cabe en una linea: se abre con el boton. */
@media (max-width: 1240px) {
	.boton-menu { display: block; }
	.menu-principal {
		display: none; position: absolute; top: 64px; left: 0; right: 0;
		flex-direction: column; align-items: stretch;
		background: var(--superficie); border-bottom: 1px solid var(--borde); padding: .5rem 16px 1rem;
	}
	.menu-principal.abierto { display: flex; }
	.idiomas { margin: .6rem 0 0; }
}

/* ---------------- secciones ---------------- */

.seccion { padding: 72px 0; border-bottom: 1px solid var(--borde); }
.seccion.alterna { background: var(--superficie); }
.seccion .antetitulo {
	font-family: var(--titulo); font-size: .85rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--verde); margin-bottom: .6rem; display: block;
}
.intro { color: var(--texto-suave); font-size: 1.1rem; }

/* ---------------- portada ---------------- */

.portada { padding: 56px 0 40px; }
.portada .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.portada p { font-size: 1.15rem; color: var(--texto-suave); }
.portada .hud-portada { filter: drop-shadow(0 20px 60px rgba(181, 92, 255, .25)); }
/* El HUD con su boton a la tienda debajo, ancho como una base (Lex, #99). */
.hud-bloque { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.hud-bloque .boton-tienda { display: flex; justify-content: center; text-align: center; font-size: 1.15rem; padding: .9em 1em; }
@media (max-width: 900px) { .portada .contenedor { grid-template-columns: 1fr; } }

.botones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.boton {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--titulo); font-weight: 600; font-size: 1rem;
	padding: .75em 1.3em; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--borde); color: var(--texto); background: var(--superficie-2);
}
.boton.principal { background: var(--verde); color: #04140b; border-color: var(--verde); }
.boton.principal:hover { background: #62e89d; color: #04140b; }
.boton:hover { color: #fff; border-color: var(--texto-suave); }

/* ---------------- carrusel de publicidad ---------------- */

.carrusel { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--superficie); }
.carrusel .pistas { display: flex; transition: transform .6s ease; }
.carrusel .diapositiva { flex: 0 0 100%; aspect-ratio: 8 / 3; position: relative; }
.carrusel .diapositiva img { width: 100%; height: 100%; object-fit: cover; }
.carrusel .hueco {
	width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
	padding: 1.5rem; color: var(--texto-suave);
	background:
		radial-gradient(circle at 20% 30%, rgba(61, 220, 132, .16), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(181, 92, 255, .18), transparent 50%),
		var(--superficie-2);
}
.carrusel .hueco strong { display: block; font-family: var(--titulo); font-size: clamp(1.2rem, 3vw, 2rem); color: #fff; }
.carrusel .puntos { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.carrusel .puntos button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; padding: 0; }
.carrusel .puntos button[aria-current="true"] { background: var(--verde); }
.carrusel .flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde);
	background: rgba(7, 8, 11, .6); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.carrusel .flecha.ant { left: 12px; }
.carrusel .flecha.sig { right: 12px; }

/* ---------------- tarjetas ---------------- */

.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tarjeta {
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem;
}
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: .98rem; }
.tarjeta h3 { margin: 0; }
a.tarjeta { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.tarjeta:hover { border-color: var(--verde); transform: translateY(-2px); }
.tarjeta .icono { width: 64px; height: 64px; }
.tarjeta .icono.genero { width: 96px; height: 96px; }

.etiqueta {
	display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
	padding: .15em .6em; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-suave);
	align-self: flex-start;
}
.etiqueta.verde { color: var(--verde); border-color: rgba(61, 220, 132, .5); }
.etiqueta.violeta { color: var(--violeta); border-color: rgba(181, 92, 255, .5); }
.etiqueta.rojo { color: var(--rojo); border-color: rgba(255, 84, 104, .5); }
.etiqueta.cian { color: var(--cian); border-color: rgba(47, 211, 224, .5); }

/* inclusivo */
.inclusivo { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.2rem 0; }
.inclusivo span {
	font-family: var(--titulo); font-weight: 600; padding: .5em 1em; border-radius: 999px;
	background: var(--superficie-2); border: 1px solid var(--borde);
}

/* ---------------- el HUD con sus flechas ---------------- */

.diagrama { position: relative; max-width: 900px; margin: 0 auto 2rem; }
.diagrama img { width: 100%; }
.diagrama .marcador {
	position: absolute; transform: translate(-50%, -50%);
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--titulo); font-weight: 700; font-size: .95rem;
	background: var(--verde); color: #04140b;
	box-shadow: 0 0 0 4px rgba(61, 220, 132, .25), 0 4px 14px rgba(0, 0, 0, .6);
	text-decoration: none;
}
.leyenda { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); counter-reset: none; padding: 0; list-style: none; max-width: none; }
.leyenda li { display: flex; gap: .9rem; align-items: flex-start; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; margin: 0; }
.leyenda .num {
	flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	background: var(--verde); color: #04140b; font-family: var(--titulo); font-weight: 700; font-size: .9rem;
}
.leyenda strong { display: block; }
.leyenda span.txt { color: var(--texto-suave); font-size: .97rem; }

/* estados de un boton */
.estados { display: flex; gap: 18px; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.estado { text-align: center; width: 128px; }
.estado img { width: 96px; margin: 0 auto .4rem; }
.estado span { font-size: .88rem; color: var(--texto-suave); }

/* ---------------- pasos ---------------- */

.pasos { list-style: none; padding: 0; counter-reset: paso; max-width: var(--lectura); }
.pasos > li {
	counter-increment: paso; position: relative;
	padding: 0 0 1.3rem 3.2rem; margin: 0;
}
.pasos > li::before {
	content: counter(paso); position: absolute; left: 0; top: -.1rem;
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--titulo); font-weight: 700;
	border: 2px solid var(--verde); color: var(--verde);
}
.pasos > li:not(:last-child)::after {
	content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .2rem; width: 2px; background: var(--borde);
}
.pasos strong { display: block; font-size: 1.05rem; }

/* avisos */
.aviso {
	border-left: 4px solid var(--ambar); background: rgba(255, 181, 71, .07);
	padding: .9rem 1.2rem; border-radius: 0 var(--radio) var(--radio) 0; margin: 1.2rem 0; max-width: var(--lectura);
}
.aviso.verde { border-color: var(--verde); background: rgba(61, 220, 132, .07); }
.aviso p:last-child { margin: 0; }

/* ---------------- productos ---------------- */

.producto {
	display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start;
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.5rem; margin-bottom: 20px;
}
.producto .foto {
	aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; text-align: center;
	background: radial-gradient(circle at 50% 40%, rgba(47, 211, 224, .14), transparent 65%), var(--superficie);
	border: 1px dashed var(--borde); color: var(--texto-suave); font-size: .82rem; padding: .8rem;
}
.producto .foto img { width: 100%; height: 100%; object-fit: contain; }
.producto .foto:has(img) { border-style: solid; padding: .4rem; }
.producto .foto img[data-ampliar] { cursor: zoom-in; border-radius: 10px; transition: transform .25s ease, filter .25s ease; }
.producto .foto img[data-ampliar]:hover, .producto .foto img[data-ampliar]:focus-visible { transform: scale(1.05); filter: drop-shadow(0 10px 22px rgba(47, 211, 224, .28)); }
.producto .foto img[data-ampliar]:focus-visible { outline: 2px solid var(--acento, #2fd3e0); outline-offset: 4px; }

/* El visor de fotos (reporte #95): la foto a tamano real sobre la pagina
   difuminada, con un halo del color de la marca detras. */
body.visor-abierto { overflow: hidden; }
.visor {
	position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
	background: rgba(5, 7, 10, .74); backdrop-filter: blur(14px) saturate(1.15);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	opacity: 0; transition: opacity .26s ease;
}
.visor.abierto { opacity: 1; }
.visor figure {
	margin: 0; display: grid; gap: 16px; justify-items: center;
	transform: scale(.9) translateY(12px); transition: transform .38s cubic-bezier(.2, .9, .2, 1);
}
.visor.abierto figure { transform: none; }
.visor img {
	width: min(800px, 92vw, 78vh); height: auto; aspect-ratio: 1; object-fit: contain;
	border-radius: 24px; cursor: default;
	background: radial-gradient(circle at 50% 45%, rgba(47, 211, 224, .22), rgba(47, 211, 224, 0) 62%);
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}
.visor figcaption {
	font-family: var(--titulo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: #fff; font-size: .95rem; text-align: center;
}
.visor-cerrar {
	position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff;
	font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.visor-cerrar:focus-visible { outline: 2px solid #2fd3e0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.visor, .visor figure, .visor-cerrar, .producto .foto img[data-ampliar] { transition: none; }
	.visor figure { transform: none; }
}
.producto h3 { margin-bottom: .3rem; }
.producto dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .8rem 0 0; font-size: .97rem; }
.producto dt { color: var(--texto-suave); }
.producto dd { margin: 0; }
@media (max-width: 640px) { .producto { grid-template-columns: 1fr; } .producto .foto { max-width: 220px; } }

/* tablas */
.tabla-marco { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); margin: 1rem 0 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-family: var(--titulo); font-weight: 600; color: var(--texto-suave); background: var(--superficie-2); }
tr:last-child td { border-bottom: 0; }

/* records: las medallas (las de la portada son un dibujo; las del perfil,
   imagenes de img/medallas/) */
.medallas { display: flex; gap: 22px; flex-wrap: wrap; margin: 1.2rem 0; }
.medalla { width: 110px; text-align: center; color: var(--texto-suave); font-size: .85rem; }
.medalla svg { width: 90px; height: 90px; margin: 0 auto .4rem; display: block; opacity: .35; }

/* pie */
.pie { padding: 40px 0 56px; color: var(--texto-suave); font-size: .92rem; }
.pie .contenedor { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.pie nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.pie a { color: var(--texto-suave); }

/* idioma: se ESCONDE el que no toca, con !important, y el elegido conserva su
   display normal. Al reves (esconder todos y "revertir" el elegido) una regla
   de clase mas especifica, como .seccion .antetitulo {display:block}, le ganaba
   al esconder y salian los dos idiomas a la vez. Un idioma nuevo = una linea. */
html[data-ver="en"] [data-idioma]:not([data-idioma="en"]),
html[data-ver="es"] [data-idioma]:not([data-idioma="es"]),
html[data-ver="pt"] [data-idioma]:not([data-idioma="pt"]),
html[data-ver="ja"] [data-idioma]:not([data-idioma="ja"]),
html[data-ver="fr"] [data-idioma]:not([data-idioma="fr"]),
html[data-ver="de"] [data-idioma]:not([data-idioma="de"]),
html[data-ver="it"] [data-idioma]:not([data-idioma="it"]) { display: none !important; }

/* ---------------- el perfil (bloque 2) ---------------- */

/* hidden gana siempre: img {display:block} y .boton lo pisaban */
[hidden] { display: none !important; }

.formulario { display: grid; gap: .7rem; max-width: 420px; margin: 1.4rem 0; }
.formulario label { font-weight: 700; }
.formulario input[type="text"] {
	font: inherit; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .9rem;
}
.formulario input:focus-visible { border-color: var(--cian); }
.formulario .boton { justify-self: start; }
#codigo { font-family: var(--titulo); font-size: 1.6rem; letter-spacing: .3em; max-width: 14ch; }
.mensaje { min-height: 1.6em; color: var(--ambar); }
.nota { color: var(--texto-suave); font-size: .92rem; }

.ficha-cabeza { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.retrato {
	width: 148px; height: 148px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
	border: 3px solid var(--verde); background: var(--superficie-2);
	display: grid; place-items: center;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.sin-foto { font-family: var(--titulo); font-size: 3rem; color: var(--texto-suave); }

.bloque { border-top: 1px solid var(--borde); padding-top: 1.6rem; margin-top: 1.6rem; }
.enlace-publico { display: flex; gap: .4rem .8rem; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; margin: 0 0 .2rem; }
.enlace-publico .nota { margin: 0; }
.boton.chico { padding: .3em .8em; font-size: .88rem; }

/* La cabecera del perfil (#112): debajo del nombre, la salud, el embarazo y
   los partos en camino. Se ve siempre, tambien en el perfil publico. */
.ficha-datos { flex: 1 1 300px; min-width: 0; }
.ficha-datos h1 { margin-bottom: .35rem; overflow-wrap: anywhere; }
.cabecera-salud { display: grid; gap: .1rem; margin: 0 0 .8rem; font-size: 1.02rem; }
.cabecera-salud > div { display: flex; flex-wrap: wrap; gap: .45em; align-items: baseline; }
.cabecera-salud dt { color: var(--texto-suave); }
.cabecera-salud dd { margin: 0; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.cabecera-salud .tono-verde { color: var(--verde); }
.cabecera-salud .tono-ambar { color: var(--ambar); }
.cabecera-salud .tono-rojo { color: var(--rojo); }

/* LAS MEDALLAS Y LAS OPTIMIZACIONES (#112). Debajo de cada imagen, el
   titulo del tamano de siempre y, un punto mas pequeno y sin espacio entre
   lineas, el metal, la cuenta y lo que falta. Cada metal pone su color. */
.medalla { display: grid; justify-items: center; align-content: start; gap: .15rem; width: 150px; --metal: var(--texto-suave); }
.medalla strong { font-family: var(--titulo); }
.medalla.ganada svg { opacity: 1; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.metal-hierro { --metal: #9aa3ad; }
.metal-bronce { --metal: #d4884a; }
.metal-plata { --metal: #d3dae3; }
.metal-oro { --metal: #f2c14e; }
.metal-platino { --metal: #9fe7f5; }
.metal-diamante { --metal: #b9d4ff; }
.grafica { width: 90px; height: 90px; display: grid; place-items: center; margin-bottom: .25rem; }
.grafica img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.sin-ganar .grafica img { filter: grayscale(1); opacity: .35; }
.grafica-hueco {
	width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .4), transparent 55%), var(--metal);
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .2); color: rgba(7, 8, 11, .8); font-size: .9rem; letter-spacing: .05em;
}
.sin-ganar .grafica-hueco { background: var(--superficie-2); border: 2px dashed var(--borde); box-shadow: none; }
.optimizacion .grafica-hueco { border-radius: 18px; background: var(--superficie-2); border: 1px dashed var(--borde); box-shadow: none; }
.medalla .detalle { display: block; font-size: calc(.85rem - 1pt); line-height: 1.2; color: var(--texto-suave); }
.medalla .detalle .linea { display: block; margin: 0; }
.medalla .detalle .calificacion { color: var(--metal); font-weight: 700; }
.optimizacion strong { overflow-wrap: anywhere; }

/* EL INTERRUPTOR DE ESTADIO (#112): una pildora con la pelotita dentro.
   Apagado: todo gris y la pelotita a la izquierda; encendido: todo verde y
   la pelotita a la derecha. Es un checkbox de verdad (role="switch"): el
   teclado, el foco y los lectores de pantalla funcionan sin JavaScript. */
.pie-bloque {
	display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem;
	margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--borde);
}
.pie-bloque .mensaje { margin: 0; min-height: 0; font-size: .92rem; }
.estadio { position: relative; display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; color: var(--texto-suave); font-size: .95rem; }
.estadio input {
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 52px; height: 30px; margin: 0; opacity: 0; cursor: pointer;
}
.estadio .pista {
	flex: 0 0 auto; position: relative; width: 52px; height: 30px; border-radius: 999px;
	background: #2b303b; border: 1px solid #3d4350;
	transition: background-color .2s ease, border-color .2s ease;
}
.estadio .pelota {
	position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
	background: #8d95a3; box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	transition: transform .2s ease, background-color .2s ease;
}
.estadio input:checked + .pista { background: var(--verde); border-color: var(--verde); }
.estadio input:checked + .pista .pelota { transform: translateX(22px); background: #dcffe9; }
.estadio input:checked ~ .estadio-texto { color: var(--texto); }
.estadio input:focus-visible + .pista { outline: 2px solid var(--cian); outline-offset: 3px; }
.estadio input:disabled + .pista { opacity: .55; }
.estadio input:disabled { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
	.estadio .pista, .estadio .pelota { transition: none; }
}
@media (forced-colors: active) {
	.estadio .pista { border-color: CanvasText; }
	.estadio .pelota { background: CanvasText; forced-color-adjust: none; }
	.estadio input:checked + .pista { background: Highlight; forced-color-adjust: none; }
}

/* LAS ECOGRAFIAS (#112): una linea cada una. El historial se ve entero
   hasta 8 lineas; desde la novena, scroll. La altura de la fila es fija
   para que "8 lineas" sea exacto. */
.ecos-titulo { font-size: 1.05rem; margin: 1.3rem 0 .5rem; }
.ecos-lista {
	--fila-eco: 2.9rem;
	list-style: none; padding: 0; margin: 0 0 .3rem; max-width: 720px;
	border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2);
}
.ecos-lista li {
	display: flex; align-items: center; gap: .8rem; height: var(--fila-eco); margin: 0;
	padding: 0 .55rem 0 1rem; border-bottom: 1px solid var(--borde);
}
.ecos-lista li:last-child { border-bottom: 0; }
.ecos-lista.historial { max-height: calc(var(--fila-eco) * 8 + 2px); overflow-y: auto; overscroll-behavior: contain; }
.ecos-lista:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.eco-enlace {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .8rem;
	color: var(--texto); text-decoration: none; white-space: nowrap;
}
.eco-enlace::after { content: "\2197"; color: var(--cian); flex: 0 0 auto; }
.eco-fecha { flex: 0 0 auto; color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: .92rem; }
.eco-que { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eco-enlace:hover .eco-que, .eco-enlace:focus-visible .eco-que { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; }
.ecos-lista .boton.chico { flex: 0 0 auto; }
@media (max-width: 560px) {
	.ecos-lista { --fila-eco: 3.6rem; }
	.eco-enlace { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
	.eco-enlace::after { display: none; }
	.eco-que { max-width: 100%; }
}

/* el nombre de quien llega desde el boton Perfil del HUD (#92) */
.nombre-hud { font-family: var(--titulo); font-size: 1.5rem; font-weight: 600; color: #fff; margin: .2rem 0 0; }

/* ---------------- Perfiles (reporte #134) ---------------- */
/* Las pestanas: Usuarios y Mi perfil siempre; Editar y Creditos con la
   sesion abierta, y Salir al final de la fila. */
.pestanas {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2rem;
	border-bottom: 1px solid var(--borde); margin: 0 0 2.2rem;
}
.pestana {
	font: inherit; font-family: var(--titulo); font-weight: 600; font-size: 1.02rem;
	color: var(--texto-suave); background: none; border: 0; border-bottom: 3px solid transparent;
	padding: .65rem 1rem .55rem; margin-bottom: -1px; cursor: pointer;
	display: inline-flex; align-items: center; gap: .45em;
}
.pestana:hover { color: #fff; }
.pestana[aria-selected="true"] { color: #fff; border-bottom-color: var(--verde); }
.pestana:focus-visible { outline: 2px solid var(--cian); outline-offset: -3px; border-radius: 6px; }
/* Mensajes del sistema sin leer: un punto en Editar. */
.pestana .punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde); }
.pestanas .salir { margin: 0 0 .5rem auto; }

/* Lo que solo oye un lector de pantalla. */
.oculto {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.buscador { display: grid; gap: .45rem; max-width: 720px; margin: 1.6rem 0 1.8rem; }
.buscador label { font-weight: 700; }
.buscador input, .buscador select {
	font: inherit; font-size: 1.05rem; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .75rem .95rem;
}
.buscador input:focus-visible, .buscador select:focus-visible { border-color: var(--cian); outline: none; }
.buscador .nota { margin: 0; }
.buscador .boton { justify-self: start; margin-top: .35rem; }
/* Los renglones de la busqueda (#139): Genero, Rol y Raza, uno al lado del
   otro; el del rol se apaga con Femenino. */
.filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: .5rem 0 .2rem; }
.filtro { display: grid; gap: .35rem; }
.filtro select { width: 100%; min-width: 0; cursor: pointer; }
.filtro select:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .filtros { grid-template-columns: 1fr; } }
/* Las paginas: Retroceder, el conteo (10/132) y Avanzar, debajo de la lista. */
.paginas { display: flex; align-items: center; justify-content: center; gap: 1.1rem; max-width: 720px; margin: .9rem 0 .4rem; }
.paginas .boton[disabled] { opacity: .4; cursor: not-allowed; }
.cuenta-paginas { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.lista-titulo { font-size: 1.25rem; margin: 0 0 .7rem; }

/* Las personas: una linea cada una, como en Records. Miniatura de la foto,
   nombre arriba y genero y rol debajo, y a la derecha el enlace al perfil
   (y Quitar, en Perfiles que me gustan). */
.personas {
	--fila-persona: 4rem;
	list-style: none; padding: 0; margin: 0 0 .4rem; max-width: 720px;
	border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2);
}
.personas li {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-areas: "foto nombre acciones" "foto datos acciones";
	column-gap: .9rem; align-items: center; margin: 0; box-sizing: border-box;
	height: var(--fila-persona); padding: 0 1rem; border-top: 1px solid var(--borde);
}
.personas li:first-child { border-top: 0; }
.personas .mini-foto {
	grid-area: foto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
	background: var(--superficie); border: 2px solid var(--borde); box-sizing: border-box;
}
.personas .mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.personas .nombre {
	grid-area: nombre; align-self: end; font-weight: 700; color: #fff; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.personas .datos {
	grid-area: datos; align-self: start; color: var(--texto-suave); font-size: .9rem; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.personas .acciones { grid-area: acciones; display: flex; gap: .8rem; align-items: center; }
.personas .ver { font-size: .92rem; white-space: nowrap; }
/* Desde la undecima, scroll: se ven diez enteras. */
.personas.con-scroll { max-height: calc(var(--fila-persona) * 10 + 2px); overflow-y: auto; overscroll-behavior: contain; }
.personas:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* El perfil publico: la biografia en una columna a la derecha del nombre y
   la cabecera; en el movil, debajo. Lex: "darle un poco mas de espacio a esa
   columna ya que sobra mucho en medio": los datos ocupan lo que miden y la
   biografia se queda con el resto. */
.volver { margin: 0 0 1.2rem; }
#vista-publica .ficha-datos { flex: 0 1 auto; max-width: 460px; }
.ficha-bio {
	flex: 1 1 380px; min-width: 0; align-self: stretch;
	border-left: 1px solid var(--borde); padding-left: 24px;
}
.ficha-bio .bio-titulo {
	font-size: .95rem; margin: 0 0 .5rem; color: var(--texto-suave);
	text-transform: uppercase; letter-spacing: .08em;
}
/* "Reducirle un punto a esa fuente y reducir el interlineado a la mitad del
   espacio actual": 18 px -> 1 pt menos, y de 1,65 a 1,33 (el espacio entre
   lineas, de 0,65 a 0,33). */
.bio-texto {
	white-space: pre-line; overflow-wrap: anywhere; margin: 0; color: var(--texto);
	font-size: calc(1em - 1pt); line-height: 1.33; max-width: none;
}
@media (max-width: 760px) {
	.ficha-bio { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde); padding-top: 1rem; }
}
.me-gusta .corazon { color: var(--rojo); font-size: 1.15em; line-height: 1; }
.me-gusta[aria-pressed="true"] { border-color: var(--rojo); background: rgba(255, 84, 104, .14); color: #fff; }
.me-gusta[aria-pressed="true"] .no-gusta, .me-gusta:not([aria-pressed="true"]) .si-gusta { display: none; }
.me-gusta[disabled] { opacity: .6; cursor: progress; }

/* Editar: la biografia y con quien se relaciona. */
.editor-bio { display: grid; gap: .6rem; max-width: 720px; margin-top: .4rem; }
.editor-bio textarea {
	font: inherit; color: var(--texto); background: var(--superficie-2);
	border: 1px solid var(--borde); border-radius: 10px; padding: .75rem .9rem;
	min-height: 9rem; resize: vertical;
}
.editor-bio textarea:focus-visible { border-color: var(--cian); outline: none; }
.editor-bio .pie { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.editor-bio .contador { margin: 0; font-variant-numeric: tabular-nums; }
.editor-bio .mensaje { margin: 0; min-height: 0; }
.gustos { display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; margin: .8rem 0 .4rem; }

/* ---------------- la pagina de Records (#112) ---------------- */
/* Dos columnas: Longevidad | Inmortal arriba, Matriarca | Patriarca abajo.
   En el movil, una. Cada fila en dos lineas: nombre y cuenta arriba, la
   calificacion y el enlace al perfil debajo. */
.records-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 1.8rem; }
@media (max-width: 760px) { .records-rejilla { grid-template-columns: 1fr; } }
.record {
	background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 1.2rem 1.3rem 1rem; min-width: 0;
}
.record h2 { font-size: 1.45rem; margin: 0; }
.record > .nota { margin: .15rem 0 .7rem; }
/* El color por defecto va en la LISTA y no en el li: ".podio li" pesa mas que
   ".metal-oro", y puesto en el li tapaba el metal de cada fila. El li lo
   hereda, y su clase metal-* lo pisa. */
.podio { list-style: none; padding: 0; margin: 0; max-width: none; --metal: var(--texto-suave); }
.podio li {
	display: grid; grid-template-columns: 1.4rem 34px minmax(0, 1fr) auto;
	grid-template-areas: "puesto icono nombre valor" "puesto icono calif ver";
	column-gap: .7rem; align-items: center; margin: 0; padding: .55rem 0;
	border-top: 1px solid var(--borde);
}
.podio li:first-child { border-top: 0; }
.podio .puesto { grid-area: puesto; font-family: var(--titulo); font-weight: 700; color: var(--texto-suave); text-align: center; }
.podio .grafica { grid-area: icono; width: 34px; height: 34px; margin: 0; }
.podio .grafica img { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
/* Top 10: quien todavia no tiene medalla sale con la primera en gris. */
.podio li.sin-ganar .grafica img { filter: grayscale(1); opacity: .35; }
.podio .grafica-hueco { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); font-size: .45rem; letter-spacing: 0; }
.podio .nombre { grid-area: nombre; font-weight: 700; color: #fff; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio .valor { grid-area: valor; justify-self: end; font-family: var(--titulo); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.podio .calif { grid-area: calif; color: var(--metal); font-size: .88rem; font-weight: 700; line-height: 1.3; }
.podio .ver { grid-area: ver; justify-self: end; font-size: .88rem; line-height: 1.3; white-space: nowrap; }
.record .vacio { margin: .2rem 0 0; }

/* La tienda de creditos Sniminix (reporte #122). */
.saldo-creditos { font-size: 1.05rem; margin: .8rem 0 1rem; }
.saldo-creditos b { color: var(--verde); }
.tienda-creditos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.producto-credito { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
	padding: 12px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.producto-credito img { width: 96px; height: 96px; object-fit: contain; }
.producto-credito .nombre { font-weight: 600; }
.producto-credito .precio { color: var(--texto-suave); font-size: .92rem; }
.producto-credito .canjear[disabled] { opacity: .45; cursor: not-allowed; }

/* LA GALERIA DEL PERFIL (reporte #139). Los rotulos "Foto del perfil" y
   "Fotos de la galeria"; los botones de la foto, capsulas mas chicas con la
   misma letra; y los marcos de 1 de ancho por 1,5 de alto con el borde del
   retrato, que recortan lo que no quepa. */
.rotulo {
	font-family: var(--titulo); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--texto-suave); margin: 1.1rem 0 .45rem;
}
.botones.capsulas { margin-top: 0; gap: .5rem; }
.boton.capsula { padding: .38em .95em; }
.galeria-editar { display: flex; gap: 14px; flex-wrap: wrap; margin: .1rem 0 .7rem; }
.hueco-galeria { display: grid; gap: .45rem; justify-items: stretch; align-content: start; width: 108px; }
.marco-galeria, .mini-galeria {
	aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden;
	border: 3px solid var(--verde); background: var(--superficie-2);
	display: grid; place-items: center;
}
.marco-galeria img, .mini-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco-galeria .sin-foto { font-size: 2rem; }
.hueco-galeria .boton { justify-content: center; }
.hueco-galeria.lleno .si-vacio, .hueco-galeria:not(.lleno) .si-lleno { display: none; }

/* En Editar la columna crece con la galeria: el retrato, arriba. */
#vista-yo .ficha-cabeza { align-items: flex-start; }

/* En el perfil publico: las miniaturas debajo de la cabecera. */
.galeria { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 .9rem; }
.mini-galeria { width: 84px; padding: 0; cursor: zoom-in; font: inherit; color: inherit; }
.mini-galeria:hover { border-color: #62e89d; }

/* EL VISOR: la capa negra con 30 % de transparencia (Lex: "que tape aun mas
   el fondo"); la foto y las flechas, sin transparencia, ajustadas a la
   pantalla para no tener que mover nada. */
.galeria-visor {
	position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .7);
	display: grid; place-items: center; padding: 56px 72px;
}
.galeria-visor img {
	max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; object-fit: contain;
	border: 3px solid var(--verde); border-radius: 14px; background: var(--superficie-2);
}
.galeria-cerrar {
	position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--verde); background: var(--superficie-2); color: var(--texto);
	font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.galeria-cerrar:hover { color: #fff; border-color: #62e89d; }
.galeria-flecha {
	position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 80px;
	border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.galeria-flecha.ant { left: 8px; }
.galeria-flecha.sig { right: 8px; }
.galeria-flecha::before { content: ""; width: 0; height: 0; border-style: solid; }
.galeria-flecha.ant::before { border-width: 18px 24px 18px 0; border-color: transparent var(--verde) transparent transparent; }
.galeria-flecha.sig::before { border-width: 18px 0 18px 24px; border-color: transparent transparent transparent var(--verde); }
.galeria-flecha:hover::before { filter: brightness(1.2); }
.con-visor, .con-visor body { overflow: hidden; }
@media (max-width: 560px) {
	.galeria-visor { padding: 64px 12px; }
	.galeria-flecha.ant { left: 0; }
	.galeria-flecha.sig { right: 0; }
}

/* LA PESTANA MENSAJES Y LAS REDES (reporte #139).
   La bandeja usa la lista .mensajes de siempre; cada mensaje lleva sus
   botones debajo, y el nombre de la otra persona enlaza a su perfil. */
.bandeja { max-width: 760px; }
.bandeja .titulo > span:first-child { overflow-wrap: anywhere; }
.bandeja .quien { color: var(--verde); font-weight: 700; }
.bandeja strong.quien { color: var(--texto); }
.bandeja .texto .quien { color: var(--texto); }
.bandeja .texto a.quien { color: var(--verde); }
.bandeja .pie-mensaje { margin: .55rem 0 0; font-weight: 700; color: var(--texto); }
.acciones-mensaje { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.acciones-mensaje .boton[disabled] { opacity: .6; cursor: progress; }
#vista-mensajes .mensaje { margin: .4rem 0 .8rem; }
/* La lista de la intencion, al pulsar "Invitar a una cita". */
.elegir-cita {
	display: grid; gap: .35rem; margin: .9rem 0 0; padding: .6rem 1rem .9rem;
	border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2);
}
.elegir-cita legend { padding: 0 .4rem; font-weight: 700; color: var(--texto); }
.elegir-cita .opcion { display: flex; gap: .65rem; align-items: center; cursor: pointer; color: var(--texto); }
.elegir-cita .opcion input { width: 1.1rem; height: 1.1rem; accent-color: var(--verde); margin: 0; }
.elegir-cita .acciones-mensaje { margin-top: .5rem; }

/* El perfil publico: debajo de la foto, el icono de cada red que puso. */
.columna-retrato { display: grid; justify-items: center; gap: .75rem; flex: 0 0 auto; }
.redes { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; max-width: 148px; }
.redes .red { display: block; border-radius: 9px; line-height: 0; }
.redes .red img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px var(--borde); }
.redes .red:hover img { box-shadow: 0 0 0 2px var(--verde); }
.redes .red:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

/* Editar: Mis redes sociales. */
.redes-editar { display: grid; gap: .7rem; max-width: 720px; margin-top: .6rem; }
.red-campo {
	display: grid; grid-template-columns: 32px 6.5rem minmax(0, 1fr); gap: .8rem; align-items: center;
}
.red-campo img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px var(--borde); }
.red-campo .red-nombre { font-weight: 700; }
.red-campo input {
	font: inherit; font-size: 1rem; color: var(--texto); background: var(--superficie-2); min-width: 0;
	border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .8rem;
}
.red-campo input:focus-visible { border-color: var(--cian); outline: none; }
.redes-editar .pie { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: .2rem; }
.redes-editar .mensaje { margin: 0; min-height: 0; }
@media (max-width: 560px) {
	.red-campo { grid-template-columns: 32px minmax(0, 1fr); }
	.red-campo input { grid-column: 1 / -1; }
}