y
el espacio termina al final de la lista en vez de bajo el botón. Hoy no
se nota porque la gratitud es el último hábito; el día que deje de serlo,
el hueco aparecería en el sitio equivocado. */
padding-bottom: .9rem;
}
.gratitud-caja textarea {
width: 100%;
padding: .55rem .7rem;
border: 1px solid var(--linea);
border-radius: 10px;
background: var(--crema);
color: var(--tinta);
font-family: var(--inter);
font-size: .92rem;
line-height: 1.45;
resize: vertical;
}
.gratitud-caja textarea:focus-visible {
outline: 2px solid var(--oliva);
outline-offset: 1px;
}
/* .btn-secundario trae width:100%, que acá lo dejaría del ancho del campo.
Un "Anotar" de borde a borde bajo un cuadro de texto se lee como el botón
principal de la pantalla, y no lo es. */
.gratitud-caja .btn-secundario {
justify-self: start;
width: auto;
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.diario-faltan { font-weight: 600; }
/* ---------- Reto personal ---------- */
/* El relleno va acá y no más abajo con las otras nuevas, porque estas dos
viven en Hoy, que NO tiene una regla general de tarjeta: Perfil, la
portada pública y solicitudes sí la tienen, y por eso solo estas salían
con el texto pegado al borde.
Se copia el de .resumen-hoy —1.25/1.4— y no el 1.2 genérico: la tarjeta
del reto va justo encima del anillo, y dos bordes de texto casi alineados
se ven peor que dos claramente distintos. */
.reto,
.reto-vacio {
padding: 1.25rem 1.4rem;
margin-bottom: .8rem;
}
.reto-titulo {
margin: 0;
font-size: .78rem;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--oliva-suave);
}
/* El número grande, el que se fotografía. */
.reto-dia {
margin: .1rem 0 .6rem;
font-family: var(--fraunces);
font-size: 1.9rem;
line-height: 1.1;
color: var(--oliva);
}
.reto-barra {
height: 6px;
border-radius: 3px;
background: var(--linea);
overflow: hidden;
}
.reto-barra-llena {
height: 100%;
border-radius: 3px;
background: var(--oliva);
transition: width .4s ease;
}
.reto-mensaje {
margin: .6rem 0 0;
font-size: .92rem;
line-height: 1.45;
}
/* Mientras el día esté pendiente, el mensaje pesa más. No es alarma roja:
la app no está retando a nadie, le está recordando lo que tiene ganado. */
.reto-riesgo .reto-mensaje {
font-weight: 600;
color: var(--oliva);
}
.reto-datos {
display: flex;
flex-wrap: wrap;
gap: .3rem 1.1rem;
margin: .7rem 0 0;
font-size: .82rem;
color: var(--oliva-suave);
}
.reto-datos strong {
color: var(--tinta);
font-variant-numeric: tabular-nums;
}
/* Ritmo interior. El reset global deja los sin margen y .nota-campo solo
trae 5,6 px arriba: el título quedaba respirando encima del párrafo.
Tiene que superar esos 5,6 px o los márgenes se colapsan entre hermanos y
el valor más chico no hace nada. */
.reto-vacio > p:first-child { margin-bottom: .6rem; }
.reto .link-texto,
.reto-vacio .btn-secundario { margin-top: 1rem; }
/* ---------- Ver la contraseña ---------- */
/* Envuelve solo al input, así el botón se centra contra él y no contra el
campo entero, que arriba lleva la etiqueta. Lo crea clave.js. */
.campo-clave {
position: relative;
display: block;
}
/* Sitio para el botón, para que la contraseña no pase por debajo. */
.campo-clave input { padding-right: 2.9rem; }
.ojo-clave {
position: absolute;
right: .55rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 8px;
background: none;
color: var(--oliva-suave);
cursor: pointer;
/* 44px de área táctil sin agrandar el botón a la vista. */
-webkit-tap-highlight-color: transparent;
}
.ojo-clave::after {
content: '';
position: absolute;
inset: -.6rem;
}
.ojo-clave:hover { color: var(--oliva); }
.ojo-clave:focus-visible {
outline: 2px solid var(--oliva);
outline-offset: 1px;
}
/* ---------- Medidas del cuerpo ---------- */
.medidas-grilla {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .4rem .7rem;
margin-bottom: .8rem;
}
@media (min-width: 520px) {
.medidas-grilla { grid-template-columns: repeat(3, 1fr); }
}
.medidas-historial { margin-top: .8rem; }
.medidas-historial summary { cursor: pointer; font-size: .88rem; }
.medidas-lista {
list-style: none;
margin: .6rem 0 0;
padding: 0;
}
.medidas-lista li {
padding: .45rem 0;
border-bottom: 1px solid var(--linea);
}
.medidas-lista li:last-child { border-bottom: 0; }
.med-fecha {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--oliva-suave);
}
.med-datos {
font-size: .86rem;
line-height: 1.45;
}
/* La tarjeta que se sube a Instagram. Se mira una vez cada muchas semanas,
así que el titular tiene que leerse antes que cualquier otra cosa. */
.comparacion { margin-bottom: .8rem; }
.comp-titulo {
margin: 0;
font-size: .78rem;
font-weight: 600;
color: var(--oliva-suave);
}
.comp-fechas {
margin: .1rem 0 .6rem;
font-size: .78rem;
opacity: .75;
}
.comp-titular {
margin: 0 0 .7rem;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
}
.comp-lista {
list-style: none;
margin: 0;
padding: 0;
}
.comp-fila {
display: flex;
align-items: baseline;
gap: .5rem;
padding: .4rem 0;
border-bottom: 1px solid var(--linea);
font-size: .88rem;
}
.comp-fila:last-child { border-bottom: 0; }
.comp-parte {
flex: 0 0 auto;
min-width: 4.6rem;
font-weight: 600;
}
.comp-antes {
flex: 1 1 auto;
opacity: .8;
}
.comp-delta {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* Solo se destaca lo que sabemos que es progreso. Ver el porqué en
medidas.js: a quien entrena fuerza, un brazo que crece es el objetivo.
Se usa el oliva de la app y no un verde de semáforo: la paleta entera es
crema y oliva, y un verde prestado se ve como un error. */
.comp-buena .comp-delta { color: var(--oliva); }
.comp-buena .comp-parte { color: var(--oliva); }
/* Los gramos anotados a mano. Van pegados al texto de la comida y no en una
columna propia: la mayoría de las filas no los va a tener, y una columna
medio vacía hace parecer que falta algo. */
.diario-prote {
flex: 0 0 auto;
font-size: .78rem;
font-weight: 600;
color: var(--oliva-suave);
white-space: nowrap;
}
.diario-total {
margin: 0 0 .9rem;
font-size: .88rem;
line-height: 1.5;
}
.diario-parcial {
display: block;
font-size: .78rem;
opacity: .75;
}
.diario-borrar {
flex: 0 0 auto;
background: none;
border: 0;
padding: .1rem .3rem;
font-size: .9rem;
color: var(--oliva-suave);
cursor: pointer;
}
.diario-borrar:hover { color: #9A5B4E; }
/* En móvil el select y el botón se van abajo; el texto ocupa todo el ancho,
que es donde de verdad se escribe. */
.diario-nuevo {
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
margin-bottom: .6rem;
}
/* El ancho y la forma ya vienen de las reglas globales de campo. */
@media (min-width: 480px) {
.diario-nuevo {
grid-template-columns: auto 1fr 7rem auto;
align-items: center;
}
}
.diario-coach { margin-top: .6rem; }
.diario-coach summary { cursor: pointer; font-size: .88rem; }
.diario-dia { margin-top: .7rem; }
.diario-fecha {
margin: 0 0 .2rem;
font-size: .78rem;
font-weight: 600;
color: var(--oliva);
}
.liga-acciones {
margin: .2rem 0 1.1rem;
text-align: center;
}
/* Salir o borrar no compiten con "Crear": se ven como un enlace, no como
un botón, para que nadie los toque de pasada. */
.btn-texto {
background: none;
border: 0;
padding: .4rem .6rem;
font: inherit;
font-size: .85rem;
color: var(--oliva-suave);
text-decoration: underline;
cursor: pointer;
}
.btn-texto:hover { color: var(--oliva); }
.btn-peligro { color: #9A5B4E; }
.btn-peligro:hover { color: #7C4438; }
/* Borrar la cuenta va plegado y al final. No escondido —tiene que poder
encontrarse— pero tampoco al lado de "Cerrar sesión", que es lo que la
gente busca de verdad cuando llega hasta abajo. */
/* .tarjeta no trae relleno: cada uso pone el suyo. La de "Cerrar sesión" no
lo necesita porque solo lleva un botón de ancho completo; esta sí, que
tiene texto y un campo. */
/* El relleno lo pone `#vista-perfil .tarjeta`, que gana por especificidad.
No se repite acá para no dejar una declaración muerta que confunda al
próximo que venga a cuadrar esta tarjeta. */
.borrar-card {
margin-top: .8rem;
border-color: rgba(154, 91, 78, .35);
}
.borrar-card summary {
cursor: pointer;
font-size: .9rem;
font-weight: 600;
color: #9A5B4E;
}
.borrar-card .campo { margin-top: .8rem; }
.borrar-card .btn-peligro {
width: 100%;
padding: .7rem 1rem;
border: 1px solid rgba(154, 91, 78, .45);
border-radius: var(--radio);
background: none;
font-family: var(--inter);
font-size: .92rem;
font-weight: 600;
cursor: pointer;
}
.liga-estado {
margin-bottom: .9rem;
text-align: center;
font-size: .88rem;
color: var(--oliva-suave);
}
.liga-cerrada { color: var(--oliva); }
.rank-nivel {
font-size: 0.7rem;
color: var(--oliva-suave);
font-weight: 500;
}
.lista-clubes {
list-style: none;
margin: 0 0 0.8rem;
padding: 0;
font-size: 0.95rem;
}
.lista-clubes li { padding: 0.35rem 0; border-bottom: 1px solid var(--linea); }
.lista-clubes li:last-child { border-bottom: 0; }
.ranking-lista { list-style: none; margin: 0; padding: 0; }
.ranking-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
margin-bottom: 0.5rem;
}
.ranking-item.soy-yo { border-color: var(--oliva); }
.rank-puesto {
font-family: var(--fraunces);
font-size: 1.1rem;
font-weight: 600;
color: var(--oliva-suave);
min-width: 1.5rem;
}
.rank-nombre { flex: 1; }
.rank-puntos { color: var(--oliva); }
.liga-crear { padding: 1.2rem; margin-top: 1rem; }