/* =============================================================
   Comparador de comisiones — solo lo específico de esta herramienta.
   La base (tokens, espaciado, formularios, resultado, secciones) está
   en ../assets/kalculia-ui.css.
   ============================================================= */

/* Formulario: rejilla 2×2 de campos en escritorio */
@media (min-width: 960px) {
  #cc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  #cc-form > .toggle-field, #cc-form > .cc-options-grid, #cc-form > .cc-presets-note { grid-column: 1 / -1; }
}

#cc-chart { display: block; width: 100%; cursor: crosshair; }
#btn-download-csv { margin-top: var(--s-4); }

/* Móvil: los productos reales en una fila deslizable, sin ocupar 3 líneas por opción */
@media (max-width: 559px) {
  .cc-preset-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-preset-chips::-webkit-scrollbar { display: none; }
  .cc-preset-chip { min-width: 0; justify-content: space-between; padding-inline: var(--s-3); font-size: .78rem; white-space: nowrap; }
}

/* Escritorio: los productos en dos columnas iguales y el impar a todo el ancho, igual que en móvil
   (en tres columnas «Indexa Capital» no cabe en una línea) */
@media (min-width: 560px) {
  .cc-preset-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-preset-chip { min-width: 0; justify-content: space-between; white-space: nowrap; }
  .cc-preset-chips > .cc-preset-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Móvil: si queda un producto suelto, ocupa la fila entera (cuadrícula simétrica) */
@media (max-width: 559px) {
  .cc-preset-chips > .cc-preset-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Enlace a /insertar/ bajo la tarjeta de compartir */
.embed-cta { margin-top: var(--s-3); text-align: center; }
.embed-cta a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }