css/componentes/controles.css

/* Controles — botones, campos, pasos, miniaturas. */

/* Acción principal (Aplicar, Guardar) */
.accion {
  width: 100%;
  min-height: var(--m-accion-alto);
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--accion-fondo);
  color: var(--accion-texto);
  font-size: var(--f-md);
  font-weight: var(--f-peso-medio);
  transition: background var(--t-rapido) var(--curva-resorte);
}
.accion:hover { background: var(--accion-fondo-hover); }
/* Apagada: la misma pastilla teal, solo que a media luz. */
.accion[disabled] { opacity: 0.4; cursor: default; }

.accion--secundaria {
  position: relative;
  background: var(--vidrio-fondo);
  backdrop-filter: var(--vidrio-desenfoque);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  color: var(--texto-principal);
  box-shadow: var(--vidrio-sombra), inset 0 0 0 1px var(--accion-secundaria-borde);
}
/* En hover no se cambia el vidrio: se aclara el borde, nada más. */
.accion--secundaria:hover { box-shadow: var(--vidrio-sombra), inset 0 0 0 1px var(--texto-principal); }
.accion--secundaria::before,
.accion--secundaria::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.accion--secundaria::before {
  padding: 1px;
  background: var(--vidrio-borde-degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* token-libre: máscara, no es color de diseño */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.accion--secundaria::after {
  background-image: var(--grano);
  background-size: var(--vidrio-grano-tamano);
  opacity: var(--vidrio-grano-opacidad);
  mix-blend-mode: overlay;
}

/* Acción del umbral, sobre la noche */
.accion--umbral {
  width: auto;
  padding: 0 var(--e-10);
  background: var(--accion-umbral-fondo);
  color: var(--accion-umbral-texto);
  transition: background var(--t-medio) var(--curva-planeo),
              transform var(--t-medio) var(--curva-planeo);
}
.accion--umbral:hover {
  background: var(--accion-umbral-hover);
  transform: translateY(-1px);
}

/* Enlace discreto (Elegir del ordenador, Otra) */
.enlace {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--f-sm);
  color: var(--texto-secundario);
  border-bottom: 1px solid var(--borde-marcado);
  transition: color var(--t-instante) var(--curva-suave),
              border-color var(--t-instante) var(--curva-suave);
}
.enlace:hover { color: var(--texto-principal); border-color: var(--texto-principal); }

/* Paso numerado */
.paso {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.paso__titulo {
  display: flex;
  align-items: center;
  font-size: var(--f-s);
  color: var(--texto-tenue);
}
.paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--m-numero);
  height: var(--m-numero);
  margin-right: var(--e-3);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-circulo);
  font-size: var(--f-xs);
  color: var(--texto-tenue);
  flex: 0 0 auto;
}

/* Campo de texto */
.campo {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde-sutil);
  padding: var(--e-3) 2px;
  color: var(--texto-principal);
  font-family: inherit;
  font-size: var(--f-m);
}
.campo::placeholder { color: var(--texto-marcador); }
.campo:focus-visible { outline: none; border-bottom-color: var(--texto-principal); }

.campo--intencion {
  min-height: var(--m-modal-texto);
  resize: vertical;
  line-height: var(--f-alto-normal);
}

/* Miniaturas de ejemplo */
.miniaturas { display: flex; gap: var(--e-2); }

.miniatura {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  opacity: 0.6;
  border-radius: var(--r-m);
  overflow: hidden;
  transition: opacity var(--t-instante) var(--curva-suave),
              box-shadow var(--t-instante) var(--curva-suave);
}
.miniatura:hover { opacity: 0.9; }
.miniatura[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--texto-principal);
}
.miniatura img {
  width: var(--m-miniatura-ancho);
  height: var(--m-miniatura-alto);
  object-fit: cover;
}

:where(button, input, textarea):focus-visible {
  outline: 2px solid var(--texto-principal);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .miniatura img { height: var(--m-miniatura-alto-movil); }
}