/* Catálogo de Wild Tribes (catalogo.js): paquetes de tarifas, su antes y después y su publicación.
   Reusa los tokens de estilo.css y las clases vt-* de ventas.css. */
.ct [hidden] { display: none !important; }
.ct .btn.primario { width: auto; margin-top: 0; }

/* Estado de cada paquete: los mismos colores que las obligaciones y propuestas de Ventas y Tribe Days. */
.ct-borrador, .ct-retirado { background: var(--bruma); color: var(--suave); }
.ct-pendiente, .ct-publicando { background: var(--sol-fondo); color: var(--sol-tinta); }
.ct-aprobado, .ct-en_linea { background: var(--ok-fondo); color: var(--ok); }
.ct-fallo, .ct-rechazado, .ct-piso { background: var(--foco-fondo); color: var(--foco); }
.ct-en-paquete { background: var(--sol-fondo); color: var(--sol-tinta); }

.ct-aviso-global { margin: 12px 0 0; }
.ct-ok { color: var(--ok); background: var(--ok-fondo); padding: 6px 10px; border-radius: 8px; }
.ct-error-paquete { display: inline-block; margin-top: 4px; font-size: 13px; }
.ct-acciones { white-space: nowrap; }

/* Las tablas se desplazan dentro de su caja, no la página (375 px). */
.ct-desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ct-desliza .vt-tabla { min-width: 560px; }

.ct-buscar { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; }

/* Formulario en la fila (cambiar una tarifa, rechazar un paquete). */
.ct-form-fila > td, .ct-rechazo-fila > td { background: var(--bruma); }
.ct-form, .ct-rechazo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ct-form label, .ct-rechazo label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.ct-form input:not([type="checkbox"]), .ct-form select, .ct-rechazo textarea { padding: 6px 8px; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; }
.ct-form input[name="cifra"] { width: 120px; }
.ct-form .ct-fijo { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.ct-form .ct-motivo { flex: 1 1 220px; }
.ct-rechazo label { flex: 1 1 100%; }
.ct-rechazo textarea { width: 100%; box-sizing: border-box; }
.ct-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-msg { flex-basis: 100%; margin: 4px 0 0; }

.ct-mandar input[name="titulo"] { flex: 1 1 240px; }
.ct-efecto { margin-top: 14px; }
.ct-td h3 { margin: 18px 0 4px; font-size: 16px; }
.ct-td h4 { margin: 10px 0 6px; font-size: 14px; color: var(--suave); font-weight: 500; }
/* Un escenario abajo del piso: la fila en el rojo de los avisos graves. */
.ct-bajo-piso td { background: var(--foco-fondo); color: var(--foco); }

.ct-dialogo { max-width: 440px; border: 1px solid var(--linea); border-radius: 14px; padding: 20px 22px;
  background: var(--papel); color: var(--tinta); }
.ct-dialogo::backdrop { background: rgba(0, 0, 0, .35); }
.ct-dlg-texto { margin: 0 0 16px; }
.ct-dlg-botones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  /* ventas.css ya vuelve bloque desplazable a .vt-tabla; aquí el desplazamiento lo lleva la caja. */
  .ct-desliza .vt-tabla { display: table; }
  .ct-form input[name="cifra"] { width: 100%; }
  .ct-form label { flex: 1 1 100%; }
  .ct-form .ct-fijo { flex: 0 0 auto; }
}