al que subirle el z-index.
*
* Se anima el TAMAÑO y no la posición. Con `background-size: 100% 100%` la
* imagen mide exactamente lo que el área de posicionado, y entonces un
* porcentaje de posición vale `(caja − imagen) × pct = 0`: daba igual poner
* 148 % que 0 %, el oro no se movía y el botón salía RELLENO en reposo, con
* el texto claro sobre oro — invisible. Con la altura a 0 no hay nada que
* enseñar hasta que se crece.
*/
background-image: var(--grad-gold);
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100% 0%;
/* El color del texto espera a que el oro haya subido. Sin la espera, el texto
se oscurecía en 320 ms mientras el relleno tardaba 500: durante la primera
décima de segundo la mitad de arriba del botón quedaba en marrón oscuro
sobre negro, ilegible, justo al pasar el ratón. */
transition: background-size .5s var(--ease), background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease) 130ms,
transform var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled) {
border-color: var(--gold); color: var(--tinta-oro);
background-size: 100% 100%;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--full { width: 100%; }
.btn--oro {
background-size: 100% 100%; /* ya viene lleno: no hay nada que barrer */
color: var(--tinta-oro); border-color: transparent; font-weight: 700;
/* El brillo interior de arriba es lo que lo hace parecer metal y no un
rectángulo amarillo. */
box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--oro:hover:not(:disabled) {
border-color: transparent; color: var(--tinta-oro);
box-shadow: 0 12px 36px rgba(233, 205, 134, .26), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Proveedores externos. Se dejan neutros a propósito: el color corporativo de
Google o Apple dentro de esta paleta canta muchísimo y rompe la sobriedad.
`background-color` y NO el atajo `background`: el atajo borra también la capa
de imagen, así que el botón se quedaba sin el oro del barrido pero el hover
seguía poniéndole tinta oscura → texto casi negro sobre fondo negro. Hoy no
se ve porque no hay proveedores configurados; saltaría el día que se activen. */
.btn--proveedor { background-color: var(--glass); font-weight: 400; }
.btn--proveedor svg { width: 18px; height: 18px; flex: none; }
/* --------------------------------------------------------------- campo --- */
.campo { display: block; margin-bottom: 18px; }
.campo__et {
display: block; margin-bottom: 7px;
font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/*
* Los tres controles, con el mismo aspecto.
*
* Antes solo se estilaba `input`, así que en cuanto una pantalla usó un
* `textarea` o un `select` aparecían con la pinta que les da el sistema
* operativo: fuente distinta, fondo claro, esquinas rectas. En medio de esta
* paleta cantan muchísimo, y encima el `select` de Windows sale con letra
* pequeña y difícil de tocar en el móvil.
*/
.campo input,
.campo textarea {
width: 100%; min-height: 48px; padding: 12px 14px;
font-family: var(--font-body); font-size: 1rem;
line-height: 1.55;
color: var(--cream); background: rgba(0, 0, 0, .35);
border: 1px solid var(--line); border-radius: var(--radius-m);
/* solo el textarea se puede estirar, y solo a lo alto: a lo ancho se saldría
de la tarjeta en el móvil */
resize: vertical;
transition: border-color var(--dur-1) var(--ease);
}
/* El select va en su propio bloque, sin agruparlo con los otros dos, porque el
revisor de CSS del proyecto cuenta un selector repetido aunque una de las dos
veces sea dentro de una lista — y esa comprobación existe para cazar
duplicados de verdad. Sale más barato repetir seis propiedades que aflojar la
herramienta.
`appearance:none` porque, sin él, el navegador dibuja su propia flecha sobre
este fondo oscuro y no siempre con contraste suficiente; la nuestra va como
data-uri, que es lo único que admite la CSP. */
.campo select {
width: 100%; min-height: 48px; padding: 12px 40px 12px 14px;
font-family: var(--font-body); font-size: 1rem;
color: var(--cream);
border: 1px solid var(--line); border-radius: var(--radius-m);
transition: border-color var(--dur-1) var(--ease);
appearance: none;
background-color: rgba(0, 0, 0, .35);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e9cd86' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
}
.campo input:hover,
.campo textarea:hover,
.campo select:hover { border-color: var(--line-hi); }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--faint); }
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--ember); }
.campo__msg { display: block; margin-top: 6px; font-size: .86rem; color: var(--ember); min-height: 1.2em; }
.campo__pista { display: block; margin-top: 6px; font-size: .84rem; color: var(--faint); }
/* --------------------------------------------------------------- aviso --- */
.aviso {
padding: 12px 15px; border-radius: var(--radius-m);
border: 1px solid var(--line); background: var(--glass);
font-size: .93rem; color: var(--cream);
}
.aviso--mal { border-color: rgba(196, 50, 74, .5); background: rgba(140, 20, 40, .14); }
.aviso--bien { border-color: var(--line-hi); }
.aviso[hidden] { display: none !important; }
/* ------------------------------------------------------------ separador -- */
.o {
display: flex; align-items: center; gap: 14px;
margin: 22px 0; color: var(--faint);
font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.o::before, .o::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ------------------------------------------------------ pantalla de carga - */
/*
* El telón que tapa la pantalla mientras se resuelve la sesión. Lo usan el área
* de socios Y el panel, así que vive aquí: estaba solo en `privado.css`, que el
* panel no carga, y allí el logotipo salía sin estilo pegado a la esquina de
* arriba a la izquierda mientras respondía /api/me.
*
* El fondo es el MISMO degradado del body para que al quitarse el telón no se
* note un salto de color.
*/
.cargando {
position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
background: radial-gradient(120% 90% at 50% 38%, #1a0610 0%, #0a0507 55%, var(--noir) 100%);
}
.cargando .logo { width: min(200px, 56vw); }
/* Aviso de «no se ha podido conectar», dentro del propio telón. Se pinta desde
JavaScript solo cuando la API no responde; el logotipo se queda arriba. */
.cargando__aviso {
display: grid; justify-items: center; gap: 10px;
margin-top: 26px; padding-inline: 24px; text-align: center; max-width: 34ch;
}
.cargando__aviso p { margin: 0; color: var(--cream); }
.cargando__aviso .cargando__sub { color: var(--muted); font-size: .92rem; }
.cargando__aviso .btn { margin-top: 6px; }
/* -------------------------------------------------------------- sin JS --- */
/*
* El z-index tiene que ganarle a la pantalla de carga (`.cargando`, z-index 50):
* esa capa es fija y opaca, y si no se pasa por encima el aviso quedaría debajo
* y el resultado sería el mismo negro mudo que se quería evitar.
*/
.sin-js {
position: fixed; inset: 0; z-index: 100;
display: grid; place-content: center; gap: 8px;
padding: 32px; text-align: center;
background: var(--noir); color: var(--cream);
}
.sin-js strong { color: var(--gold-pale); font-family: var(--font-display); font-size: 1.15rem; }
.sin-js p { margin: 0; }
/* ------------------------------------------------------------ utilidades - */
[hidden] { display: none !important; }
.visualmente-oculto {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pie-legal {
margin-top: 26px; text-align: center;
font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
/*
* Con `.filete` alrededor, el pie deja de ser una línea suelta y se convierte en
* la firma de la pantalla.
*
* `margin: 0` y no `margin-top: 0`. La regla de arriba fija el margen superior
* pero no el inferior, así que el se quedaba con el `1em` que le pone el
* navegador por defecto: la caja del párrafo medía 24 px para 12 px de texto, y
* como en flex se centra la caja CON su margen, las letras subían y los filetes
* cruzaban seis píxeles por debajo. No se veía a ojo por qué; se vio midiendo.
*/
.filete .pie-legal { margin: 0; line-height: 1; }
/* Quien pide menos movimiento no quiere ninguno. Se apaga de verdad, no "casi". */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/*
* Con la regla de arriba, el latido del logotipo dura un microsegundo y el
* elemento vuelve a su estado sin animar: `filter: none`. Resultado medido —
* el logo se quedaba SIN brillo justo para quien ha pedido menos movimiento,
* y como ningún píxel del logotipo es opaco, se veía más apagado que para todo
* el mundo. Se le da el brillo fijo, que es lo que hace la web pública.
*/
.logo--latir { filter: drop-shadow(0 0 14px rgba(233, 205, 134, .5)); }
}