/* Mercaorbita - pantalla Configuracion (docs/spec/31-pantallas.md §16). Solo estilos propios. */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.progress-bar { height: 100%; background: var(--accent); border-radius: var(--radius-full); }

.configuracion [data-testid="planes"] { align-items: stretch; }
.configuracion [data-testid="pagos"] .list-item { align-items: center; gap: var(--sp-3); }

/* .alert (components.css) fija display:flex sin importar [hidden]: aqui se refuerza para esta alerta que
   se muestra/oculta dinamicamente en JS (activacion del plan tras volver del checkout). */
.configuracion [data-testid="plan-activando"][hidden] { display: none; }

/* ---------------------------------------------------------------- Apariencia (selector de paletas)
   Las muestras llevan el color en crudo a proposito, que es la unica excepcion a la regla de "solo
   var(--...)": una muestra tiene que ensenar SU color, no el que esta activo. Cada valor es el mismo
   que declara tokens.css para esa opcion; si se cambia alli, hay que cambiarlo aqui (la prueba de
   humo comprueba que la lista de opciones no se desfase). */
.paleta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.paleta-opcion {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--touch); padding: var(--sp-2) var(--sp-4);
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-full);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .paleta-opcion:hover { border-color: var(--border-strong); } }
.paleta-opcion:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* La opcion elegida NO se distingue solo por el color del borde: lleva ademas el punto de control
   (::after) y aria-checked. Distinguir por color a secas deja fuera a quien no lo percibe. */
.paleta-opcion[aria-checked="true"] { border-color: var(--accent); font-weight: var(--fw-semibold); }
.paleta-opcion[aria-checked="true"]::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
}

.paleta-muestra {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1px solid var(--border-strong);
}

/* Acentos: el color que de verdad se usa en los botones de cada paleta. */
.paleta-accent-morado   { background: #5a45c9; }
.paleta-accent-verde    { background: #0f7a56; }
.paleta-accent-amarillo { background: #f2b21a; }
.paleta-accent-azul      { background: #1655c0; }
.paleta-accent-grafito   { background: #232a36; }
.paleta-accent-terracota { background: #c2410c; }
.paleta-accent-rosa      { background: #b8256f; }
/* Grafito es adaptable: sobre un fondo oscuro la muestra tambien se aclara, como el boton real. */
:root[data-bg="negro"] .paleta-accent-grafito, :root[data-bg="azul"] .paleta-accent-grafito, :root[data-bg="pizarra"] .paleta-accent-grafito { background: #dfe3ea; }

/* Fondos: el color de fondo de la aplicacion con esa opcion. */
.paleta-bg-blanco { background: #f9f8fc; }
.paleta-bg-gris   { background: #e1e4ea; }
.paleta-bg-crema  { background: #f3ecdf; }
.paleta-bg-negro  { background: #0f1115; }
.paleta-bg-azul   { background: #0b1220; }
.paleta-bg-pizarra { background: #1e2229; }